Android create a custom Color Picker

Hi, I am Amr Hesham and I am a software engineer who interested in android development and compiler design, In the last year, I created a simple timer app but I want to make the user control all the UI color, so I can make a dynamic UI colors support, so, for example, the user can change background, text, action bar …etc colors in the runtime and every user should have his timer with own theme.

I will describe in another article how to support dynamic UI color in the runtime like for example Ask.fm let the user choose between a number of themes, or like my app to let the user customize every view.
One of the problems I faced is to make a custom Color Picker dialog with a custom needs for example.

• The dialog background color should be dynamic depending on the current user choose.
• The dialog buttons or views should be changed in the run time depend on the current user choose.
• The dialog should start with the current user values as default value.
• Later I can easily support some features like saturation, alpha, lightness …etc.
• Later I can easily support many picker types.

So I decided to create my color picker and in this article, we will create a simple one and you can improve it as you need for your project.
We will create it on Activity and you can use it in activity or create it as a dialog.

We will create RGB color picker, before we start you should know that to create a color we need 3 values R value for Red, G value for Green and B value for Blue and each one is between 0 to 255 so we can represent each color value as a byte or integer.
In the xml file we need the following views

• ImageView to show current color.
• 3 SeekBars one for every value (R, G, B).

So our activity XML will be like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/colorImageView"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
    <SeekBar
        android:id="@+id/seekBarR"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255" />
    <SeekBar
        android:id="@+id/seekBarG"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255" />
    <SeekBar
        android:id="@+id/seekBarB"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255" />
</LinearLayout>

In our Activity, we will initialize our 4 views and 3 integers or bytes for r, g, b values, then we need to set our listener to every SeekBar so when user change the SeekBar value we can get the new values
and update our ImageView with the new color.

In our SeekBar Change Listener, our job is easy we just need to know this event is for which seekSeekBarbar to know which value we should update
we can get SeekBar id from the listener then we can know which value we should update.

After we update the R, G, B values we can now create a color value then use this color to update our ImageView background.

public class MainActivity extends AppCompatActivity {

    private ImageView colorImageView;
    private int redValue = 0;
    private int greenValue = 0;
    private int blueValue = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        colorImageView = findViewById(R.id.colorImageView);
        SeekBar seekBarR = findViewById(R.id.seekBarR);
        SeekBar seekBarG = findViewById(R.id.seekBarG);
        SeekBar seekBarB = findViewById(R.id.seekBarB);
           seekBarR.setOnSeekBarChangeListener(mChangeListener);
        seekBarG.setOnSeekBarChangeListener(mChangeListener);
        seekBarB.setOnSeekBarChangeListener(mChangeListener);
    }
    private final SeekBar.OnSeekBarChangeListener mChangeListener = 
                          new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar,
                                      int progress,
                                      boolean fromUser) {
            int viewId = seekBar.getId();
            switch (viewId) {
                case R.id.seekBarR:
                    redValue = progress;
                    break;
                case R.id.seekBarG:
                    greenValue = progress;
                    break;
                case R.id.seekBarB:
                    blueValue = progress;
                    break;
            }
            int color = Color.rgb(redValue, greenValue, blueValue);
            colorImageView.setBackgroundColor(color);
        }
    };
}

Now you can use the same concept to create many different color pickers, for example, you can easily add one more SeekBar and support create color with alpha, all you need is one more variable and SeekBar then in the listener you will replace Color.rgb with Color.argb then you do.

Now with our Color Picker, we are free to change everything easily like colors, the number of attributes, font, you can also add animation, create it as dialog or activity or even widget.

By learning the concepts of how to create this simple Color Picker you can use this concept to generate many and many ideas for example with some knowledge of Color Theory you can create a color package recommendations so the user just select one color and you can suggest what colors will be good with this color, you can also with some knowledge of Image Processing to create an image filter so instead of set the color as ImageView background you will use it with user image to create some filters, so as you can see it like Butterfly Effect small new knowledge will give you many projects ideas.

Now you are free to create your own creative ColorPicker.

Enjoy Programming 😎.