ColorPickerView

Additional

Language
Java
Version
v2.0.3 (Jan 19, 2019)
Created
Mar 6, 2017
Updated
Jan 19, 2019
Owner
Jaewoong Eum (skydoves)
Contributors
Jaewoong Eum (skydoves)
c4software
iMJ007
3
Activity
Badge
Generate
Download
Source code
APK file

Show card

ColorPickerView

ColorPickerView implements getting HSV colors, ARGB values, Hex color codes from any image drawables or your gallery pictures by tapping on the desired color.


Including in your project

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        jcenter()
    }
}

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:colorpickerview:2.0.3"
}

Usage

Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

ColorPickerView in layout

<com.skydoves.colorpickerview.ColorPickerView
     android:id="@+id/colorPickerView"
     android:layout_width="300dp"
     android:layout_height="300dp"
     app:palette="@drawable/palette"
     app:selector="@drawable/wheel" />

Attribute descriptions

app:palette="@drawable/palette" // sets palette image.
app:selector="@drawable/wheel" // sets selector image.
app:alpha_selector="0.8" // sets selector's alpha.
app:alpha_flag="0.8" // sets flag's alpha.
app:actionMode="last" // sets action mode "always" or "last".

ColorListener Listener

ColorListener is invoked whenever tapped by a user or selecting position manually.

colorPickerView.setColorListener(new ColorListener() {
    @Override
    public void onColorSelected(int color, boolean fromUser) {
        LinearLayout linearLayout = findViewById(R.id.linearLayout);
        linearLayout.setBackgroundColor(color);
    }
});

ColorEnvelope Listener

ColorEnvelopeListener provides hsv color, hex code, argb by ColorEnvelope.

colorPickerView.setColorListener(new ColorEnvelopeListener() {
    @Override
    public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {
        linearLayout.setBackgroundColor(envelope.getColor());
        textView.setText("#" + envelope.getHexCode());
    }
});

ColorEnvelope

ColorEnvelope is a wrapper class of colors for provide various forms of color.

colorEnvelope.getColor() // returns a integer color.
colorEnvelope.getHexCode() // returns a hex code string.
colorEnvelope.getArgb() // returns a argb integer array.

ActionMode

ActionMode controls an action about ColorListener invoking.

colorPickerView.setActionMode(ActionMode.LAST); // the listener will be invoked only when finger released.

Create using builder

This is how to create ColorPickerView's instance using ColorPickerView.Builder class.

ColorPickerView colorPickerView = new ColorPickerView.Builder(context)
      .setColorListener(colorListener)
      .setActionMode(ActionMode.LAST)
      .setAlphaSlideBar(alphaSlideBar)
      .setBrightnessSlideBar(brightnessSlideBar)
      .setFlagView(new CustomFlag(context, R.layout.layout_flag))
      .setPaletteDrawable(ContextCompat.getDrawable(context, R.drawable.palette))
      .setSelectorDrawable(ContextCompat.getDrawable(context, R.drawable.selector))
      .build();

AlphaSlideBar(Optional)

AlphaSlideBar changes the transparency of ColorPickerView's the selected color.


AlphaSlideBar in layout

<com.skydoves.colorpickerview.sliders.AlphaSlideBar
     android:id="@+id/alphaSlideBar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:selector_AlphaSlideBar="@drawable/wheel" // sets the selector's drawable.
     app:borderColor_AlphaSlideBar="@android:color/darker_gray" // sets the border color.
     app:borderSize_AlphaSlideBar="5"/> // sets the border size.

attachAlphaSlider method links the AlphaSlideBar to ColorPickerView.

AlphaSlideBar alphaSlideBar = findViewById(R.id.alphaSlideBar);
colorPickerView.attachAlphaSlider(alphaSlideBar);

BrightnessSlideBar(Optional)

BrightnessSlideBar changes the brightness of ColorPickerView's the selected color.


BrightnessSlideBar in layout

<com.skydoves.colorpickerview.sliders.BrightnessSlideBar
     android:id="@+id/brightnessSlide"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="15dp"
     app:selector_BrightnessSlider="@drawable/wheel" // sets the selector drawable.
     app:borderColor_BrightnessSlider="@android:color/darker_gray" // sets the border color.
     app:borderSize_BrightnessSlider="5"/> // sets the border size.

