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.
