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 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 was with creating a custom Color Picker dialog, with custom needs for example. Below are the parameters I set.
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:
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.
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, 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 Color Theory, 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 Butterfly Effect, which will give you many projects ideas.
Now you are free to create your own creative ColorPicker.
Enjoy Programming 😎.