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 rootbuild.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(newColorListener(){@OverridepublicvoidonColorSelected(intcolor){LinearLayoutlinearLayout = 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(newColorEnvelopeListener(){@OverridepublicvoidonColorSelected(ColorEnvelopeenvelope, booleanfromUser){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() // intcolorEnvelope.getHexCode() // StringcolorEnvelope.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.

finalAlphaSlideBaralphaSlideBar = 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.

finalBrightnessSlideBarbrightnessSlideBar = 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.Builderbuilder = newColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK); builder.setTitle("ColorPicker Dialog"); builder.setFlagView(newCustomFlag(this, R.layout.layout_flag)); builder.setPositiveButton(getString(R.string.confirm), newColorEnvelopeListener(){@OverridepublicvoidonColorSelected(ColorEnvelopeenvelope, booleanfromUser){setLayoutColor(envelope)} }); builder.setNegativeButton(getString(R.string.cancel), newDialogInterface.OnClickListener(){@OverridepublicvoidonClick(DialogInterfacedialogInterface, inti){dialogInterface.dismiss()} }); builder.attachAlphaSlideBar(); // attach AlphaSlideBarbuilder.attachBrightnessSlideBar(); // attach BrightnessSlideBarbuilder.show(); // show dialog

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

ColorPickerViewcolorPickerView = 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"?> <LinearLayoutxmlns: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"> <LinearLayoutandroid:id="@+id/flag_color_layout"android:layout_width="20dp"android:layout_height="20dp"android:layout_marginTop="6dp"android:layout_marginLeft="5dp"android:orientation="vertical"/> <TextViewandroid: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.

publicclassCustomFlagextendsFlagView{privateTextViewtextView; privateAlphaTileViewalphaTileView; publicCustomFlag(Contextcontext, intlayout){super(context, layout); textView = findViewById(R.id.flag_color_code); alphaTileView = findViewById(R.id.flag_color_layout)} @OverridepublicvoidonRefresh(ColorEnvelopecolorEnvelope){textView.setText("#" + colorEnvelope.getHexCode()); alphaTileView.setPaintColor(colorEnvelope.getColor())} }

The last, set FlagView on ColorPickerView or ColorPickerDialog.Builder.

colorPickerView.setFlagView(newCustomFlag(this, R.layout.layout_flag));

ColorPickerDialog.Builderbuilder = newColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK); builder.setFlagView(newCustomFlag(this, R.layout.layout_flag));

Modes

You can set FlagView's showing mode.

colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always flagViewcolorPickerView.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