attachBrightnessSlider method links the BrightnessSlideBar to ColorPickerView.

BrightnessSlideBar brightnessSlideBar = findViewById(R.id.brightnessSlide);
colorPickerView.attachBrightnessSlider(brightnessSlideBar);

ColorPickerDialog


ColorPickerDialog can be used just like using AlertDialog and provides colors from any drawables. ColorPickerDialog extends AlertDialog. So we can customize themes also.


new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK)
      .setTitle("ColorPicker Dialog")
      .setPositiveButton(getString(R.string.confirm),
          new ColorEnvelopeListener() {
              @Override
              public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {
                  setLayoutColor(envelope);
              }
          })
       setNegativeButton(getString(R.string.cancel),
          new DialogInterface.OnClickListener() {
              @Override
              public void onClick(DialogInterface dialogInterface, int i) {
                  dialogInterface.dismiss();
              }
           })
      .attachAlphaSlideBar(true)
      .attachBrightnessSlideBar(true)
      .show();

If you need to customize the ColorpickerView on the dialog, you can get the instance of ColorPickerView from the ColorpickerView.Builder. but it should be done before shows dialog using show() method.

ColorPickerView colorPickerView = builder.getColorPickerView();
colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag)); // sets a custom flagView
builder.show(); // shows the dialog

FlagView(Optional)


FlgaView implements showing a flag above a selector. This is optional. First, create a layout for FlagView 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 a custom class extending FlagView. This is an example code.

public class CustomFlag extends FlagView {

    private TextView textView;
    private AlphaTileView alphaTileView;

    public CustomFlag(Context context, int layout) {
        super(context, layout);
        textView = findViewById(R.id.flag_color_code);
        alphaTileView = findViewById(R.id.flag_color_layout);
    }

    @Override
    public void onRefresh(ColorEnvelope colorEnvelope) {
        textView.setText("#" + colorEnvelope.getHexCode());
        alphaTileView.setPaintColor(colorEnvelope.getColor());
    }
}

The last, set FlagView on the ColorPickerView using setFlagView method.

colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));

FlagMode

FlagMode decides the FlagView's visibility action.

colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always by tapping and dragging.
colorPickerView.setFlagMode(FlagMode.LAST); // showing only when finger released.

AlphaTileView

AlphaTileView visualizes ARGB color on the view. If you want to visualizes ARGB color on the general view, it will not be shown accurately. because it will be mixed with the parent view's background color. so if you want to visualize ARGB color accurately, should use AlphaTileView.


<com.skydoves.colorpickerview.AlphaTileView
     android:id="@+id/alphaTileView"
     android:layout_width="55dp"
     android:layout_height="55dp"
     app:tileSize="20" // the size of the repeating tile
     app:tileEvenColor="@color/tile_even" // the color of even tiles
     app:tileOddColor="@color/tile_odd"/> // the color of odd tiles

ColorPickerView Methods

Methods Return Description
getColor() int gets the last selected color.
getColorEnvelope() ColorEnvelope gets the ColorEnvelope of the last selected color.
setPaletteDrawable(Drawable drawable) void changes palette drawable manually.
setSelectorDrawable(Drawable drawable) void changes selector drawable manually.
setSelectorPoint(int x, int y) void selects the specific coordinate of the palette manually.
selectCenter() void selects the center of the palette manually.
setActionMode(ActionMode) void sets the color listener's trigger action mode.
setFlagView(FlagView flagview) void sets FlagView on ColorPickerView.
attachAlphaSlider void linking an AlphaSlideBar on the ColorPickerView.
attachBrightnessSlider void linking an BrightnessSlideBar on the ColorPickerView.

Other Libraries

Other ColorPicker libraries are released!

ColorPickerPreference

A library that let you implement ColorPickerView, ColorPickerDialog, ColorPickerPreference.

Multi-ColorPickerView

You can get colors using multi selectors. At here you can get a more specialized library on multi-coloring.

License

Copyright 2017 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.