CODEWITHSUNDEEP
javauser-interfacejavafx
Pierre Henry
Pierre Henry

Reputation: 17487

JavaFX : how to make a button with two (2) or more icons?

There is plenty of online resource on how to add a graphic to a JavaFX button.

However I would like to know if there is a way to add a second (or any number, but more than 2 images probably woudn't make much sense in most situations) image.

My use case : i have a button with a square icon on the left, followed by a text label. The image is a representation of some real-life concept that button is linked with (could e.g. a car or a person). I would like to add a small icon to the right of some buttons, a "right chevron" to indicate the nature of the interaction.

enter image description here

I was thinking maybe to use a HBox with the full width as the graphic node of the button, and add the 2 images to it, but I don't think it is possible to put the text on top of the graphic node.

Any idea ?

Upvotes: 2

Views: 3551

Answers (3)

Roland
Roland

Reputation: 18415

Create your own custom node with icons and text and set it as graphic. Of course you don't show the button text because it's already in your custom graphic node.

Here's a simple example. You need to provide the files icon1.png and icon2.png.

public class ButtonWithMultipleIcons extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {

            Group group = new Group();

            Button button = new Button();
            button.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

            HBox hBox = new HBox();

            ImageView icon1 = new ImageView( getClass().getResource( "icon1.png").toExternalForm());
            ImageView icon2 = new ImageView( getClass().getResource( "icon2.png").toExternalForm());

            Label label = new Label("Text");

            //make the button grow if you want the right icon to always be on the right of the button :
            label.setMaxWidth(Long.MAX_VALUE);

            HBox.setHgrow(label, Priority.ALWAYS);


            hBox.getChildren().addAll( icon1, label, icon2);

            button.setGraphic(hBox);

            group.getChildren().add( button);

            Scene scene = new Scene(group,400,400);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Upvotes: 6

marc3l
marc3l

Reputation: 2595

I had the same thing to get along with. You describing the solution with using a HBox. I think this would also be the best way.

Do the following: Create a new CustomButton with your own specific layout maybe using a HBox and extending Button class from JavaFX. Style it your way you need it and you can add as many images you want to have in your custom button. Maybe it can look like this:

public class CustomButton extends Button
{
   private HBox hbox;
   private ImageView image1;
   private ImageView image2;

   public CustomButton()
   {
      super();
      // Here add your specific images to global or local variables and then add all the children    (images) to your HBox layout and this one to the button.
   }
}

The problem ist, that JavaFX provides normal buttons and not such deeply customized components. If you want to style it, you can use CSS anyway.

Upvotes: 0

smiche2
smiche2

Reputation: 71

You can try using html formatting in your button and adding an image with the tag before and after your text.

You can find more information about it in here:http://docs.oracle.com/javase/tutorial/uiswing/components/html.html

Upvotes: 0

Related Questions