ColorPickerView

Additional

Language
Java
Version
v2.0.1 (Sep 26, 2018)
Created
Mar 6, 2017
Updated
Sep 26, 2018
Owner
Jaewoong Eum (skydoves)
Contributors
Jaewoong Eum (skydoves)
c4software
2
Activity
Badge
Generate
Download
Source code
APK file

Promotion

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

ColorPickerView Methods

Methods Return Description
getColor() int the last selected color
getColorEnvelope() ColorEnvelope returns ColorEnvelope. It has the last selected Color, Hex, ARGB values
setPaletteDrawable(Drawable drawable) void change palette drawable resource
setSelectorDrawable(Drawable drawable) void change selector drawable resource
setSelectorPoint(int x, int y) void moving selector at point(x, y)
selectCenter() void select center of drawable image
setACTION_UP(Boolean) void ColorListener only listening 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
attachAlphaSlider void attach an AlphaSlider
attachBrightnessSlider void attach a BrightnessSlider

Other Libraries

Other libraries released related to color picker!

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 in 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.