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. Ask.fm 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 Before we start you should know that to create a color we need 3 values: RGB color picker. 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 "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 , , and 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. R G B 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 values we can now create a color value and use this color to update our ImageView background. R, G, B { ImageView colorImageView; redValue = ; greenValue = ; blueValue = ; { .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);
    } SeekBar.OnSeekBarChangeListener seekBarChangeListener = SeekBar.OnSeekBarChangeListener() { { viewId = seekBar.getId(); (viewId) { R.id.seekBarR:
                    redValue = progress; ; R.id.seekBarG:
                    greenValue = progress; ; R.id.seekBarB:
                    blueValue = progress; ;
            } color = Color.rgb(redValue, greenValue, blueValue);
            colorImageView.setBackgroundColor(color);
        }
    };
} public class MainActivity extends AppCompatActivity private private int 0 private int 0 private int 0 @Override protected void onCreate (Bundle savedInstanceState) super private final new @Override public void onProgressChanged (SeekBar seekBar, progress, fromUser) int boolean int switch case break case break case break int 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 with then you do. Color.rgb Color.argb 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. Color Theory Butterfly Effect Now you are free to create your own creative ColorPicker. Enjoy Programming 😎.

Super

2022 - Android Advocate of the Year

2022 - HackerNoon Contributor of the Year - Kotlin

Read My Stories

Hire Me

Portfolio

Nominated for 2022 - Android Advocate of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Kotlin

Software Engineer

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

I Created A Custom Android Color Picker

I Created A Custom Android Color Picker

Too Long; Didn't Read

Company Mentioned

Amr Hesham

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

I Created A Custom Android Color Picker

Too Long; Didn't Read

Company Mentioned

Amr Hesham

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES