How to implement Color Picker in android
Hello everyone! — This article is about ‘How to implement Color Picker in android’’ using ColorPickerPreference.
ColorPickerPreference lets you implementing ColorPicker, ColorPickerDioalg and ColorPickerPreference so easily.
In your android project’s build.gradle, add a below dependency.
compile 'com.github.skydoves:colorpickerpreference:1.0.2'ColorPickerView
If you want to implement ColorPicker on your layouts, you can do it easily using by ColorPickerView.
Add a ColorPickerView in your layout.xml
<com.skydoves.colorpickerpreference.ColorPickerView
android:id="@+id/colorPickerView"
android:layout_width="300dp"
android:layout_height="300dp"
app:palette="@drawable/palette"
app:selector="@drawable/wheel" />You can set two attributes what palette and selector drawable image.
app:palette="@drawable/palette" // set palette image
app:selector="@drawable/wheel" // set selector image. This isn't required always. If you don't need, don't use.And just add a ColorListener. that’s it.
colorPickerView.setColorListener(new ColorListener() {
@Override
public void onColorSelected(ColorEnvelope colorEnvelope) {
LinearLayout linearLayout = findViewById(R.id.linearLayout);
linearLayout.setBackgroundColor(colorEnvelope.getColor());
}
});The ColorListener is invoked when selector is moved by users.
And it gives us an instance of ColorEnvelope. we can get HSV color, html color code, rgb from the ColorEnvelope.
colorEnvelope.getColor() // int
colorEnvelope.getHtmlCode() // String
colorEnvelope.getRgb() // int[3]If you want to save selector’s position and get selected color in the past, you should set ColorPicker’s Preference name using setPreferenceName method.
colorPickerView.setPreferenceName("MyColorPickerView");And you should save data when you want.
Then selector’s position will be restored when ColorPickerView is created.
@Override
protected void onDestroy() {
super.onDestroy();
colorPickerView.saveData();
}And you can get also saved colors in the last using below methods. Below methods need default color(if was not saved any colors it will returns default color) as an argument.
int color = colorPickerView.getSavedColor(Color.WHITE);
String htmlColor = colorPickerView.getSavedColorHtml(Color.WHITE);
int[] colorRGB = colorPickerView.getSavedColorRGB(Color.WHITE);ColorPickerDialog
If you want to implement ColorPicker on Dialog, use ColorPickerDialog.
ColorPickerDialo extends AlertDialog, so you could customizing themes on your taste like below.
ColorPickerDialog.Builder builder = new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
builder.setTitle("ColorPicker Dialog");
builder.setPreferenceName("MyColorPickerDialog");
builder.setFlagView(new CustomFlag(this, R.layout.layout_flag));
builder.setPositiveButton(getString(R.string.confirm), new ColorListener() {
@Override
public void onColorSelected(ColorEnvelope colorEnvelope) {
TextView textView = findViewById(R.id.textView);
textView.setText("#" + colorEnvelope.getHtmlCode());
LinearLayout linearLayout = findViewById(R.id.linearLayout);
linearLayout.setBackgroundColor(colorEnvelope.getColor());
}
});
builder.setNegativeButton(getString(R.string.cancel), new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
dialogInterface.dismiss();
}
});
builder.show();If you want to save selector’s position and get selected color in the past, you should set ColorPicker’s Preference name using setPreferenceName method. But In case of ColorPickerDialog, saveData() method will be invoked automatically when PositiveButton be selected. Then selector’s position will be restored when be created ColorPickerDialog. so just setting setPreferenceName is done.
ColorPickerView colorPickerView = builder.getColorPickerView();
colorPickerView.setPreferenceName("MyColorPickerDialog");ColorPickerPreference
If you want to implement ColorPicker on your PreferenceScreen, ColorPickerPreference makes it easy.
Using example is following :
<com.skydoves.colorpickerpreference.ColorPickerPreference
android:key="@string/ToolbarColorPickerPreference"
android:title="Toolbar Color"
android:summary="changes toolbar color"
app:preference_dialog_title="Toolbar ColorPickerDialog"
app:preference_dialog_positive="@string/confirm"
app:preference_dialog_negative="@string/cancel"
app:preference_palette="@drawable/palette"
app:preference_selector="@drawable/wheel"
app:default_color="@color/colorPrimary"/>You can set five attributes for customizing your dialogs.
// sets title of Dialog
app:preference_dialog_title="Toolbar ColorPickerDialog"// sets positive button's text
app:preference_dialog_positive="@string/confirm"// sets negative button's text
app:preference_dialog_negative="@string/cancel"// sets ColorPicker palette's drawable
app:preference_palette="@drawable/palette"// sets ColorPicker selector's drawable
app:preference_selector="@drawable/wheel"// sets default preference color value
app:default_color="@color/colorPrimary"
FlagView
FlagView lets you could add a flag above a selector. But if you don’t want to this, skip this section.
First, create Flag layout as your taste like below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="100dp"
android:layout_height="40dp"
android:background="@drawable/flag"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/flag_color_layout"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="6dp"
android:layout_marginLeft="5dp"
android:orientation="vertical"/>
<TextView
android:id="@+id/flag_color_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:textSize="14dp"
android:textColor="@android:color/white"
android:maxLines="1"
android:ellipsize="end"
android:textAppearance="?android:attr/textAppearanceSmall"
tools:text="#ffffff"/>
</LinearLayout>Second, create CustomFlagView extending FlagView.
public class CustomFlag extends FlagView {
private TextView textView;
private View view;
public CustomFlag(Context context, int layout) {
super(context, layout);
textView = findViewById(R.id.flag_color_code);
view = findViewById(R.id.flag_color_layout);
}
@Override
public void onRefresh(int color) {
textView.setText("#" + String.format("%06X", (0xFFFFFF & color)));
view.setBackgroundColor(color);
}
}And the last set FlagView on ColorPickerView or ColorPickerDialog.Builder.
// for ColorPickerView
colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));// for ColorPickerDialog
ColorPickerDialog.Builder builder = new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
builder.setFlagView(new CustomFlag(this, R.layout.layout_flag));
You could set FlagView’s showing mode also.
colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always flagView
colorPickerView.setFlagMode(FlagMode.LAST); // showing flagView when touch Action_UPYou can see what the difference of modes. ‘Toolbar Color’ Preference’s mode is Always. And ‘Background Color’ Preference’s mode is Action_UP.
And you can show more information below link.
Thank you for reading!
