Fork us on GitHub

TIP: Don't Use ComboBox

ComboBox is uncommon in mobile UI's for good reason, there are better alternatives!
Post Image

TIP: Don't Use ComboBox

We previously discussed the problems with List and somewhat neglected ComboBox which is a subclass of List. ComboBox has the dubious "honor" of deriving most of the problems List has and adding a slew of its own problems such as two separate renderers, different behaviors between OS’s etc.

In addition mobile OS’s don’t really have a ComboBox in their native UI arsenal. E.g. iOS has no native ComboBox support. When web code has a select entry that needs to show a ComboBox Safari shows a UI specific to it and launches a spinner for interaction.

ComboBox was pretty common before iOS and it’s a component we had since 2006 but it’s time to move forward and here are better alternatives that should support every single use case…​


Picker doesn’t look good in the simulator and has its issues but on the device it is mapped to a native device value picker. If you need to pick a Time, Date or String then picker is by far the best alternative out there.

Picker has a time & date option that only works natively on iOS…​

The cool thing about picker is that it uses native UI for time/date which allow things like a clock face on Android when picking the time…​

However, I’m guessing that with the case of replacing the ComboBox you would want a String Picker which works like this:

String[] characters = { "Tyrion Lannister", "Jaime Lannister", "Cersei Lannister", "Daenerys Targaryen",
    "Jon Snow" /* cropped */

Form hi = new Form("Picker");
Picker p = new Picker();
p.addActionListener(e -> ToastBar.showMessage("You picked " + p.getSelectedString(), FontImage.MATERIAL_INFO));


The AutoCompleteTextField is probably the best alternative if you are picking a String we discussed this in some details in the blog post here. But this is only a partial replacement to the combo box.

We can combine an auto complete with a button to produce an editable ComboBox that is just amazing e.g. check out this code:

String[] characters = { "Tyrion Lannister", "Jaime Lannister", "Cersei Lannister", "Daenerys Targaryen",
    "Jon Snow" /* cropped */

Form hi = new Form("Picker");
AutoCompleteTextField act = new AutoCompleteTextField(characters);
act.addActionListener(e -> ToastBar.showMessage("You picked " + act.getText(), FontImage.MATERIAL_INFO));
Button down = new Button();
FontImage.setMaterialIcon(down, FontImage.MATERIAL_KEYBOARD_ARROW_DOWN);
                add(BorderLayout.EAST, down));
down.addActionListener(e -> act.showPopup());;
AutoCompleteTextField as editable combo box
Figure 1. AutoCompleteTextField as editable combo box

This component is one of my favorites as it allows for complex searches and the typical combo box use cases.

Button (or MultiButton etc.) & Popup

The last one seems like "hard work" but when you look at the alternative of building a cell renderer for a ComboBox this is actually really easy and more powerful…​

Instead of using a ComboBox just use a button, you can style it to look like a ComboBox and then show a Dialog as a popup so it will appear next to the Button.

E.g. the code in the demo below has some complexities but they are far simpler than the complexities of building a renderer:

Form hi = new Form("Button", BoxLayout.y());

String[] characters = { "Tyrion Lannister", "Jaime Lannister", "Cersei Lannister"};
String[] actors = { "Peter Dinklage", "Nikolaj Coster-Waldau", "Lena Headey"};
int size = Display.getInstance().convertToPixels(7);
EncodedImage placeholder = EncodedImage.createFromImage(Image.createImage(size, size, 0xffcccccc), true);
Image[] pictures = {
    URLImage.createToStorage(placeholder, "tyrion",""),
    URLImage.createToStorage(placeholder, "jaime",""),
    URLImage.createToStorage(placeholder, "cersei","")

MultiButton b = new MultiButton("Pick A Lanister...");
b.addActionListener(e -> {
    Dialog d = new Dialog();
    for(int iter = 0 ; iter < characters.length ; iter++) {
        MultiButton mb = new MultiButton(characters[iter]);
        mb.addActionListener(ee -> {
Pick a Lanister with the popup open
Figure 2. Pick a Lanister with the popup open
I like Tyrion but this was Lena's season...
Figure 3. I like Tyrion but this was Lena’s season…​
I forgot to set the emblem character in the MultiButton to the down arrow which would have made it look like a combo box


I think every single one of the options above is superior to ComboBox my intuition is telling me that we should deprecate it so people stop using it but we probably won’t remove it as it is still used a lot…​

What are your thoughts on the options listed above? Did I miss a use case for which ComboBox is essential?

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.