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

Here is a colour selection button class:

• shows current selected color
• opens a JColorChooser dialog when pressed
• fires events when a color is selected

Use it in this way:

ColorChooserButton colorChooser = new ColorChooserButton(Color.WHITE);
colorChooser.addColorChangedListener(new ColorChangedListener() {
    @Override
    public void colorChanged(Color newColor) {
            // do something with newColor ...
    }
});

    import java.awt.Color;
    import java.awt.Graphics2D;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import java.awt.image.BufferedImage;
    import java.util.ArrayList;
    import java.util.List;

    import javax.swing.ImageIcon;
    import javax.swing.JButton;
    import javax.swing.JColorChooser;

    public class ColorChooserButton extends JButton {

        private Color current;

        public ColorChooserButton(Color c) {
            setSelectedColor(c); 
            addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent arg0) {
                    Color newColor = JColorChooser.showDialog(null, "Choose a color", current);
                    setSelectedColor(newColor);
                }
            });
        }

        public Color getSelectedColor() {
            return current;
        }

        public void setSelectedColor(Color newColor) {
            setSelectedColor(newColor, true);
        }

        public void setSelectedColor(Color newColor, boolean notify) {

            if (newColor == null) return;

            current = newColor;
            setIcon(createIcon(current, 16, 16));
            repaint();

            if (notify) {
                // Notify everybody that may be interested.
                for (ColorChangedListener l : listeners) {
                    l.colorChanged(newColor);
                }
            }
        }

        public static interface ColorChangedListener {
            public void colorChanged(Color newColor);
        }

        private List<ColorChangedListener> listeners = new ArrayList<ColorChangedListener>();

        public void addColorChangedListener(ColorChangedListener toAdd) {
            listeners.add(toAdd);
        }

        public static  ImageIcon createIcon(Color main, int width, int height) {
            BufferedImage image = new BufferedImage(width, height, java.awt.image.BufferedImage.TYPE_INT_RGB);
            Graphics2D graphics = image.createGraphics();
            graphics.setColor(main);
            graphics.fillRect(0, 0, width, height);
            graphics.setXORMode(Color.DARK_GRAY);
            graphics.drawRect(0, 0, width-1, height-1);
            image.flush();
            ImageIcon icon = new ImageIcon(image);
            return icon;
        }
    }

Answer 2

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

Answer 3

I improved a Java Swing Color Picker component that looks beautiful and allows enhanced color manipulation:

Simply add the Maven dependency

<dependency>
  <groupId>org.drjekyll</groupId>
  <artifactId>colorpicker</artifactId>
  <version>1.3</version>
</dependency>

to your project. Now you can add the ColorPickerPanel to your user interface.