CODEWITHSUNDEEP
netbeansjavafxfxmlscenebuilder
doveywhite
doveywhite

Reputation: 117

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

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

Upvotes: 6

Views: 42190

Answers (4)

Abdul Saleem
Abdul Saleem

Reputation: 10622

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

Upvotes: 16

user8744024
user8744024

Reputation: 

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

Upvotes: -1

infiniteLearner
infiniteLearner

Reputation: 4189

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.

Upvotes: 2

AlmasB
AlmasB

Reputation: 3407

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>

Upvotes: 13

Related Questions