How to Create a Color Picker Tool in Android using Color Wheel and Slider?

In the previous article How to Create a Basic Color Picker Tool in Android, we discussed creating a basic color picker tool. In this article, we are going to create the same color picker tool but use a color wheel and slider. This is another type of Color Picker which allows users to pick the brightness level of the color and color intensity. This is also one of the open-source libraries. So in this article its been discussed to implement the following type of color picker tool.

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Steps to Implement a Color Picker Tool

Step 1: Create a New Project

• To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
• Note that select Java as the programming language.

Step 2: Adding the ColorPicker library dependency

• Now add the Color picker library’s dependency as (to the app-level Gradle file):

implementation ‘com.github.duanhong169:colorpicker:1.1.6’

• Make sure the system should be connected to the network (so that it downloads the required files) and after invoking the dependency click on the “Sync Now” button.
• Refer to the following image if unable to locate the app-level Gradle file and invoke the dependency.

Step 3: Working with the activity_main.xml file

• Next, go to the activity_main.xml file, which represents the UI of the project.
• Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <!--Give all widgets, the proper id to
        handle them in MainActivity.java-->

    <!--GeeksforGeeks Text-->
    <TextView
        android:id="@+id/gfg_heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="GeeksforGeeks"
        android:textSize="42sp"
        android:textStyle="bold" />

    <!--Pick color Button-->
    <Button
        android:id="@+id/pick_color_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Pick Color" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:textSize="18sp"
        android:text="Your picked color is:" />

    <!--sample view to preview selected color by user-->
    <!--by default this has been set to darker gery-->
    <!--this can be overridden after user choose the
        color from color picker-->
    <!--which has been handled in the MainActivity.java-->
    <View
        android:id="@+id/preview_selected_color"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:background="@android:color/darker_gray"
        android:layout_marginTop="8dp" />

    <!--set color button to overwrite the
        color for GeeksforGeeks text-->
    <Button
        android:id="@+id/set_color_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Set Color" />

</LinearLayout>

Output UI:

Before going to handle the color picker tool dialog functionality, understanding the parts of the dialog box is necessary so that it can become easier while dealing with parts of the dialog box in java code.

Step 4: Working with the MainActivity.java file

• Finally, go to the MainActivity.java file, and refer to the following code.
• Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import top.defaults.colorpicker.ColorPickerPopup;

public class MainActivity extends AppCompatActivity {

    // text view variable to set the color for GFG text
    private TextView gfgTextView;

    // two buttons to open color picker dialog and one to
    // set the color for GFG text
    private Button mSetColorButton, mPickColorButton;

    // view box to preview the selected color
    private View mColorPreview;

    // this is the default color of the preview box
    private int mDefaultColor;

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

        // register the GFG text with appropriate ID
        gfgTextView = findViewById(R.id.gfg_heading);

        // register two of the buttons with their
        // appropriate IDs
        mPickColorButton = findViewById(R.id.pick_color_button);
        mSetColorButton = findViewById(R.id.set_color_button);

        // and also register the view which shows the
        // preview of the color chosen by the user
        mColorPreview = findViewById(R.id.preview_selected_color);

        // set the default color to 0 as it is black
        mDefaultColor = 0;

