java - How to display a color selector when clicking a button?

Question

I'm making a program that draws some shapes and fills them with color. I need to change the 'line' color, and want the user to be able to select the color.

How can I, when clicking a button "Choose Color", have a set of colours appear below the button? Is it possible for the selector to be embedded in the UI below the button (and not pop up in a window)?

I want to display a color selector like in Paint.

Answer 1

You can use the JColorChooser like this:

Color newColor = JColorChooser.showDialog(null, "Choose a color", Color.RED);

• The first argument is the parent java.awt.Component instance. Could also be null.
• The second argument is the title for the dialog.
• The third argument is the color it should select as default.

The dialog returns the selected color if the user presses ok or null if he clicked on cancel.

See this page for more information: http://docs.oracle.com/javase/tutorial/uiswing/components/colorchooser.html.

Edit: include ColorChooser into existing contentpane

The above code shows how to create a pop up with for the JColorChooser, but it is also possible to "include" it into the existing contentpane.

This is the code to initialize both components (JButton and JColorChooser):

button = new JButton("Choose color");
button.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent arg0) {
        toggleColorChooser(); // show and hide the color chooser
    }
});
button.setBounds(10, 11, 150, 23);
contentPane.add(button);

colorChooser = new JColorChooser(Color.BLACK); // default color is black
colorChooser.setBorder(null);
colorChooser.getSelectionModel().addChangeListener(new ChangeListener() {
    public void stateChanged(ChangeEvent e) {
        colorChanged(); // change background color of "button"
    }
});

The button will be added immediately, but the color chooser not yet. It will be added in the toggleColorChooser method:

protected void toggleColorChooser() {
    if (toggled) {
        contentPane.remove(colorChooser);
    } else {
        colorChooser.setBounds(button.getX(), button.getY() + 20, 600, 300);
        colorChooser.setVisible(true);
        contentPane.add(colorChooser);
    }
    toggled = !toggled;
    contentPane.validate();
    contentPane.repaint();
}

The color chooser will be added to the panel beneath the button. You may change the bounds if you have a different layout or if you're using a layout manager.

As you can see, you'll need a variable called toggled. Just add it as class variable:

private boolean toggled = false;

The last method will be called it the user selects a color on the color chooser. It will change the background color of the button:

protected void colorChanged() {
    button.setBackground(colorChooser.getSelectionModel().getSelectedColor());
}