Android App: Use of Grid View to Implement Color Picker

Below is the code (example) explaining the use of Android Color Picker in your Android application. The below example helps you to implement slider to control the transparency or the alpha effect using grid view. Step 1 Define a layout color_picker.xml. This will be the layout of the activity <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:orientation="vertical" > <ImageView android:id="@+id/selected_color" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="10dp" android:layout_marginTop="50dp" android:background="@android:color/black"/> <TextView android:id="@+id/selected_r_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:layout_marginTop="40dp" android:layout_toRightOf="@+id/selected_color"/> <TextView android:id="@+id/selected_g_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/selected_r_value" android:layout_marginLeft="2dp" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/selected_color"/> <TextView android:id="@+id/selected_b_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/selected_g_value" android:layout_marginLeft="2dp" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/selected_color"/> <SeekBar android:id="@+id/color_seeker" android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_marginTop="30dp" android:layout_toRightOf="@+id/selected_r_value" android:max="255" /> <Button android:id="@+id/reset_color" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/selected_b_value" android:layout_centerHorizontal="true" android:text="Show Color" /> <TextView android:id="@+id/instruction" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/selected_b_value" android:layout_marginTop="15dp" android:gravity="center_horizontal" android:text="select a color and use the slider above" /> <GridView android:id="@+id/color_grid" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/instruction" android:horizontalSpacing="5dp" android:numColumns="9" android:stretchMode="columnWidth" android:verticalSpacing="5dp" > </GridView> </RelativeLayout> Step 2 Define the grid component grid_component.xml. We are using image buttons to be used in grid view <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageButton android:id="@+id/color_image" android:layout_width="40dp" android:focusable="false" android:clickable="false" android:layout_height="40dp"/> </LinearLayout> Step 3 Define a class ColorPicker.java. This is bean class , which will contain the RGB and Alpha components for the every color

package com.androd.colorpicker.util; public class ColorPicker { private private private private int int int int red; green; blue; alpha;

public ColorPicker(int red, int green, int blue, int alpha) { super(); this.red = red; this.green = green; this.blue = blue; this.alpha = alpha; } public int getRed() { return red; } public void setRed(int red) { this.red = red; } public int getGreen() { return green; } public void setGreen(int green) { this.green = green; } public int getBlue() { return blue; } public void setBlue(int blue) { this.blue = blue; } public int getAlpha() { return alpha; } public void setAlpha(int alpha) { this.alpha = alpha; } @Override public String toString() {

return "ColorPicker [red=" + red + ", green=" + green + ", blue=" + blue + ", alpha=" + alpha + "]"; } } Step 4 Define ColorPickerActivity.java. Main Activity class for initialization of all the components and display of color picker package com.androd.colorpicker; import java.util.ArrayList; import import import import import import import import import import import import import import import import import android.app.Activity; android.content.Context; android.graphics.Color; android.os.Bundle; android.view.LayoutInflater; android.view.View; android.view.View.OnClickListener; android.view.ViewGroup; android.widget.BaseAdapter; android.widget.Button; android.widget.GridView; android.widget.ImageButton; android.widget.ImageView; android.widget.SeekBar; android.widget.SeekBar.OnSeekBarChangeListener; android.widget.TextView; android.widget.Toast;

import com.androd.colorpicker.util.ColorPicker; public class ColorPickerActivity extends Activity { GridView gridView; ImageView imageView; SeekBar colorSeekBar; TextView redTextView; TextView greenTextView; TextView blueTextView; Button showColor ; private ArrayList<ColorPicker> colorPickerArray; private ColorPicker colorPickerObject; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.color_picker); gridView = (GridView)findViewById(R.id.color_grid); imageView = (ImageView)findViewById(R.id.selected_color);

colorSeekBar = (SeekBar)findViewById(R.id.color_seeker); redTextView = (TextView)findViewById(R.id.selected_r_value); greenTextView = (TextView)findViewById(R.id.selected_g_value) ; blueTextView = (TextView)findViewById(R.id.selected_b_value); showColor = (Button)findViewById(R.id.reset_color); intializeColorArray(); ColorPickerAdapter colorPickerAdapter = new ColorPickerAdapter(colorPickerArray); gridView.setAdapter(colorPickerAdapter); showColor.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if(colorPickerObject != null) { Toast.makeText(getApplicationContext(),colorPickerObject.toString(),Toast.LENGTH_LONG).show() ; } } }); colorSeekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { @Override public void onStopTrackingTouch(SeekBar seekBar) { } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean { int alpha = 254 - progress; int r = colorPickerObject.getRed(); int g = colorPickerObject.getGreen(); int b = colorPickerObject.getBlue(); colorPickerObject.setAlpha(alpha); imageView.setBackgroundColor(Color.argb(alpha, r, g, b)); } });

fromUser)

private class ColorPickerAdapter extends BaseAdapter {

ArrayList<ColorPicker> colorAdapterArray; public ColorPickerAdapter(ArrayList<ColorPicker> colorPickerArray) { super(); this.colorAdapterArray = colorPickerArray; } @Override public int getCount() { return colorAdapterArray.size(); } @Override public Object getItem(int arg0) { return colorAdapterArray.get(arg0); } @Override public long getItemId(int arg0) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { getApplicationContext(); LayoutInflater inflater = (LayoutInflater) getApplicationContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View gridView ; ImageButton imageView = null; if (convertView == null){ gridView = inflater.inflate(R.layout.grid_component,null); imageView = (ImageButton)gridView.findViewById(R.id.color_image); } else { gridView = (View)convertView; } final ColorPicker colorPicker = colorAdapterArray.get(position); int r = colorPicker.getRed(); int g = colorPicker.getGreen(); int b = colorPicker.getBlue(); int alpha = colorPicker.getAlpha(); if(imageView != null){ imageView.setBackgroundColor(Color.argb(alpha, r, g, b)); } else { //do nothing } if(imageView != null)

imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { handleColorClick(colorPicker); }

}); } return gridView; } }

