Javafx CSS Button with Image - How to Define the Size of the Image

JavaFX CSS Button with Image - How to define the size of the image?

I had the same problem and found a workaround: instead of using -fx-image, I use -fx-background-image.

Note: I use an additional lib to use svg file in the following example.

CSS

#buttonWithImage { 
    -fx-background-image: url('myimage.svg');
    -fx-background-size: 30px;
    -fx-background-repeat: no-repeat;
    -fx-background-position: 90%;
}

Set size of image in `ImageView` in button where image is set using css

If the pictures are too big, well, then resize them! Bad solution, but better than nothing.

how to set -fx-graphic size in JavaFX?

I don't think there is a way to manage your graphic size from CSS, but you can do it programmatically instead,

Button deleteButton = new Button();

ImageView image = new ImageView(new Image("../view/Close.png"));
image.setFitWidth(50);
image.setFitHeight(50);

deleteButton.setGraphic(image);

Alternatively,

You can set a background image on your button altenatively,

.deleteButton {
    -fx-background-image: url(../view/Close.png);
    -fx-background-size: 50px 50px;
    -fx-background-position: center;
    -fx-background-repeat: no-repeat;
}

Or

BackgroundSize size = new BackgroundSize(
        50,
        50,
        true,
        true,
        true,
        false);
BackgroundImage image = new BackgroundImage(new Image("../view/Close.png"),
        BackgroundRepeat.NO_REPEAT,
        BackgroundRepeat.NO_REPEAT,
        BackgroundPosition.CENTER,
        size);

deleteButton.setBackground(new Background(image));  

javafx stretch an image to fill a button?

    btnTest.setMinSize(55, 37);
    btnTest.setMaxSize(55, 37);

    Image image = new Image("/view/images/someImage.png", btnTest.getWidth(), btnTest.getHeight(), false, true, true);
    BackgroundImage bImage = new BackgroundImage(image, BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, new BackgroundSize(btnTest.getWidth(), btnTest.getHeight(), true, true, true, false));

    Background backGround = new Background(bImage);
    btnTest.setBackground(backGround);

See https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Background.html

How to make image fill entire button JavaFX

You need to set the background-size, otherwise the background size is set to zero. Try the following:

.toggle-button  {

    -fx-min-height: 132px;

    -fx-min-width: 128px;

    -fx-background-image: url("close.png");

    -fx-background-size: 100% 100%;

    -fx-background-repeat: no-repeat;

    -fx-background-position: center 8px;

}

Button with image (styling with FXML/CSS)

Background

In general, I'd advise, just using the ContentDisplay on buttons and having the button manage the layout of items inside the button on your behalf. But that approach will not work for your particular use-case.

Sample Solution

Put both the text and the image in the graphic inside your own layout manager (for example an HBox). This way you have the flexibility to apply a custom layout to the button, allowing you to situate the text and image exactly as you wish.

In the sample solution I add a Pane between the text and the graphic with a hgrow constraint of always, so that the pane will act as an expandable invisible spacer between the the text and the image, pushing them as far apart from each other horizontally as is possible (within the constraints of the overall button size).

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="150.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button contentDisplay="RIGHT" mnemonicParsing="false" prefHeight="98.0" prefWidth="259.0" style="-fx-base: thistle;">
         <graphic>
            <HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mouseTransparent="true">
               <children>
                  <Label text="Nightshade">
                     <font>
                        <Font name="Papyrus" size="24.0" />
                     </font></Label>
                  <Pane HBox.hgrow="ALWAYS" />
                  <ImageView>
                     <image>
                        <Image url="@Potion-icon.png" />
                     </image>
                  </ImageView>
               </children>
            </HBox>
         </graphic>
      </Button>
   </children>
</StackPane>

Change the size of the image inside the javafx interface

An Image in JavaFX is only a container for the image data. You can scale the image at loading time (using another constructor) but this change is permanent (but can be useful to save memory).

When you want to display an Image, you wrap it in an ImageView. This class has methods to scale the image dynamically, depending on where you need it. It won't change the underlying data.

Image can be re-used. You can use the same Image in multiple ImageViews and show it at different sizes without having to have multiple copies of the same image loaded.

Update

image= new Image(gui.getClass().getResourceAsStream("img.gif"));
ImageView iv = new ImageView(image);
iv.setFitWidth(100);  // Change size
imageIMG.setGraphic(iv);

FXML/CSS: Button with image in center and text in bottom

The contentDisplay property controls the position of the graphic relative to the text. The alignment property controls the position of the overall content.

So

<Button text="Text" GridPane.rowIndex="0" GridPane.columnIndex="2" prefWidth="135" prefHeight="110" 
    alignment="BOTTOM_LEFT" contentDisplay="TOP" 
    style="-fx-background-color: rgb(176,30,0); -fx-text-fill: rgb(255,255,255);">

or some similar combination, should work.

If you prefer to set these in CSS, -fx-alignment: bottom-left; -fx-content-display: top ; will do the same.

The contentDisplay property doesn't quite give you full control over the positioning of the graphic; you may need to use the idea you proposed of placing a container with the image view and a label as the graphic. In this case, you probably want an alignment of center. A BorderPane would probably be closer to what you need than a VBox:

<Button GridPane.rowIndex="0" GridPane.columnIndex="2" prefWidth="135" prefHeight="110" style="-fx-background-color: rgb(176,30,0); -fx-text-fill: rgb(255,255,255); -fx-alignment: center;">
    <graphic>
        <BorderPane>
            <center>
                <ImageView>
                    <Image url="file:///....png"/>
                </ImageView>
            </center>
            <bottom>
                <Label text="Text"/>
            </bottom>
        </BorderPane>
    </graphic>
</Button>

You may also need to experiment with setting the preferred size of the border pane, to make it fill the area allocated to the button.

---

Related Topics