How to add icon near arrow icon for JComboBox

Question

Hi all,

I would like to create JComboBox control similar with the URL textbox of Firefox. Does anyone know how to customize the textfield of the JComboBox. I want to add some icons on the ALIGN.HORIZONTAL_RIGHT near the arrow button of the JComboBox

Thanks, Minh

Answer 1

To change how a component renders, you generally work with what are called Renderers.

For combobox, look at how to create a custom combobox renderer. Just a quick glance, but for your case, a simple configuration of DefaultListCellRenderer may be enough, since you can set the JLabel properties to position the text to the image. If not, just extend from it.

Remember also that you have to set a model that includes the icon so that the combobox renderer can get it - might want to do a custom ComboBoxModel too, depending on your data object.

Answer 2

Hi aberrant80, akf

Thanks for your very detail explanation. Actually i will combine DefaultListCellRenderer and add the icon to the combo box like following code

import java.awt.Dimension;
import java.awt.Insets;
import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;

public class Main extends JFrame {
    public Main() {
        // Create icon "C"
        JButton jb = new JButton("C");
        jb.setMargin(new Insets(0, 0, 0, 0));
        jb.setBounds(245, 2, 18, 18);

        // Create combo box
        String[] languages = new String[]{"Java", "C#", "PHP"};
        JComboBox jc = new JComboBox(languages);
        // jc.setEditable(true);
        jc.add(jb);

        getContentPane().add(jc);

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(new Dimension(300, 58));
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        final Main main = new Main();
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                main.setVisible(true);
            }
        });
    }
}

But when i put jc.setEditable(true); the combo editor hided my icon. I'm thinking another way to simulate Firefox awesome bar. Do you have any idea for this?

Thanks for your help,

Minh