Is possible having two buttons in one square? - button

Question

I'm working with javafx and I need to have one square divided by its diagonal where each half is a different button, I have found how to shape a button, but I have no idea on how to code this new component.
The idea is:
Each half has to be a different button as explained above, any help would be great. Thank you!

Answer 1

Here's an example of what you want to accomplish (explanations in code comments):
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
public class Main extends Application {
/*
* You can manipulate the shape of any Region via the Region#shape property.
* The shape will, by default, be scaled to fit the size of the region (see
* Region#scaleShape property). This means you only need to set the proportions
* of the shape.
*
* You'll also want to set the Node#pickOnBounds property to false. This way
* the mouse only interacts with the shape of the Region instead of the whole
* bounds which will remain rectangular.
*/
#Override
public void start(Stage primaryStage) {
var btn1 = new Button();
// triangle with its 90° corner in the top-left
btn1.setShape(new Polygon(0, 0, 1, 0, 0, 1));
// only interact with the shape of the button (the bounds are still rectangular)
btn1.setPickOnBounds(false);
// allow the button to grow to fill available space
btn1.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
btn1.setOnAction(e -> System.out.println("button-1"));
btn1.setStyle("-fx-base: green;");
var btn2 = new Button();
// triangle with its 90° corner in the bottom-right
btn2.setShape(new Polygon(1, 1, 0, 1, 1, 0));
// only interact with the shape of the button (the bounds are still rectangular)
btn2.setPickOnBounds(false);
// allow the button to grow to fill available space
btn2.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
btn2.setOnAction(e -> System.out.println("button-2"));
btn2.setStyle("-fx-base: purple;");
// a StackPane centers its children on top of each other, but since
// we have two triangles taking up half a square the buttons will
// appear to be positioned in the corners
var container = new StackPane(btn1, btn2);
// keep container square (so the triangles take up half the area)
container.setMaxSize(150, 150);
primaryStage.setScene(new Scene(new StackPane(container), 300, 300));
primaryStage.show();
}
}
And this is what it looks like:
Unfortunately, I don't believe you can add text or graphics to the buttons. The text/graphic will still be centered on the button as if it were a rectangle. And when you set the shape property to a non-null value any background images are ignored. If you need more control then consider creating your own "control" (e.g. out of shapes); the reason the above uses Button is so you get all the built-in behavior of buttons.