Android Color Picker application using AmbilWarna Color Picker Library

October 10, 2012
By

In this article, we will create an Android application which facilitates users to pick a color from a Color Picker dialog window. In order to create color picker dialog, we will make use AmbilWarna Color Picker library.

This application is developed in Eclipse ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK (R20.0.3) .


1. Setup AmbilWarna library in Eclipse IDE

Please see the article titled “Setting up AmbilWarna Library for Color Picker in Android“, for setting up the AmbilWarna library for Eclipse 4.2.0


2. Create a new Android application project namely “ColorPickerDemo”

Create a new Android application project namely "ColorPickerDemo"

Figure 1 : Create a new Android application project namely "ColorPickerDemo"


3. Design application launcher icon

Design Application launcher icon

Figure 2 : Design Application launcher icon


4. Create a blank activity to define the class MainActivity

Create a blank activity

Figure 3 : Create a blank activity


5. Enter MainActivity details

Enter MainActivity details

Figure 4 : Enter MainActivity details


6. Delete Android’s support library if exists from the project

By default Eclipse ( 4.2.0) adds Android Support Library to  Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.


7. Add AmbilWarna Color Picker library to this project

  • Open Project Explorer
  • Right click the project
  • Open Properties
  • Select “Android” tab from the Properties Window
  • Then the given below screen will be appeared
  • Using Add button, add the AmbilWarna library to this project
Adding AmbilWarna Color Picker library to this project

Figure 5 : Adding AmbilWarna Color Picker library to this project


8. Update the file res/values/strings.xml


<resources>

    <string name="app_name">ColorPickerDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">ColorPickerDemo</string>
    <string name="str_btn_show">Select a color</string>

</resources>


9. Update the layout file res/layout/activity_main.xml


<RelativeLayout 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" >

    <Button
        android:id="@+id/btn_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/str_btn_show"
        tools:context=".MainActivity" />

</RelativeLayout>


10. Update the class MainActivity in the file src/in/wptrafficanalyzer/colorpickerdemo/MainActivity.java


package in.wptraffficanalyzer.colorpickerdemo;

import yuku.ambilwarna.AmbilWarnaDialog;
import yuku.ambilwarna.AmbilWarnaDialog.OnAmbilWarnaListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

    private Button mShow;

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

        // Getting reference to the button
        mShow = (Button) findViewById(R.id.btn_show);

        // Defining click event listener for the button
        OnClickListener clickListener = new OnClickListener() {

            @Override
            public void onClick(View v) {
                colorpicker();
            }
        };

        // Setting click event listener for the button
        mShow.setOnClickListener(clickListener);
    }

    public void colorpicker() {
        //     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, 0xff0000ff, new OnAmbilWarnaListener() {

            // Executes, when user click Cancel button
            @Override
            public void onCancel(AmbilWarnaDialog dialog){
            }

            // Executes, when user click OK button
            @Override
            public void onOk(AmbilWarnaDialog dialog, int color) {
                Toast.makeText(getBaseContext(), "Selected Color : " + color, Toast.LENGTH_LONG).show();
            }
        });
        dialog.show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}


11. Run the application

Screenshot of the MainActivity

Figure 6 : Screenshot of the MainActivity

Color Picker Dialog is opened on Clicking the "Select a color" button

Figure 7 : Color Picker Dialog is opened on Clicking the "Select a color" button


12. Download


13. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , ,

One Response to Android Color Picker application using AmbilWarna Color Picker Library

  1. Thai Bui on February 25, 2013 at 2:49 am

    Thank you so much for this tutorial. It was concise and I got it up and running in no time.

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner