105 reads

I Created A Custom Android Color Picker

by Amr HeshamJanuary 20th, 2021

Too Long; Didn't Read

I've spent the last year creating this simple timer app to give the user control over all the UI colors using dynamic UI colors support.

Company Mentioned

featured image - I Created A Custom Android Color Picker

As a Software Engineer who is interested in Android development and compiler design, I've spent the last year creating a simple timer app. I wanted to give the user control over all the UI colors, so I made dynamic UI colors support. So, for example, the user can change background, text, action bar, etc. Then, the colors are in the run time and every user should have his timer with his own theme.I will describe in another article how to support dynamic UI color in the runtime like for example 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 was with creating a custom Color Picker dialog, with custom needs for example. Below are the parameters I set.

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

So in order to create my color picker in this article, we will need to create a simple version that you can improve as needed 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 an 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
B-value for Blue

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 the 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="//schemas.android.com/apk/res/android"
    xmlns:app="//schemas.android.com/apk/res-auto"
    xmlns:tools="//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, and B values. Then we need to set our listener to every SeekBar so when the user changes the SeekBar value, we can get the new values and update our ImageView with the new color.

In the SeekBar Change Listener, our job is easy. We just need to know which value we should update. We can get SeekBar ID from the listener and then we should know which value to update.

After we update the R, G, B values we can now create a color value and 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(seekBarChangeListener);
        seekBarG.setOnSeekBarChangeListener(seekBarChangeListener);
        seekBarB.setOnSeekBarChangeListener(seekBarChangeListener);
    }

    private final SeekBar.OnSeekBarChangeListener seekBarChangeListener = 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);
        }
    };
}

Congratulations, now your simple color picker is working perfectly 👌

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, and font. You can also add animation,
create it as dialog or activity, or even a widget.

By learning the concepts of how to create this simple Color Picker you can use this concept to generate many ideas. With some knowledge of , you can create color package recommendations. For example, if the user just selects one color, you can suggest what colors would go well with this color. With some knowledge of image processing, you can create an image filter - instead of setting the color as an ImageView background, you can use it with the user images to create some filters. This way, you can gain new knowledge with the , which will give you many projects ideas.Now you are free to create your own creative ColorPicker.Enjoy Programming 😎.

L O A D I N G
. . . comments & more!