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 :)

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>

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