Skip to content

ColorPicker Examples and Libraries

In this tutorial we will look at some of the best Android ColorPicker libraries and how to use them. We show their usage with simple step by step examples.

jaredrummler/ColorPicker

Yet another open source color picker for Android.

So, why should you use this color picker? It is highly customizable and easy to use. You can simply add the ColorPreference to your preferences and a beautiful color picker dialog will be displayed without additional code. The color picker supports alpha and allows you to set your own presets.

Here is the demo:

Step 1: Install it

Download the latest AAR or grab via Gradle:

implementation 'com.jaredrummler:colorpicker:1.1.0'

Step 2: Use it

Add the ColorPreference to your preference XML:

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

  <PreferenceCategory>

    <com.jaredrummler.android.colorpicker.ColorPreference
        android:defaultValue="@color/color_default"
        android:key="default_color"
        android:summary="@string/color_default_summary"
        android:title="@string/color_default_title"/>

    ...

  </PreferenceCategory>

</PreferenceScreen>

Note: Using AndroidX's PreferenceFragmentCompat? Then use com.jaredrummler.android.colorpicker.ColorPreferenceCompat

You can add attributes to customize the ColorPreference:

name type documentation
cpv_dialogType enum "custom" to show the color picker, "preset" to show pre-defined colors
cpv_showAlphaSlider boolean Show a slider for changing the alpha of a color (adding transparency)
cpv_colorShape enum "square" or "circle" for the shape of the color preview
cpv_colorPresets reference An int-array of pre-defined colors to show in the dialog
cpv_dialogTitle reference The string resource id for the dialog title. By default the title is "Select a Color"
cpv_showColorShades boolean true to show different shades of the selected color
cpv_allowPresets boolean true to add a button to toggle to the custom color picker
cpv_allowCustom boolean true to add a button to toggle to the presets color picker
cpv_showDialog boolean true to let the ColorPreference handle showing the dialog

You can also show a ColorPickerDialog without using the ColorPreference:

ColorPickerDialog.newBuilder().setColor(color).show(activity);

All the attributes above can also be applied to the ColorPickerDialog. The activity that shows the dialog must implement ColorPickerDialogListener to get a callback when a color is selected.

Reference

Read more here.

mejdi14/AndroidColorPicker

An AndroidColorPicker Library.

Here is the demo screenshot:

Step 1: Installation

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Then declare the dependency:

Add this to your module's build.gradle file (make sure the version matches the JitPack badge above):

dependencies {
    ...
    implementation 'com.github.mejdi14:AndroidColorPicker:1.0.2'
}

Step 2: Use it

Use it with Kotlin as shown below:

    MHColorsDialog(this)
                .setColorListener { color, colorHex ->
                    // color and colorHex are the chosen color
                }
                .show()

Here is how you use it with Java: 

  MHColorsDialog mhColorsDialog=new MHColorsDialog(MainActivity.this);
                mhColorsDialog.setColorListener(new ColorListener() {
                    @Override
                    public void onColorSelected(int color, @NotNull String colorHex) {
                          // color and colorHex are the chosen color
                    }
                });
                mhColorsDialog.show();

ColorPicker Dark Mode

Dark Mode

sample

 .withDarkMode()

Add new colors

 .addColors(colorsList,ColorsPosition.START)

where colorsList is anArrayList<Int> (every Int represent a color). ColorsPosition is where your colors should be in the final list of colors (Start or End)

Use your own colors as shown below:

 .withMyOwnColors(colorsList)
where colorsList is an ArrayList<Int> (every Int represent a color) this will make the library ignore the default colors and use only your colors from colorsList

Reference

Read more here.

vadiole/colorpicker

A beautiful colorpicker library for Android.

screenshot 1

screenshot 2

Here are its main features:

  • Simple dialog builder
  • ARGB, RGB & HSV color models
  • Dark theme support
  • Sliders with gradient background
  • Switch color models in runtime

Step 1: Install it:

dependencies {
    implementation 'io.github.vadiole:colorpicker:1.0.2'
}

Step 2: Pick Colors

Pick colors as shown below:

//  create dialog
val colorPicker: ColorPickerDialog = ColorPickerDialog.Builder()

                //  set initial (default) color
                .setInitialColor(currentColor)

                //  set Color Model. ARGB, RGB or HSV
                .setColorModel(ColorModel.HSV)

                //  set is user be able to switch color model
                .setColorModelSwitchEnabled(true)

                //  set your localized string resource for OK button
                .setButtonOkText(android.R.string.ok)

                //  set your localized string resource for Cancel button
                .setButtonCancelText(android.R.string.cancel)

                //  callback for picked color (required)
                .onColorSelected { color: Int ->
                    //  use color
                }

                //  create dialog
                .create()


