Color Picker Dialog With Seekbar

This color picker dialog has sliders (SeekBars) and  EditTexts for red, green, blue and alpha values. It has a live preview of the color. It returns int values for R, G, B, A for easy use with Color.argb().

Make an .xml file main.xml and put the code below.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <ImageView
android:id="@+id/color"
android:layout_width="fill_parent"
android:layout_height="60dip" />
    <Button 
    android:id="@+id/select"
    android:text="Select Color" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" />
</LinearLayout>


Now make an another .xml file named color_layout.xml and put the code below.



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:id="@+id/main"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:minWidth="300dp">
    
    
<TextView
android:id="@+id/red_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="red" />
<LinearLayout
android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:gravity="center_vertical|left">
<SeekBar 
  android:id="@+id/red_bar"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:max="255"
  android:layout_weight="1"
  android:paddingLeft="7dp"
  android:paddingRight="7dp" />
<EditText
android:id="@+id/red_text"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:lines="1"
android:gravity="center_vertical|right"
android:maxLength="3"
android:inputType="number"
android:text="0"  />
</LinearLayout>


<TextView
android:id="@+id/green_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="green" />
<LinearLayout
android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:gravity="center_vertical|left">
<SeekBar 
  android:id="@+id/green_bar"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:max="255"
  android:layout_weight="1"
  android:paddingLeft="7dp"
  android:paddingRight="7dp" />
<EditText
android:id="@+id/green_text"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:lines="1"
android:gravity="center_vertical|right"
android:maxLength="3"
android:inputType="number"
android:text="0"  />
</LinearLayout>


<TextView
android:id="@+id/blue_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="blue" />
<LinearLayout
android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:gravity="center_vertical|left">
<SeekBar 
  android:id="@+id/blue_bar"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:max="255"
  android:layout_weight="1"
  android:paddingLeft="7dp"
  android:paddingRight="7dp" />
<EditText
android:id="@+id/blue_text"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:lines="1"
android:gravity="center_vertical|right"
android:maxLength="3"
android:inputType="number"
android:text="0"  />
</LinearLayout>


<TextView
android:id="@+id/alpha_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="alpha" />
<LinearLayout
android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:gravity="center_vertical|left">
<SeekBar 
  android:id="@+id/alpha_bar"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:max="255"
  android:progress="255"
  android:layout_weight="1"
  android:paddingLeft="7dp"
  android:paddingRight="7dp" />
<EditText
android:id="@+id/alpha_text"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:lines="1"
android:gravity="center_vertical|right"
android:maxLength="3"
android:inputType="number" 
android:text="255" 
/>
</LinearLayout>


<ImageView
android:id="@+id/color_preview"
android:layout_width="fill_parent"
android:layout_height="40dip" />

<LinearLayout
android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:orientation="horizontal"
    android:gravity="center_vertical|center_horizontal"
    android:layout_marginTop="20dp">
<Button 
  android:id="@+id/ok"
  android:layout_width="100dp"
  android:layout_height="wrap_content"
  android:text="OK" />
  <Button 
  android:id="@+id/cancel"
  android:layout_width="100dp"
  android:layout_height="wrap_content"
  android:text="Cancel" />

</LinearLayout>

</LinearLayout>




First of all make a java file named ColorPickerDialog and insert the following code into it.


public class ColorPickerDialog extends Dialog implements SeekBar.OnSeekBarChangeListener, TextWatcher, OnClickListener {
SeekBar   redBar;
EditText  redText;
SeekBar   greenBar;
EditText  greenText;
SeekBar   blueBar;
EditText  blueText;
SeekBar   alphaBar;
EditText  alphaText;
ImageView colorPreview;
Button    ok;
Button    cancel;
String    color;

    public interface OnColorChangedListener {
        void colorChanged(int a, int r, int g, int b);
    }


    private OnColorChangedListener mListener;




    public ColorPickerDialog(Context context, OnColorChangedListener listener, String color) {
        super(context);
        mListener = listener;
        this.color = color;
    }


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.color_layout);
        setTitle("Color Picker");
        
        redBar    = (SeekBar)  findViewById(R.id.red_bar);
redText   = (EditText) findViewById(R.id.red_text);
greenBar  = (SeekBar)  findViewById(R.id.green_bar);
greenText = (EditText) findViewById(R.id.green_text);
blueBar   = (SeekBar)  findViewById(R.id.blue_bar);
blueText  = (EditText) findViewById(R.id.blue_text);
alphaBar  = (SeekBar)  findViewById(R.id.alpha_bar);
alphaText = (EditText) findViewById(R.id.alpha_text);
ok         = (Button)   findViewById(R.id.ok);
cancel     = (Button)   findViewById(R.id.cancel);