private void intializeColorArray() { colorPickerArray = new ArrayList<ColorPicker>(); // 4 6 7 5 3

8 9 /*1*/ colorPickerArray.add(new ColorPicker(255,0,0,255)); colorPickerArray.add(new ColorPicker(255,170,0,255)); colorPickerArray.add(new ColorPicker(170,255,0,255)); colorPickerArray.add(new ColorPicker(0,255,0,255)); colorPickerArray.add(new ColorPicker(0,255,170,255)); colorPickerArray.add(new ColorPicker(0,170,255,255)); colorPickerArray.add(new ColorPicker(0,0,255,255)); colorPickerArray.add(new ColorPicker(170,0,255,255)); colorPickerArray.add(new ColorPicker(255,0,170,255)); /*2*/ colorPickerArray.add(new ColorPicker(255,36,36,255)); colorPickerArray.add(new ColorPicker(255,182,36,255)); colorPickerArray.add(new ColorPicker(182,255,36,255)); colorPickerArray.add(new ColorPicker(36,255,36,255)); colorPickerArray.add(new ColorPicker(36,255,182,255)); colorPickerArray.add(new ColorPicker(36,182,255,255)); colorPickerArray.add(new ColorPicker(36,36,255,255)); colorPickerArray.add(new ColorPicker(182,36,255,255)); colorPickerArray.add(new ColorPicker(255,36,182,255)); /*3*/ colorPickerArray.add(new ColorPicker(255,73,73,255)); colorPickerArray.add(new ColorPicker(255,194,73,255)); colorPickerArray.add(new ColorPicker(194,255,73,255)); colorPickerArray.add(new ColorPicker(73,255,73,255)); colorPickerArray.add(new ColorPicker(73,255,194,255)); colorPickerArray.add(new ColorPicker(73,194,255,255)); colorPickerArray.add(new ColorPicker(73,73,255,255)); colorPickerArray.add(new ColorPicker(194,73, 255,255));colorPickerArray.add(new ColorPicker(255,73,194,255)); /*4*/ colorPickerArray.add(new ColorPicker(255,109,109,255));colorPickerArray.add(new ColorPicker(255,206,109,255));colorPickerArray.add(new ColorPicker(206,255,109,255));colorPickerArray.add(new ColorPicker(109,255,109,255));colorPickerArray.add(new ColorPicker(109,255,206,255));colorPickerArray.add(new ColorPicker(109,206,255,255));colorPickerArray.add(new ColorPicker(109,109,255,255));colorPickerArray.add(new ColorPicker(206,109,255,255));colorPickerArray.add(new ColorPicker(255,109,206,255));

/*5*/ colorPickerArray.add(new ColorPicker(255,146,146,255));colorPickerArray.add(new ColorPicker(255,219,146,255));colorPickerArray.add(new ColorPicker(219,255,146,255));colorPickerArray.add(new ColorPicker(146,255,146,255));colorPickerArray.add(new ColorPicker(146,255,219,255));colorPickerArray.add(new ColorPicker(146,219,255,255));colorPickerArray.add(new ColorPicker(146,146,255,255));colorPickerArray.add(new ColorPicker(219,146,255,255));colorPickerArray.add(new ColorPicker(255,146,219,255)); /*6*/ colorPickerArray.add(new ColorPicker(255,182,182,255));colorPickerArray.add(new ColorPicker(255,231,182,255));colorPickerArray.add(new ColorPicker(231,255,182,255));colorPickerArray.add(new ColorPicker(182,255,182,255));colorPickerArray.add(new ColorPicker(182,255,231,255));colorPickerArray.add(new ColorPicker(182,231,255,255));colorPickerArray.add(new ColorPicker(182,182,255,255));colorPickerArray.add(new ColorPicker(231,182,255,255));colorPickerArray.add(new ColorPicker(255,182,231,255)); /*7*/ colorPickerArray.add(new ColorPicker(255,219,219,255));colorPickerArray.add(new ColorPicker(255,243,219,255));colorPickerArray.add(new ColorPicker(243,255,219,255));colorPickerArray.add(new ColorPicker(219,255,219,255));colorPickerArray.add(new ColorPicker(219,255,243,255));colorPickerArray.add(new ColorPicker(219,243,255,255));colorPickerArray.add(new ColorPicker(219,219,255,255));colorPickerArray.add(new ColorPicker(243,219,255,255));colorPickerArray.add(new ColorPicker(255,219,243,255)); } handleColorClick(colorPickerArray.get(0));

private void handleColorClick(ColorPicker colorPicker) { colorSeekBar.setProgress(0); this.colorPickerObject = colorPicker; int r = colorPicker.getRed(); int g = colorPicker.getGreen(); int b = colorPicker.getBlue(); int alpha = colorPicker.getAlpha(); imageView.setBackgroundColor(Color.argb(alpha, r, g, b)); setColoronText(r, g, b); } private void setColoronText(int r , int g , int b) { redTextView.setText("R:"+String.valueOf(r)); greenTextView.setText("R:"+String.valueOf(g)); blueTextView.setText("R:"+String.valueOf(b)); }

Run the code to see the output. Screen shots of the application

1 When a color is selected

2.The screen shot of the application showing all the RGB and Alpha components of the color , when show color button is pressed