Color picker components are useful in many Android applications such as drawing apps, theme customization apps, note applications, and profile customization screens.

In this tutorial, we will learn how to implement a simple color picker in Android using the AmbilWarna library.

We will:

Add the AmbilWarna dependency
Open a color picker dialog
Select colors dynamically
Change the background color of the layout

What Is AmbilWarna?

AmbilWarna is a lightweight Android color picker library that provides a simple and customizable color selection dialog.

It is easy to integrate and works well for basic color selection use cases.

Step 1 — Add Dependency

Open your build.gradle file and add the following dependency:


implementation 'yuku.ambilwarna:ambilwarna:2.0.1'

After adding the dependency, sync your Gradle project.

Step 2 — Create Layout File

Create the UI inside activity_main.xml.


<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open Color Picker"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3 — Implement Color Picker Logic

Now open MainActivity.java and add the following code:


package com.example.colorpicker;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.core.content.ContextCompat;

import yuku.ambilwarna.AmbilWarnaDialog;

public class MainActivity extends AppCompatActivity {

    ConstraintLayout layout;
    Button button;

    int defaultColor;

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

        layout = findViewById(R.id.layout);
        button = findViewById(R.id.button);

        defaultColor = ContextCompat.getColor(
                MainActivity.this,
                R.color.purple_500
        );

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openColorPicker();
            }
        });
    }

    private void openColorPicker() {

        AmbilWarnaDialog colorPicker =
                new AmbilWarnaDialog(
                        this,
                        defaultColor,
                        new AmbilWarnaDialog.OnAmbilWarnaListener() {

                            @Override
                            public void onCancel(AmbilWarnaDialog dialog) {
                            }

                            @Override
                            public void onOk(
                                    AmbilWarnaDialog dialog,
                                    int color
                            ) {

                                defaultColor = color;

                                layout.setBackgroundColor(defaultColor);
                            }
                        });

        colorPicker.show();
    }
}

How This Implementation Works

The application works in the following steps:

User clicks the button
AmbilWarna dialog opens
User selects a color
Selected color is returned
Background color updates dynamically

Expected Output

After running the application:

A button appears in the center of the screen
Clicking the button opens the color picker dialog
Selecting a color changes the activity background color

Common Mistakes Developers Make

1. Missing Dependency

If the library is not added correctly, Gradle sync will fail.

2. Wrong View ID

Ensure the IDs inside XML match the IDs used in Java code.

3. Theme Compatibility Issues

Some older Android themes may create UI inconsistencies with dialog appearance.

Modern Android Improvement Suggestions

For production-grade Android applications, developers can improve this implementation by:

Using Kotlin instead of Java
Using ViewBinding
Saving selected color using SharedPreferences
Supporting dark mode
Adding color preview components

Example: Saving Selected Color


SharedPreferences.Editor editor =
        getSharedPreferences("settings", MODE_PRIVATE).edit();

editor.putInt("selected_color", defaultColor);
editor.apply();

This allows the application to restore the selected color after reopening the app.

FAQ

Can this library work with Kotlin?

Yes. AmbilWarna works with both Java and Kotlin Android projects.

Can I customize the color picker dialog?

Yes. Developers can modify dialog appearance or use alternative libraries for advanced customization.

Is AmbilWarna suitable for production apps?

Yes, for basic color selection functionality. However, large applications may require more advanced UI customization.

Conclusion

Implementing a color picker in Android is simple using the AmbilWarna library.

This approach is useful for applications that require dynamic UI customization or drawing-related features.

Modern Android applications can further improve this implementation using Kotlin, Material Design components, and persistent theme settings.

About the Author

Salil Jha is a Full Stack and Mobile Developer with experience in Android, React Native, scalable SaaS platforms, fintech applications, and developer tooling systems.

CodeChain Dev — Build Modern Products. Solve Real Problems.

How to Implement Color Picker Dialog in Android Using AmbilWarna Library