Java combobox how to add icon?

Question

Im new to FXML and I am building an application. Now I am facing a problem that I cannot fix.

I defined combobox in FXML and created binding bindings in the controller class. But I want to add images to this combo box.

After hours of searching on google, I still can't fix it.

Can you guys help me with a “simple” example of how to achieve my goal?

Many thanks!

My current code is: (make sure 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); } } }; } }); 

Answer 1

You need to configure CellFactory in a ComboBox to support the rendering of elements in the field. See this link for a quick example.

To make the image visible in the control area (after selecting one item), you must set the button cell of the drop-down list to one of your cells. JavaFX will automatically update them. Basically, what you need to do is when you install a dropdown with your custom cellfactory:

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

Also check out the documentation regarding this.

Answer 2

Taking the erhun sample linked in his comment as a starting point, define the ComboBox in fxml, as shown below, so that the list items include graphics shortcuts (these are your “badges”).

 <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://iicom.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 initialization method, set a custom cell for the button (the simple cell below just takes the text of the done element, but you can also include graphics if you want):

 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. Alternatively (and perhaps preferably) you can define a factory cell for your ComboBox , as Sebastian points out in his answer.

The yield of the modified sample:

Answer 3

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