how to create this type of button in javafx

Question

enter image description here

In javafx can I create this type of button? I tried a splitmenubutton but it contais the button with the arrow. In this picture the button contains an arrow with text and an image (not just the arrow).

Have you tried [`MenuButton`](http://tutorials.jenkov.com/javafx/menubutton.html)? — SedJ601, Jun 10 '18 at 00:44
https://stackoverflow.com/questions/37522801/javafx-splitmenubutton-setting-the-position-of-the-arrow — SedJ601, Jun 10 '18 at 01:09

SedJ601 · Accepted Answer · 2018-06-10T15:53:41.773

Here is an example using MenuButton. I found an option image and a down-arrow image.

Key code

//Use a VBox to stack the different nodes
menuButton.setGraphic(new VBox(new StackPane(imageView), label, new StackPane(imageView2)));

***The attached CSS file removes the default down-arrow.****

Full code

import javafx.application.Application;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/**
 *
 * @author Sedrick
 */
public class JavaFXApplication9 extends Application {

    @Override
    public void start(Stage primaryStage) {

        MenuItem menuItem1 = new Menu("One");
        MenuItem menuItem2 = new Menu("Two");

        MenuButton menuButton = new MenuButton();
        ImageView imageView = new ImageView(new Image(getClass().getResourceAsStream("options.png")));
        imageView.setFitWidth(25);
        imageView.setFitHeight(25);
        ImageView imageView2 = new ImageView(new Image(getClass().getResourceAsStream("arrow.png")));
        imageView2.setFitWidth(25);
        imageView2.setFitHeight(15);
        Label label = new Label("Options");
        menuButton.setGraphic(new VBox(new StackPane(imageView), label, new StackPane(imageView2)));
        menuButton.getItems().addAll(menuItem1, menuItem2);
        menuButton.setPopupSide(Side.BOTTOM);

        StackPane root = new StackPane();        
        root.getChildren().add(menuButton);

        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("myCss.css").toString());

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);

        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

CSS File

Code from here.

.menu-button > .arrow-button {
    -fx-padding: 0;
}

.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}

Results

how to create this type of button in javafx

1 Answers1