        // handling the Pick Color Button to open color
        // picker dialog
        mPickColorButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(final View v) {
                        new ColorPickerPopup.Builder(MainActivity.this).initialColor(
                                Color.RED) // set initial color
                                // of the color
                                // picker dialog
                                .enableBrightness(
                                        true) // enable color brightness
                                // slider or not
                                .enableAlpha(
                                        true) // enable color alpha
                                // changer on slider or
                                // not
                                .okTitle(
                                        "Choose") // this is top right
                                // Choose button
                                .cancelTitle(
                                        "Cancel") // this is top left
                                // Cancel button which
                                // closes the
                                .showIndicator(
                                        true) // this is the small box
                                // which shows the chosen
                                // color by user at the
                                // bottom of the cancel
                                // button
                                .showValue(
                                        true) // this is the value which
                                // shows the selected
                                // color hex code
                                // the above all values can be made
                                // false to disable them on the
                                // color picker dialog.
                                .build()
                                .show(
                                        v,
                                        new ColorPickerPopup.ColorPickerObserver() {
                                            @Override
                                            public void
                                            onColorPicked(int color) {
                                                // set the color
                                                // which is returned
                                                // by the color
                                                // picker
                                                mDefaultColor = color;

                                                // now as soon as
                                                // the dialog closes
                                                // set the preview
                                                // box to returned
                                                // color
                                                mColorPreview.setBackgroundColor(mDefaultColor);
                                            }
                                        });
                    }
                });

        // handling the Set Color button to set the selected
        // color for the GFG text.
        mSetColorButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // now change the value of the GFG text
                        // as well.
                        gfgTextView.setTextColor(mDefaultColor);
                    }
                });
    }
}

Kotlin

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import top.defaults.colorpicker.ColorPickerPopup;


class MainActivity : AppCompatActivity() {
    // text view variable to set the color for GFG text
    private var gfgTextView: TextView? = null

    // two buttons to open color picker dialog and one to
    // set the color for GFG text
    private var mSetColorButton: Button? = null
    private var mPickColorButton: Button? = null

    // view box to preview the selected color
    private var mColorPreview: View? = null

    // this is the default color of the preview box
    private var mDefaultColor = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // register the GFG text with appropriate ID
        gfgTextView = findViewById(R.id.gfg_heading)

        // register two of the buttons with their
        // appropriate IDs
        mPickColorButton = findViewById(R.id.pick_color_button)
        mSetColorButton = findViewById(R.id.set_color_button)

        // and also register the view which shows the
        // preview of the color chosen by the user
        mColorPreview = findViewById(R.id.preview_selected_color)

        // set the default color to 0 as it is black
        mDefaultColor = 0

        // handling the Pick Color Button to open color
        // picker dialog
        mPickColorButton.setOnClickListener(
            object : OnClickListener() {
                fun onClick(v: View?) {
                    Builder(this@MainActivity).initialColor(
                        Color.RED
                    ) // set initial color
                        // of the color
                        // picker dialog
                        .enableBrightness(
                            true
                        ) // enable color brightness
                        // slider or not
                        .enableAlpha(
                            true
                        ) // enable color alpha
                        // changer on slider or
                        // not
                        .okTitle(
                            "Choose"
                        ) // this is top right
                        // Choose button
                        .cancelTitle(
                            "Cancel"
                        ) // this is top left
                        // Cancel button which
                        // closes the
                        .showIndicator(
                            true
                        ) // this is the small box
                        // which shows the chosen
                        // color by user at the
                        // bottom of the cancel
                        // button
                        .showValue(
                            true
                        ) // this is the value which
                        // shows the selected
                        // color hex code
                        // the above all values can be made
                        // false to disable them on the
                        // color picker dialog.
                        .build()
                        .show(
                            v,
                            object : ColorPickerObserver() {
                                fun onColorPicked(color: Int) {
                                    // set the color
                                    // which is returned
                                    // by the color
                                    // picker
                                    mDefaultColor = color

                                    // now as soon as
                                    // the dialog closes
                                    // set the preview
                                    // box to returned
                                    // color
                                    mColorPreview.setBackgroundColor(mDefaultColor)
                                }
                            })
                }
            })

        // handling the Set Color button to set the selected
        // color for the GFG text.
        mSetColorButton.setOnClickListener(
            object : OnClickListener() {
                fun onClick(v: View?) {
                    // now change the value of the GFG text
                    // as well.
                    gfgTextView.setTextColor(mDefaultColor)
                }
            })
    }
}
// This code is written by Ujjwal Kumar Bhardwaj

Output: Run on Emulator