Android Color Picker

This Android tutorial shows a color picker which we developed for our Android App City, Country, Caller ID. The source code can be downloaded as Eclipse project: Android Color Picker.

Here we have, in the first example, a predefined list with colors:

We use a GridView with six columns. Within the rows and columns there is an ImageView defined, which background color will be set using imageView.setBackgroundColor(colorList.get(position));.

The layout of the GridView is defined in res/layout/color_picker.xml.

Look for the colors in ColorPickerAdapter.java, which are placed in an array (for better reading).

// for convenience and better reading, we place the colors in a two dimension array
String colors[][] = { { "822111", "AC2B16", "CC3A21", "E66550", "EFA093", "F6C5BE" },
		{ "A46A21", "CF8933", "EAA041", "FFBC6B", "FFD6A2", "FFE6C7" },
		{ "AA8831", "D5AE49", "F2C960", "FCDA83", "FCE8B3", "FEF1D1" },
		{ "076239", "0B804B", "149E60", "44B984", "89D3B2", "B9E4D0" },
		{ "1A764D", "2A9C68", "3DC789", "68DFA9", "A0EAC9", "C6F3DE" },
		{ "1C4587", "285BAC", "3C78D8", "6D9EEB", "A4C2F4", "C9DAF8" },
		{ "41236D", "653E9B", "8E63CE", "B694E8", "D0BCF1", "E4D7F5" },
		{ "83334C", "B65775", "E07798", "F7A7C0", "FBC8D9", "FCDEE8" },
		{ "000000", "434343", "666666", "999999", "CCCCCC", "EFEFEF" } };
 
colorList = new ArrayList();
 
// add the color array to the list
for (int i = 0; i &lt; colors.length; i++) {
	for (int j = 0; j &lt; colors[i].length; j++) {
		colorList.add(Color.parseColor("#" + colors[i][j]));
	}
}

In the next step we will assign the Adapter to the GridView:

GridView gridViewColors = (GridView) findViewById(R.id.gridViewColors);
gridViewColors.setAdapter(new ColorPickerAdapter(getContext()));

The second example shows a Rainbow-Color-Picker where the number of colors is flexible:

Define the rainbow with the following steps::

// FF 00 00 --&gt; FF FF 00
for (red = 255, green = 0, blue = 0; green &lt;= 255; green += step)
    colorList.add(Color.rgb(red, green, blue));
 
// FF FF 00 --&gt; 00 FF 00
for (red = 255, green = 255, blue = 0; red &gt;= 0; red -= step)
    colorList.add(Color.rgb(red, green, blue));
 
// 00 FF 00 --&gt; 00 FF FF
for (red = 0, green = 255, blue = 0; blue &lt;= 255; blue += step)
    colorList.add(Color.rgb(red, green, blue));
 
// 00 FF FF -- &gt; 00 00 FF
for (red = 0, green = 255, blue = 255; green &gt;= 0; green -= step)
    colorList.add(Color.rgb(red, green, blue));
 
// 00 00 FF --&gt; FF 00 FF
for (red = 0, green = 0, blue = 255; red &lt;= 255; red += step)
    colorList.add(Color.rgb(red, green, blue));
 
// FF 00 FF -- &gt; FF 00 00
for (red = 255, green = 0, blue = 255; blue &gt;= 0; blue -= 256 / step)
    colorList.add(Color.rgb(red, green, blue));

Layout tipps

Right now the layout is only optimized for hdpi devices. Looking at a ldpi device (small screen) we get the following screen:

We have to adjust the GridView column width in order to have the desired layout on various screens. Creating the file res\values-small\strings.xml and setting the width with colorGridColumnWidth will solve the problem:

Download Eclipse Project Android Color Picker

This entry was posted on Friday, December 2nd, 2011 at 3:14 am by sascha and is filed under Android, General. You can follow any responses to this entry through the RSS 2.0 feed. This entry is tagged with Android. Both comments and pings are currently closed.

2 Responses to “Android Color Picker”

David Says 31. January 2012 - 7:23 pm Uhr
You do not say how to get back the color selected. How would you pass the color selected back to the activity.
sascha Says 5. February 2012 - 12:38 am Uhr
You might write the selected color to the shared preferences (and read it from your calling activity):
http://developer.android.com/reference/android/content/SharedPreferences.html

A more elegant way is to listen for the event when the color has been changed:
http://stackoverflow.com/questions/5941960/android-how-to-implement-listener

Within ColorPickerDialog define an event which will fire when the color has been picked. The activity, who launched the dialog, will listen for that event:

// in ColorPickerDialog
public interface OnColorPickedListener {
public abstract void colorPicked(int color);
}

OnColorPickedListener colorPickedListener;

public void setOnColorPickedListener(OnColorPickedListener colorPickedListener) {
this.colorPickedListener = colorPickedListener;
}

// this is the click on the grid view
public void onItemClick(AdapterView< ?> parent, View view, int position, long id) {
// get myColor from adapter and notify the listener
if(colorPickedListener!=null)
colorPickedListener.colorPicked(myColor);
}

Industrial Solutions