Beiträge mit dem Tag ‘Color Picker’

Android Color Picker

Dieses Android Tutorial zeigt einen Color Picker, welchen wir für unsere Android App Stadt, Land, Anruf entwickelt haben. Der Source Code kann auch als Eclipse Projekt herunter geladen werden: Android Color Picker.

Im ersten Beispiel haben wir eine vordefinierte Liste mit Farben:

android-color-picker

android-color-picker

Zur Darstellung benutzen wir ein GridView mit sechs Spalten. In den Spalten und Zeilen ist jeweils ein ImageView definiert, dessen Hintergrundfarbe über imageView.setBackgroundColor(colorList.get(position)); gesetzt wird.

Das Layout des GridView ist in res/layout/color_picker.xml definiert.

In der Datei ColorPickerAdapter.java befinden sich die Farben, die zur besseren Lesbarkeit in einem Array abgelegt sind.

// 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]));
	}
}

Im nächsten Schritt wird der Adapter dem GridView zugewiesen:

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

Das zweite Beispiel zeigt einen Rainbow-Color-Picker bei dem die Anzahl der Farben beliebig erweiterbar ist:

android-color-picker-rainbow

android-color-picker-rainbow

Über die folgende Schritte wird der Regenbogen definiert:

// 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));

Tipps zum Layout

Im Augenblick ist unser Layout für hdpi Geräte optimiert. Auf einem ldpi (small screen) sieht unser Color Picker so aus:

android-color-picker-small-device

android-color-picker-small-device

Damit die App auf verschiedenen Geräte das gewünschte Layout hat müssen wir die Spaltenbreite des GridView anpassen. Hierfür legen wir die Datei res\values-small\strings.xml an und setzten mit colorGridColumnWidth die Breite und erhalten danach diese Ansicht:

android-color-picker-small-device-fixed

android-color-picker-small-device-fixed

Download Eclipse Project Android Color Picker