colorPreview = (ImageView) findViewById(R.id.color_preview);

//set initial colors
String[] colorVal = color.split(",");
int a = Integer.parseInt(colorVal[0]);
int r = Integer.parseInt(colorVal[1]);
int g = Integer.parseInt(colorVal[2]);
int b = Integer.parseInt(colorVal[3]);

colorPreview.setBackgroundColor(Color.argb(a, r, g, b));
redBar.setProgress(r);
greenBar.setProgress(g);
blueBar.setProgress(b);
alphaBar.setProgress(a);

redText.setText(colorVal[1]);
greenText.setText(colorVal[2]);
blueText.setText(colorVal[3]);
alphaText.setText(colorVal[0]);

redBar.setOnSeekBarChangeListener(this);
greenBar.setOnSeekBarChangeListener(this);
blueBar.setOnSeekBarChangeListener(this);
alphaBar.setOnSeekBarChangeListener(this);

redText.addTextChangedListener(this);
greenText.addTextChangedListener(this);
blueText.addTextChangedListener(this);
alphaText.addTextChangedListener(this);


ok.setOnClickListener(this);
cancel.setOnClickListener(this);

setCancelable(false);




    }


    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
if(fromUser){
switch (seekBar.getId()) {
        case R.id.red_bar:  
        redText.setText(Integer.toString(progress));
        break;
        case R.id.green_bar:  
        greenText.setText(Integer.toString(progress));
        break;
        case R.id.blue_bar:  
        blueText.setText(Integer.toString(progress));
        break;
        case R.id.alpha_bar:  
        alphaText.setText(Integer.toString(progress));
        break;
       }
}

colorPreview.setBackgroundColor(Color.argb(alphaBar.getProgress(), redBar.getProgress(), greenBar.getProgress(), blueBar.getProgress()));


}


public void onStartTrackingTouch(SeekBar seekBar) {
}


public void onStopTrackingTouch(SeekBar seekBar) {
}


public void afterTextChanged(Editable arg0) {
if(Integer.parseInt(redText.getText().toString()) > 255)
redText.setText("255");

if(!redText.getText().toString().equals("")){
if(Integer.parseInt(redText.getText().toString()) > 255)
redText.setText("255");
redBar.setProgress(Integer.parseInt(redText.getText().toString()));
} else 
redBar.setProgress(0);


if(!greenText.getText().toString().equals("")){
if(Integer.parseInt(greenText.getText().toString()) > 255)
greenText.setText("255");
greenBar.setProgress(Integer.parseInt(greenText.getText().toString()));
} else 
greenBar.setProgress(0);


if(!blueText.getText().toString().equals("")){
if(Integer.parseInt(blueText.getText().toString()) > 255)
blueText.setText("255");
blueBar.setProgress(Integer.parseInt(blueText.getText().toString()));
}else 
blueBar.setProgress(0);


if(!alphaText.getText().toString().equals("")){
if(Integer.parseInt(alphaText.getText().toString()) > 255)
alphaText.setText("255");
alphaBar.setProgress(Integer.parseInt(alphaText.getText().toString()));
}else 
alphaBar.setProgress(0);


}


public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
}


public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
}



public void onClick(View v) {
switch (v.getId()) {
        case R.id.ok:  
        mListener.colorChanged(alphaBar.getProgress(), redBar.getProgress(), greenBar.getProgress(), blueBar.getProgress());
        dismiss();
        break;
        case R.id.cancel:  
        dismiss();
        break;
}

}
}


Now make a main java File named MyActivity with implementing the ColorPickerDialog.OnColorChangedListener. And put the code in it.



public class MyActivity extends Activity implements ColorPickerDialog.OnColorChangedListener {




String color = "255,255,000,000"; //alpha, red, green, blue
    
ImageView image;


    
public void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        image = (ImageView) findViewById(R.id.color);
        String[] colorVal = color.split(",");
        image.setBackgroundColor(Color.argb(Integer.parseInt(colorVal[0]),Integer.parseInt(colorVal[1]),Integer.parseInt(colorVal[2]),Integer.parseInt(colorVal[3])));
        
        Button btn = (Button) findViewById(R.id.select);
        btn.setOnClickListener(new View.OnClickListener() {
            
            public void onClick(View v) {
                new ColorPickerDialog(MyActivity.this, MyActivity.this, color).show();
            }
        });


    }


    public void colorChanged(int a, int r, int g, int b) {
    color = a + "," + r + "," + g + "," + b;
        image.setBackgroundColor(Color.argb(a,r,g,b));


    }


}