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 < colors.length; i++) { for (int j = 0; j < 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 --> FF FF 00 for (red = 255, green = 0, blue = 0; green <= 255; green += step) colorList.add(Color.rgb(red, green, blue)); // FF FF 00 --> 00 FF 00 for (red = 255, green = 255, blue = 0; red >= 0; red -= step) colorList.add(Color.rgb(red, green, blue)); // 00 FF 00 --> 00 FF FF for (red = 0, green = 255, blue = 0; blue <= 255; blue += step) colorList.add(Color.rgb(red, green, blue)); // 00 FF FF -- > 00 00 FF for (red = 0, green = 255, blue = 255; green >= 0; green -= step) colorList.add(Color.rgb(red, green, blue)); // 00 00 FF --> FF 00 FF for (red = 0, green = 0, blue = 255; red <= 255; red += step) colorList.add(Color.rgb(red, green, blue)); // FF 00 FF -- > FF 00 00 for (red = 255, green = 0, blue = 255; blue >= 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:
