ColorPickerView

You can use ColorPickerView just like ImageView and get HSV colors, ARGB values, Hex color codes
from your gallery pictures or custom images 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.1"
}

or Maven

<dependency>
  <groupId>com.github.skydoves</groupId>
  <artifactId>colorpickerview</artifactId>
  <version>2.0.1</version>
</dependency>

Usage

You can use like using just ImageView and you can get color from any images.

Add XML Namespace

First add below 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" // set palette image. Must be needed.
app:selector="@drawable/wheel" // set selector image. optional.
app:alpha_selector="0.8" // set selector's alpha. optional.
app:alpha_flag="0.8" // set flag's alpha. optional.

Color Selected Listener

You can listen to only an int value of a color by using ColorListener.

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

ColorEnvelope Listener

Or you can listen to an instance has HSV color, hex color code, argb by using ColorEnvelopeListener.

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

ColorEnvelope

onColorSelected method receives a ColorEnvelope's instance from ColorPickerView.
ColorEnvelope provides HSV color, hex color code, argb.

colorEnvelope.getColor() // int
colorEnvelope.getHexCode() // String
colorEnvelope.getArgb() // int[4]

AlphaSlideBar(Optional)

You can change the transparency value of a selected color by using AlphaSlideBar.

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" // set palette image. Must be needed.
        app:borderColor_AlphaSlideBar="@android:color/darker_gray" // set border color. optional.
        app:borderSize_AlphaSlideBar="5"/> // set border size. optional.

You can attach to ColorPickerView like below.

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

BrightnessSlideBar(Optional)

You can change the brightness value of a selected color by using BrightnessSlideBar.

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" // set palette image. Must be needed.
        app:borderColor_BrightnessSlider="@android:color/darker_gray" // set border color. optional.
        app:borderSize_BrightnessSlider="5"/> // set border size. optional.

You can attach to ColorPickerView like below.

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

ColorPickerDialog

Can be used just like using AlertDialog and provides colors from any images.
It extends AlertDialog, so you can customizing themes also.

ColorPickerDialog.Builder builder = new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
builder.setTitle("ColorPicker Dialog");
builder.setFlagView(new CustomFlag(this, R.layout.layout_flag));
builder.setPositiveButton(getString(R.string.confirm), new ColorEnvelopeListener() {
    @Override
    public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {
        setLayoutColor(envelope);
    }
});
builder.setNegativeButton(getString(R.string.cancel), new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {
        dialogInterface.dismiss();
    }
});
builder.attachAlphaSlideBar(); // attach AlphaSlideBar
builder.attachBrightnessSlideBar(); // attach BrightnessSlideBar
builder.show(); // show dialog

And you can get a ColorPickerView instance from ColorPickerDialog.Builder.
So you can customize ColorPickerDialog.

ColorPickerView colorPickerView = builder.getColorPickerView();
colorPickerView.setPaletteDrawable(ContextCompat.getDrawable(this, R.drawable.palettebar));

FlagView(Optional)

FlagView lets you can show a flag above a selector. This is optional.
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. 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 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));

Modes

You can set FlagView's showing mode.

colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always flagView
colorPickerView.setFlagMode(FlagMode.LAST); // showing flagView when touch Action_UP

AlphaTileView

AlphaTileView presents layout color as ARGB.
If you want to present ARGB color on general views, it will not be presented accurately.
because it will be mixed with the parent view's background color.
So if you want to show 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