//  show dialog from Activity
colorPicker.show(supportFragmentManager, "color_picker") 

//  show dialog from Fragment
colorPicker.show(childFragmentManager, "color_picker")

Reference

Read more here

Dhaval2404/ColorPicker

Yet another Color Picker Library for Android.

It is highly customizable and easy to use. Pick the color from wheel or select Material Colors from dialog. The original ColorPickerView was written by Hong Duan.

Here are its main features:

  • Color Picker View
  • Color Picker Dialog with Recent Color Option
  • Material Color Picker Alert Dialog
  • Material Color Picker BottomSheet Dialog

Here is a demo:

Step 1: Install it

  1. Gradle dependency:

    allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

    implementation 'com.github.Dhaval2404:ColorPicker:2.3'

Step 2: Build and Show:

The ColorPicker configuration is created using the builder pattern.

    // Kotlin Code
    ColorPickerDialog
        .Builder(this)                      // Pass Activity Instance
        .setTitle("Pick Theme")             // Default "Choose Color"
        .setColorShape(ColorShape.SQAURE)   // Default ColorShape.CIRCLE
        .setDefaultColor(mDefaultColor)     // Pass Default Color
        .setColorListener { color, colorHex ->
            // Handle Color Selection
        }
        .show()

Java:

    // Java Code
    new ColorPickerDialog
        .Builder(this)
        .setTitle("Pick Theme")
        .setColorShape(ColorShape.SQAURE)
        .setDefaultColor(mDefaultColor)
        .setColorListener(new ColorListener() {
            @Override
            public void onColorSelected(int color, @NotNull String colorHex) {
                // Handle Color Selection
            }
        })
        .show();
````


The **MaterialColorPicker** configuration is created using the builder pattern.

```kotlin
    // Kotlin Code
    MaterialColorPickerDialog
        .Builder(this)                          // Pass Activity Instance
        .setTitle("Pick Theme")                 // Default "Choose Color"
        .setColorShape(ColorShape.SQAURE)       // Default ColorShape.CIRCLE
        .setColorSwatch(ColorSwatch._300)       // Default ColorSwatch._500
        .setDefaultColor(mDefaultColor)         // Pass Default Color
        .setColorListener { color, colorHex ->
            // Handle Color Selection
        }
        .show()

Java:

    // Java Code
    new MaterialColorPickerDialog
        .Builder(this)
        .setTitle("Pick Theme")
        .setColorShape(ColorShape.SQAURE)
        .setColorSwatch(ColorSwatch._300)
        .setDefaultColor(mDefaultColor)
        .setColorListener(new ColorListener() {
            @Override
            public void onColorSelected(int color, @NotNull String colorHex) {
                // Handle Color Selection
            }
        })
        .show();

Reference

Read more here

QuadFlask/colorpicker

Simple android color picker with color wheel and lightness bar.

Here are demo screenshots:

screenshot3.png

screenshot.png

Step 1: Add as a Dependency

This library is not released in Maven Central, but instead you can use JitPack

add remote maven url in allprojects.repositories

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

then add a library dependency

dependencies {
    implementation 'com.github.QuadFlask:colorpicker:0.0.15'
}

or, you can manually download aar and put into your project's libs directory.

and add dependency

dependencies {
    compile(name:'[arrFileName]', ext:'aar')
}

Step 2: Use:

As a dialog

ColorPickerDialogBuilder
    .with(context)
    .setTitle("Choose color")
    .initialColor(currentBackgroundColor)
    .wheelType(ColorPickerView.WHEEL_TYPE.FLOWER)
    .density(12)
    .setOnColorSelectedListener(new OnColorSelectedListener() {
        @Override
        public void onColorSelected(int selectedColor) {
            toast("onColorSelected: 0x" + Integer.toHexString(selectedColor));
        }
    })
    .setPositiveButton("ok", new ColorPickerClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int selectedColor, Integer[] allColors) {
            changeBackgroundColor(selectedColor);
        }
    })
    .setNegativeButton("cancel", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
        }
    })
    .build()
    .show();
As a widget 
    <com.flask.colorpicker.ColorPickerView
        android:id="@+id/color_picker_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:alphaSlider="true"
        app:density="12"
        app:lightnessSlider="true"
        app:wheelType="FLOWER"
        app:lightnessSliderView="@+id/v_lightness_slider"
        app:alphaSliderView="@+id/v_alpha_slider"
        />

    <com.flask.colorpicker.slider.LightnessSlider
        android:id="@+id/v_lightness_slider"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        />

    <com.flask.colorpicker.slider.AlphaSlider
        android:id="@+id/v_alpha_slider"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        />

Reference

Read more here.