Thursday, June 7, 2012

JavaFX 2: Add Image to Button

This is a tutorial about how to add image to button with JavaFX 2. As you can see from the image below, we will have 3 buttons with images. Two of them will have just only images, but one of  them will have image and text.



Important: Do not forget to add images to /src folder of our project.
 Here are the pictures:  

Here is the code of our example:


13 comments:

  1. Here is my Code, how it goes with fxml,

    http://pastebin.com/embed_js.php?i=2FGzjLpy

    ReplyDelete
  2. I haven't tried do this with CSS, but if you want, you are free to try it. If you succeed to do that, let me know. I could write a blogpost, because that sounds very interesting.

    ReplyDelete
  3. On trying the same code i get this error,how to clear it ?
    Exception in Application start method
    Exception in thread "main" java.lang.RuntimeException: Exception in Application start method
    at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:403)
    at com.sun.javafx.application.LauncherImpl.access$000(LauncherImpl.java:47)
    at com.sun.javafx.application.LauncherImpl$1.run(LauncherImpl.java:115)
    at java.lang.Thread.run(Thread.java:722)
    Caused by: java.lang.NullPointerException: Input stream must not be null
    at javafx.scene.image.Image.validateInputStream(Image.java:997)
    at javafx.scene.image.Image.(Image.java:624)
    at imageToButton.start(imageToButton.java:50)
    at com.sun.javafx.application.LauncherImpl$5.run(LauncherImpl.java:319)
    at com.sun.javafx.application.PlatformImpl$5.run(PlatformImpl.java:206)
    at com.sun.javafx.application.PlatformImpl$4.run(PlatformImpl.java:173)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.access$100(WinApplication.java:29)
    at com.sun.glass.ui.win.WinApplication$3$1.run(WinApplication.java:73)

    ReplyDelete
  4. You have null pointer on 50th line of the code.

    ReplyDelete
  5. yes the place where i add the image to the button, i have the image at the right path but i don't know why do i get such error..

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. I have tried to add an image in this way:
    Image img1 = new Image("file:///C:/Users/prem/IdeaProjects/imageToButton/about.png"); then it works perfect but i get nullpointerexception on using this code: Image img1 = new Image(getClass().getResourceAsStream("about.png")); may i know why ?

    ReplyDelete
  8. in order to allow to work also in Eclipse running under Windows OS you have to put the .png files under the base home path of the project, for example C:\develop.eclipse\imageToButton\about.png where C:\develop.eclipse\imageToButton is the home path of the project, the parent of src/ and /bin

    ReplyDelete
  9. Sorry,... the quickest, simplest and better hint his to place the .png files in the same directory of imageToButton.jar executable ... it was almost obvious ;-) to workaround

    ReplyDelete

  10. For those who have NullPointException try to add a slash before image name

    Image(getClass().getResourceAsStream("/about.png")); if the images are located in src folder .

    ReplyDelete
  11. Here is my code:
    Image locki = new Image(getClass().getResourceAsStream("/lock.png"));
    ImageView lock = new ImageView(locki);

    Button b1 = new Button("1"); b1.setOnAction(e -> select(1));
    Button b2 = new Button(lock); b2.setOnAction(e -> select(1));

    Eclipse underlines my call for the ImageView, and when I compile my project it prints out a list of errors.

    ReplyDelete