Build your own Android Color Picker using a few lines of code in the Android Studio. In this blog, we will be sharing the code from an app with color picker functionality.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
The user clicks on a button to open a Dialog. The Dialog has
Here is the User interface of Color Picker Dialog:
Here is complete code for The Color Picker dialog.
Android Color Picker
Creating Layout File
To get a dialog layout as shown above, create a new layout XML file in res/layout named ‘popup_temp_brush.xml’
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView app:cardElevation="5dp"
app:cardCornerRadius="10dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="300dp"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="select color"
android:layout_margin="10dp"
android:textSize="20sp"
android:textStyle="bold"
android:fontFamily="@font/quick_reg"
android:textColor="@color/text_color"/>
<RelativeLayout
android:orientation="vertical"
android:id="@+id/brush_color_linear"
android:layout_marginBottom="10dp"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FFFFFF">
<EditText
android:id="@+id/brush_edit_color"
android:layout_centerInParent="true"
android:background="@drawable/rounded_brn"
android:backgroundTint="@color/colorWhite"
android:padding="10dp"
android:fontFamily="@font/quick_bold"
android:lines="1"
android:layout_width="150dp"
android:text="#FFFFFF"
android:gravity="center"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/brush_edit_color"
android:textColor="@color/colorPrimary"
android:text="color code in box above will be used."
android:textSize="12sp"
android:textAlignment="center"/>
</RelativeLayout>
<SeekBar
android:id="@+id/brush_red_seek"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumbTint="@color/colorRed"
android:layout_gravity="center"
android:layout_margin="10dp"/>
<SeekBar
android:id="@+id/brush_green_seek"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumbTint="@color/colorGreen"
android:layout_gravity="center"
android:layout_margin="10dp"/>
<SeekBar
android:id="@+id/brush_blue_seek"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumbTint="@color/blue"
android:layout_gravity="center"
android:layout_margin="10dp"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/brush_done"
android:background="@drawable/rounded_brn"
android:backgroundTint="@color/colorAccentBlue"
android:layout_margin="10dp"
android:gravity="center"
android:text="done"
android:textSize="20sp"
android:fontFamily="@font/quick_bold"
android:textColor="@color/colorWhite"
android:textAllCaps="false"/>
</LinearLayout>
</androidx.cardview.widget.CardView>Coding the Color Picker
To code the Color picker, we first created a function
Dialog brishDialog = new Dialog(MainActivity.this);
brushDialog.setContentView(R.layout.popup_temp_brush);Next we need 3 SeekBars for red green and blue color (RGB), Button to dismiss dialog and an edittext, where user can also type a custom color code in case they find seekbar a bit complicated or if they know the color code.
All the SeekBars will have a maximum value of 255.
redSeek.setMax(255);
greenSeek.setMax(255);
blueSeek.setMax(255);C
Complete code is shown below:
void callBrushDialog(){
Dialog brishDialog = new Dialog(MainActivity.this);
brushDialog.setContentView(R.layout.popup_temp_brush);
final SeekBar redSeek, greenSeek, blueSeek, brushSizeSeek;
final Button brushDone;
final EditText brushEditText;
final RelativeLayout brushRelative;
mPhotoEditor.setBrushDrawingMode(true);
mPhotoEditor.setBrushSize(brushSize);
mPhotoEditor.setOpacity(100);
redSeek = brushDialog.findViewById(R.id.brush_red_seek);
greenSeek = brushDialog.findViewById(R.id.brush_green_seek);
blueSeek = brushDialog.findViewById(R.id.brush_blue_seek);
brushSizeSeek = brushDialog.findViewById(R.id.brush_seekbar);
brushDone = brushDialog.findViewById(R.id.brush_done);
brushEditText = brushDialog.findViewById(R.id.brush_edit_color);
brushRelative = brushDialog.findViewById(R.id.brush_color_linear);
brushEditText.setText(brushColor);
brushRelative.setBackgroundColor(Color.parseColor(brushColor));
brushSizeSeek.setMax(100);
brushSizeSeek.setProgress(brushSize);
brushSizeSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
brushSize = progress;
mPhotoEditor.setBrushSize(brushSize);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
redSeek.setMax(255);
greenSeek.setMax(255);
blueSeek.setMax(255);
redSeek.setProgress(redValue);
greenSeek.setProgress(greenValue);
blueSeek.setProgress(blueValue);
redSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
redValue = progress;
String hex = String.format("#%02x%02x%02x", redValue, greenValue, blueValue);
brushRelative.setBackgroundColor(Color.parseColor(hex));
brushColor = hex;
brushEditText.setText(brushColor);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
greenSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
greenValue = progress;
String hex = String.format("#%02x%02x%02x", redValue, greenValue, blueValue);
brushRelative.setBackgroundColor(Color.parseColor(hex));
brushColor = hex;
brushEditText.setText(brushColor);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
blueSeek.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
blueValue = progress;
String hex = String.format("#%02x%02x%02x", redValue, greenValue, blueValue);
brushRelative.setBackgroundColor(Color.parseColor(hex));
brushColor = hex;
brushEditText.setText(brushColor);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
brushDone.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(brushEditText.getText().toString().length() < 7){
showToast(TemplateActivity.this,"Invalid Color Input");
} else {
brushDialog.dismiss();
brushColor = brushEditText.getText().toString();
mPhotoEditor.setBrushColor(Color.parseColor(brushColor));
}
}
});
Window window = brushDialog.getWindow();
assert window != null;
WindowManager.LayoutParams wlp = window.getAttributes();
wlp.gravity = Gravity.CENTER;
wlp.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
Objects.requireNonNull(brushDialog.getWindow()).setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
brushDialog.show();
}
1 comment