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
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
Let make a simple layout (XML) file for our main activity. It contains 2
In this library, the color picker dialog is created by
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):
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:
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
dependencies scope:
compile 'com.github.yukuku:ambilwarna:2.0.1'
Creating main activity layout
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
AmbilWarnaDialog. Create a dialog by calling the following constructor, and then show it:
AmbilWarnaDialog(Context context, int color, OnAmbilWarnaListener listener)
supportsAlpha in another constructor:
AmbilWarnaDialog(Context context, int color, boolean supportsAlpha, OnAmbilWarnaListener listener)
// 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();
LinearLayout by selected color. This is full code for the main activity:
MainActivity.java
Running this application, we'll have this result:
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();
}
}
Conclusions
References:
- Official library page on Github
- RGBA concept
