6

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

1

4 Answers 4

16

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

Screenshot

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.

I got this as result

Got this as result within scene builder

0
13

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>
0
2

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.

-1
    <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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.