CODEWITHSUNDEEP
javafxfxml
Doc Type
Doc Type

Reputation: 95

Image button javafx

quick question, how do I have an image cover the whole button in fxml.

So all that is visible of the button is the border. For some reason when I try to resize the image to fit the button automatically resizes to. I was using scene builder. I am using FXML.

The button size is prefHeight="38.0" prefWidth="50.999900000002526".

Remember I do not want to see the background of the button. I want it to be covered by an image.

Thx soo much, you guys have been a big help.

Upvotes: 2

Views: 3533

Answers (1)

XaolingBao
XaolingBao

Reputation: 1044

What you are looking for is to work with the padding

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Region.html#setPadding-javafx.geometry.Insets-

setPadding

public final void setPadding(Insets value);

Sets the value of the property padding.

Property description: The top, right, bottom, and left padding around the region's content. This space will be included in the calculation of the region's minimum and preferred sizes. By default padding is Insets.EMPTY. Setting the value to null should be avoided.

it doesn't mention a default, but you can get this easily by typing button.getPadding();

I decided to test this myself, and got a value of

 Insets [top=4.0, right=8.0, bottom=4.0, left=8.0]

which is why you are having the issue with it not filling up. Resizing affects the button, the graphic is a part of it.

Next we will have to define our insets to get the desired affect.

To define our padding, we need to look at the insets

https://docs.oracle.com/javase/8/javafx/api/javafx/geometry/Insets.html

there is a static Field for Empty so lets use that.

Button btn = new Button();
btn.setGraphic(new ImageView("image"));
btn.setPadding(Insets.EMPTY);

will produce the desired affect, and produces a result of

Insets [top=0.0, right=0.0, bottom=0.0, left=0.0]

HOWEVER... There is still a border, which is possibly only there when in focus...

If you want to get rid of the border, read below.

I decided to test if a negative value would work, and indeed -1 will work.

Essentially, if you give the insets a -1 value it will cut off the border around the button, so the button is essentially an image

public class JavaFXApplication extends Application {

@Override
public void start(Stage primaryStage) {
    Button btn = new Button();
    btn.setGraphic(new ImageView(image));
    btn.setPadding(new Insets(-1,-1,-1,-1));
    btn.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            System.out.println(btn.getPadding());
        }
    });

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

    Scene scene = new Scene(root, 300, 250);

    primaryStage.setTitle("Button Image!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

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

}

Upvotes: 3

Related Questions