Learn Programming Together: Creating Color Picker dialog in Android

Color picker is a not popular topic in Android app development but not too difficult to implement. By showing a dialog which has a palette, providing some more options like translucent and transparent percentage,...we can allow user to choose a suitable color which they want.

The fact that, by searching on the Internet, there are a lot of third-party libraries that able to help us to resolve this problem so we shouldn't custom a palette dialog ourselves, please use one of them. Let's be a lazy developer!
In this post, I would like to present a library named AmbilWarna (mean "pick a color" in Indonesian). In my opinion, it's a quite well library, easy to choose a color with it's translucent (alpha) value which displayed in a Dialog.

Adding library dependency

After starting a new Android Studio project, the simplest way to use this library is adding it's dependency to your application level build.gradle (inside dependencies scope:

compile 'com.github.yukuku:ambilwarna:2.0.1'

Syncing gradle and start coding!

Creating main activity layout

Let make a simple layout (XML) file for our main activity. It contains 2 Buttons to show a color picker dialog when clicked (with 2 options: alpha and no-alpha value) and a LinearLayout to set the chosen color as it's background when completed:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.devexchanges.colorpicker.MainActivity">

    <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Open dialog" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_1"
        android:text="Open dialog (with alpha)" />

    <LinearLayout
        android:id="@+id/color_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/btn_2"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:orientation="vertical" />
</RelativeLayout>

Configuration in programmatically code

In this library, the color picker dialog is created by AmbilWarnaDialog. Create a dialog by calling the following constructor, and then show it:

AmbilWarnaDialog(Context context, int color, OnAmbilWarnaListener listener)

Moreover, alpha is also supported by passing the 3rd parameter supportsAlpha in another constructor:

AmbilWarnaDialog(Context context, int color, boolean supportsAlpha, OnAmbilWarnaListener listener)

This code is used for showing a color picker dialog:

// initialColor is the initially-selected color to be shown in the rectangle on the left of the arrow.
// for example, 0xff000000 is black, 0xff0000ff is blue. Please be aware of the initial 0xff which is the alpha.
AmbilWarnaDialog dialog = new AmbilWarnaDialog(this, initialColor, supportsAlpha, new OnAmbilWarnaListener() {
    @Override
    public void onOk(AmbilWarnaDialog dialog, int color) {
        // color is the color selected by the user
        // you can use this integer value for your own aim
    }

    @Override
    public void onCancel(AmbilWarnaDialog dialog) {
        // cancel was selected by the user
    }

dialog.show();

In this example, I set background for the LinearLayout by selected color. This is full code for the main activity:

MainActivity.java

package info.devexchanges.colorpicker;

import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

import yuku.ambilwarna.AmbilWarnaDialog;

public class MainActivity extends AppCompatActivity {
    private int currentColor;
    private LinearLayout colorLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        currentColor = ContextCompat.getColor(this, R.color.colorAccent);

        Button btnPick = (Button) findViewById(R.id.btn_1);
        colorLayout = (LinearLayout) findViewById(R.id.color_background);
        Button btnPickWithAlpha = (Button) findViewById(R.id.btn_2);
        btnPick.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                openDialog(false);
            }
        });

        btnPickWithAlpha.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                openDialog(true);
            }
        });
    }

    private void openDialog(boolean supportsAlpha) {
        AmbilWarnaDialog dialog = new AmbilWarnaDialog(this, currentColor, supportsAlpha, new AmbilWarnaDialog.OnAmbilWarnaListener() {
            @Override
            public void onOk(AmbilWarnaDialog dialog, int color) {
                currentColor = color;
                colorLayout.setBackgroundColor(color);
            }

            @Override
            public void onCancel(AmbilWarnaDialog dialog) {
                Toast.makeText(getApplicationContext(), "Action canceled!", Toast.LENGTH_SHORT).show();
            }
        });
        dialog.show();
    }
}

Running this application, we'll have this result:

Click at "Open dialog", the normal dialog with choose color without alpha value will be displayed:

After choose a color:

If you click at "Open dialog (with alpha)", there is a alpha column at the right side of the dialog:

And this is result after choose a color (the color will have a translucency value):

Conclusions

By using a third-party library, we now can create a color picker dialog easily with a few codes. Of course, you can visit Color Picker category in Android Arsenal and try another one, especially Material design color libraries. Moreover, read this discussion on StackOverflow to find out the way to custom this dialog style. Thanks for reading!
References: