how to make image buttons on java fxml using scene builder?

Question

I am using netbeans and want to use media file from my desktop to replace the boring button.

So this is my code. I want it so the image becomes the button.

<Button layoutX="252.0" layoutY="177.0" mnemonicParsing="false" prefHeight="57.0" prefWidth="135.0" text="Button!" textFill="BLUE">
     <font>
        <Font name="Avenir Next Regular" size="13.0" />
     </font>
  </Button>

Thanks in advance :)

Fictile

See this: #16340769 – Shackleford

Answer 1

In your fxml file, import the image package:

<?import javafx.scene.image.*?>

then just before the button, assuming image.png is located under "images/" directory and "images/" is located in the same directory as .fxml:

<fx:define>
   <Image fx:id="btnImage" url="images/image.png" />
</fx:define>

Then just add the following to your button definition

<Button layoutX="252.0" layoutY="177.0" mnemonicParsing="false" prefHeight="57.0" prefWidth="135.0" text="Button!" textFill="BLUE">
     <font>
        <Font name="Avenir Next Regular" size="13.0" />
     </font>

     <graphic>
        <ImageView image="$btnImage" />
     </graphic>
  </Button>

Poock

Answer 2

The question asks for how to add using scene builder. Here's how..

Drag imageview from the controls and drop it on top of a button. Note the hierarchy. It should go inside the button. Then you can adjust the size, source and other things within the inspector.

Got this as result within scene builder

Angle

Answer 3

Above answer is partially correct , without specifying the '@' and '$' symbol in url and in "ImageView" like

<Image fx:id="playbutImg" url="@image/image.png">
<ImageView image="$playbutImg" >

@ symbol is used for diffrentiate between string and relative directory , if we pass without the @ symbol it will take as a string rather than the relative directory.

Burgas

Answer 4

    <fx:define>
            <Image fx:id="NewTracker" url="@resources/NewTracker.bmp"/>
        </fx:define>
        <Button layoutX="100.0" layoutY="100.0" mnemonicParsing="false" text="New Tracker" >
                <graphic>
                   <ImageView image="$NewTracker"/>
                </graphic>
        </Button>

Dundalk