JavaFX Image Button Tutorial

In this tutorial, we will learn how to create image buttons in JavaFX. By default, there is no special component named ImageButton. However, we can easily extend the default JavaFX Button to create a button with image.

JavaFX Image Button with Text

To create a button with image, we can make use of the Button#setGraphic(Node) function. We can set the image we want to attach to the button through the setGraphic() method. Let’s see an example code to understand it better.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXImageButton extends Application {

  private static final double BUTTON_HEIGHT = 100;

  public void start(Stage stage) {
    //Create a Button
    Button button = new Button("Download!");
    button.setPrefSize(Region.USE_COMPUTED_SIZE, BUTTON_HEIGHT);

    //Create imageview with background image
    ImageView view = new ImageView(new Image("download.png"));
    view.setFitHeight(BUTTON_HEIGHT);
    view.setPreserveRatio(true);

    //Attach image to the button
    button.setGraphic(view);
    //Set the image to the top
    button.setContentDisplay(ContentDisplay.TOP);

    Scene scene = new Scene(new StackPane(button), 600, 300);
    stage.setTitle("JavaFX Button with Image!");
    stage.setScene(scene);
    stage.show();
  }

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

You can see the result above. We have added the image icon on the top and text on the bottom. You can change the position of the text with respect to the image by changing the setContentDisplay() option.

//Set button text to the right of the image
button.setContentDisplay(ContentDisplay.RIGHT);
//Set button text to the left of the image
button.setContentDisplay(ContentDisplay.LEFT);

JavaFX Image Only Button

Now, if you would like to implement a button without any text that fits the button fully, let’s see how that can be achieved. When you want a clickable button with just an image and no text, you can still use the setGraphic(Node) function. Let’s understand it with an example code. We should make use of the no-arg constructor of javafx.scene.control.Button() to create button without any text.

private static final double BUTTON_HEIGHT = 100;

public void start(Stage stage) {

  //Creating a Button without any text
  Button button = new Button();
  button.setPrefSize(Region.USE_COMPUTED_SIZE, BUTTON_HEIGHT);

  //Create imageview with background image
  ImageView view = new ImageView(new Image("background.jpg"));
  view.setFitHeight(BUTTON_HEIGHT);
  view.setPreserveRatio(true);

  //Attach image to the button
  button.setGraphic(view);

  Scene scene = new Scene(new StackPane(button), 600, 300);
  stage.setTitle("JavaFX Button with Image!");
  stage.setScene(scene);
  stage.show();
}

This will create the following output.

Q. How to remove the padding between the button graphic image and the button edge?
If you want to get rid of the padding between the image and the button edge, you need to manually set the button padding to zero. This can be done using the setPadding(Inset) option.

button.setPadding(Insets.EMPTY);

JavaFX Image Button with CSS

We can also create ImageButton with the help of JavaFX CSS. Set the image as the background for the Button using -fx-background-image CSS styling. Let’s see how we can create our ImageButton with CSS. The disadvantage of using a background image is that, the text will be on top of the image, and we will have to make sure that the text color is readable in the image background.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXImageButton extends Application {

  public void start(Stage stage) {
    //Creating a Button without any text
    Button button = new Button();
    button.setPrefSize(200, 100);
    button.setStyle("-fx-background-image: url(background.jpg);-fx-text-fill: white;-fx-font-size: 20px");
    button.setText("Download!");

    Scene scene = new Scene(new StackPane(button), 600, 300);
    stage.setTitle("JavaFX Image Button with CSS!");
    stage.setScene(scene);
    stage.show();
  }

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

Conclusion

In this tutorial, we have learned how to create JavaFX Buttons with Images. We have created button with image and text, button with only image and Image Button with CSS styling. If you liked this article, you might also want to checkout some of the other interesting articles I have written.

• JavaFX DatePicker Tutorial
• JavaFX ObservableList Tutorial
• Create your first desktop application using Flutter