A library that let you implement ColorPickerView, ColorPickerDialog, ColorPickerPreference.
Could get HSV color, RGB values, Html color code from your gallery pictures or custom images just by touching.
dependencies {
compile 'com.github.skydoves:colorpickerpreference:1.0.4'
}
Could be used just like using ImageView and provides colors from any images.
First add below XML Namespace inside your XML layout file.
xmlns:app="http://schemas.android.com/apk/res-auto"
<com.skydoves.colorpickerpreference.ColorPickerView
android:id="@+id/colorPickerView"
android:layout_width="300dp"
android:layout_height="300dp"
app:palette="@drawable/palette"
app:selector="@drawable/wheel" />
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.
colorPickerView.setColorListener(new ColorListener() {
@Override
public void onColorSelected(ColorEnvelope colorEnvelope) {
LinearLayout linearLayout = findViewById(R.id.linearLayout);
linearLayout.setBackgroundColor(colorEnvelope.getColor());
}
});
onColorSelected method tosses a ColorEnvelope's instance.
ColorEnvelope provides HSV color, html color code, rgb.
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 could get colors saved 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);
Could be used just like using AlertDialog and provides colors from any images.
It extends AlertDialog, so you could customizing themes also.
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.
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");
You can set saved color manually.
colorPickerView.setSavedColor(YOUR_COLOR);
You can clear all of ColorPicker's preference data.
colorPickerView.clearSavedData();
ColorPickerPreference is used in PreferenceScreen and shows ColorPickerDialog if be clicked.
<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"/>
If you want to customizing ColorPickerDialog in ColorPickerPreference, you could get ColorPickerDialog.Builder using getColorPickerDialogBuilder() method.
ColorPickerPreference colorPickerPreference_toolbar = (ColorPickerPreference) findPreference(getActivity().getString(R.string.ToolbarColorPickerPreference));
ColorPickerDialog.Builder builder_toolbar = colorPickerPreference_toolbar.getColorPickerDialogBuilder();
builder_toolbar.setFlagView(new CustomFlag(getActivity(), R.layout.layout_flag));
FlagView lets you could add a flag above a selector.
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.
colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));
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.
colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always flagView
colorPickerView.setFlagMode(FlagMode.LAST); // showing flagView when touch Action_UP
Methods | Return | Description |
---|---|---|
setColorListener(ColorListener colorlistener) | void | sets ColorListener on ColorPickerView |
setPaletteDrawable(Drawable drawable) | void | changes palette drawable resource |
setSelectorDrawable(Drawable drawable) | void | changes selector drawable resource |
setSelectorPoint(int x, int y) | void | selects selector at point(x, y) |
selectCenter() | void | selects center of palette image |
setACTION_UP(Boolean) | void | ColorListener be invoked when ACTION_UP |
setFlagView(FlagView flagview) | void | sets FlagView on ColorPickerView |
setFlagMode(FlagMode flagMode) | void | sets FlagMode on ColorPickerView |
setFlipable(boolean flipable) | void | sets FlagView be flipbed when go out the ColorPickerView |
saveData() | void | save data at local preference. In case of ColorPickerDialog, automatically be invoked when positive button be selected |
setPreferenceName(String name) | void | set ColorPicker's preference name. It lets could save and restore selector's positions and the last color |
setSavedColor(int color) | void | set ColorPicker's saved color manually. |
getColor() | int | returns the last selected color |
getColorHtml() | String | returns the last selected Html color code |
getColorRGB() | int[3] | returns the last selected color's R/G/B int array |
getColorEnvelope() | ColorEnvelope | returns ColorEnvelope. It has the last selected Color, Html, RGB values |
getSelectedPoint() | Point | returns the last selected point |
getSavedColor(int defaultColor) | int | returns the last saved color |
getSavedColorHtml(int defaultColor) | String | returns the last saved Html color code |
getSavedColorRGB(int defaultColor) | int[3] | returns the last saved color R/G/B int array |
clearSavedData() | void | clear all of colorpicker's preference data |
Methods | Return | Description |
---|---|---|
setPreferenceName(String name) | void | set ColorPicker's preference name. It lets could save and restore selector's positions and the last color |
setFlagView(FlagView flagview) | void | sets FlagView on ColorPickerView |
setPositiveButton(CharSequence text, ColorListener colorlistener) | void | sets positive button on ColorPickerDialog |
getColorPickerView() | ColorPickerView | returns ColorPickerDialog's ColorPickerView. it lets could customizing or settings ColorPickerView |
Methods | Return | Description |
---|---|---|
setColorPickerDialogBuilder(ColorPickerDialog.Builder builder) | void | sets ColorPickerDialog.Builder as your own build |
getColorPickerDialogBuilder() | ColorPickerDialog.Builder | returns ColorPickerDialog.Builder |
- Android Weekly #297
- 25 new Android libraries, projects and tools worthy to check in Spring 2018
- Colour Wheel – Part 1
Copyright 2018 skydoves
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.