Java combobox how to add icon?

Question

Im new to FXML and i'm building an application. Now i'm running into a problem that i cant fix.

I defined a combobox in the FXML and created the necesarry assocation in the controller class. But i want to add images to this combobox.

Still after hours of searching on google i'm still not able to fix this.

Can you guys please help me with a "simple" example on how to reach my goal?

Many thanks!

My current code is: (sure that there is an easier way to do this, but it works!)

ImageView img1 = new ImageView("Layout/nl.png");
ImageView img2 = new ImageView("Layout/en.png");

AnimalBoxLanguage.getItems().addAll(img1, img2);

AnimalBoxLanguage.setCellFactory(new Callback<ListView<ImageView>, ListCell<ImageView>>() {
    @Override 
    public ListCell<ImageView> call(ListView<ImageView> p) {
        return new ListCell<ImageView>() {
            private final ImageView rectangle;
            { 
                setContentDisplay(ContentDisplay.GRAPHIC_ONLY); 
                rectangle = new ImageView();
            }

            @Override 
            protected void updateItem(ImageView item, boolean empty) {
                super.updateItem(item, empty);

                if (item == null || empty) {
                    setGraphic(null);
                } else {
                    rectangle.setImage(item.getImage());
                    setGraphic(rectangle);
                }
            }
        };
    }
});

@BartPasmansMaybe this is not what you want but it can be a starting point. You can check this [link](https://gist.github.com/3062859) — erhun, Jan 14 '13 at 21:59

score 5 · Answer 1 · answered Jan 17 '13 at 23:21

Taking the sample erhun linked in his comment as a starting point, define the ComboBox in fxml as below so that the combo box items include Labels with graphics (these are your "icons").

<ComboBox fx:id="fruitCombo" layoutX="15.0" layoutY="33.0" prefWidth="90.0" promptText="choose">
  <items>
    <FXCollections fx:factory="observableArrayList">
      <Label text="Apple">
        <graphic> 
          <StackPane prefWidth="50">
            <ImageView fitHeight="32" preserveRatio="true">
              <image>
                <Image url="http://uhallnyu.files.wordpress.com/2011/11/green-apple.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </StackPane>  
        </graphic>  
      </Label>  
      <Label text="Pear">
        <graphic> 
          <StackPane prefWidth="50">
            <ImageView fitHeight="32" preserveRatio="true">
              <image>
                <Image url="http://smoothiejuicerecipes.com/pear.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </StackPane>  
        </graphic>  
      </Label>  
      <Label text="Orange">
        <graphic> 
          <StackPane prefWidth="50">
            <ImageView fitHeight="32" preserveRatio="true">
              <image>
                <Image url="http://i.i.com.com/cnwk.1d/i/tim/2011/03/10/orange_iStock_000001331357X_540x405.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </StackPane>  
        </graphic>  
      </Label>  
    </FXCollections>
  </items>
</ComboBox>

And in the FruitComboController initialize method, set a custom cell for the button (the simple cell below just takes the text of the seleted item, but you could also include a graphic as well if you liked):

ListCell<Label> buttonCell = new ListCell<Label>() {
  @Override protected void updateItem(Label item, boolean isEmpty) {
    super.updateItem(item, isEmpty);
    setText(item == null ? "" : item.getText());        
  }
};
fruitCombo.setButtonCell(buttonCell);

The above is just one way to do this. Alternately (and perhaps preferably) you could define a cell factory for your ComboBox as Sebastian points out in his answer.

Output of the modified sample:

iconcombosample

zhujik · Accepted Answer · 2013-01-15T15:28:42.603

4

You need to customize the CellFactory of the ComboBox to maintain the visualization of the items in the box. See this link for a short example.

To make the image visible in the control area (after you select one item), you have to set the button cell of the combobox to one of your cells. JavaFX will automatically update them accordingly. Basically what you have to do is when you set up the combobox with your custom cellfactory is:

mycombobox.setButtonCell(myCellFactory.call(null));

Also have a look at the documentation regarding this.

edited Jan 15 '13 at 15:28

answered Jan 15 '13 at 08:47

zhujik

6,514
2
36
43

Thanks works like a charm! but when i select the image from the combobox the combox text shows the URL string from the image. How do i make the combobox show the image there as well? – Bart Pasmans Jan 15 '13 at 13:47
@BartPasmans: see my edit in the answer. Also, welcome to Stackoverflow. If your question is answered, please mark the answer and an upvote would be nice, too ;) – zhujik Jan 15 '13 at 15:29
how do i implement the cellfactory in my code: ComboBoxLanguage.setCellFactory(new Callback, ListCell>() { } thanks for your help! – Bart Pasmans Jan 15 '13 at 16:35

score 3 · Answer 3 · answered Nov 13 '14 at 09:21

ObservableList options = FXCollections.observableArrayList();
//
Image img = new Image("/images/auto32.png");
ImageView imgView = new ImageView();
imgView.setImage(img);
//
Label lbl = new Label("test");
lbl.setGraphic(imgView);
// 
options.add(lbl);
options.add(lbl);
options.add(lbl);
//
myCombo.setItems(options);

Java combobox how to add icon?

3 Answers3