Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A sample application which shows what the HoloColorPicker library can do.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.larswerkman.demo.colorpicker"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#222"
android:orientation="vertical"
tools:context=".Main" >
<com.larswerkman.colorpicker.ColorPicker
android:id="@+id/picker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<com.larswerkman.colorpicker.SVBar
android:id="@+id/svbar"
android:layout_width="322dp"
android:layout_height="112dp"
android:layout_gravity="center"
android:layout_margin="8dip"/>
<com.larswerkman.colorpicker.OpacityBar
android:id="@+id/opacitybar"
android:layout_width="322dp"
android:layout_height="112dp"
android:layout_gravity="center"
android:layout_margin="8dip"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change Color"
android:layout_weight="1" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Color"
android:textColor="@android:color/white"
android:textSize="20sp"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
public class Main extends Activity implements OnColorChangedListener {
private ColorPicker picker;
private SVBar svBar;
private OpacityBar opacityBar;
private Button button;
private TextView text;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
picker = (ColorPicker) findViewById(R.id.picker);
svBar = (SVBar) findViewById(R.id.svbar);
opacityBar = (OpacityBar) findViewById(R.id.opacitybar);
button = (Button) findViewById(R.id.button1);
text = (TextView) findViewById(R.id.textView1);
picker.addSVBar(svBar);
picker.addOpacityBar(opacityBar);
picker.setOnColorChangedListener(this);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
text.setTextColor(picker.getColor());
picker.setOldCenterColor(picker.getColor());
}
});
}
@Override
public void onColorChanged(int color) {
//gives the color when it's changed.
}
}
@jnherm

This comment has been minimized.

Copy link

commented Nov 18, 2013

My project got error in inflating <com.larswerkman.colorpicker.ColorPicker/>.. What should I do?

@geeksunny

This comment has been minimized.

Copy link

commented Dec 10, 2013

There is a mistake in the XML. To fix the layout inflating error you have to change the "com.larswerkman.colorpicker" to "com.larswerkman.holocolorpicker".

@nijogeorgep

This comment has been minimized.

Copy link

commented Mar 28, 2014

private void showColorPickerDialog()
{
AlertDialog.Builder colorDialogBuilder = new AlertDialog.Builder(
WaterMarkActivity.this);
LayoutInflater inflater = LayoutInflater.from(this);
View dialogview = inflater.inflate(R.layout.color_dialog_layout, null);
picker = (ColorPicker) findViewById(R.id.picker);
svBar = (SVBar) findViewById(R.id.svbar);
opacityBar = (OpacityBar) findViewById(R.id.opacitybar);
picker.addSVBar(svBar);
picker.addOpacityBar(opacityBar);
picker.setOnColorChangedListener(new OnColorChangedListener()
{

        @Override
        public void onColorChanged(int color) {

        }
    });
    colorDialogBuilder.setTitle("Choose Text Color");
    colorDialogBuilder.setView(dialogview);
    colorDialogBuilder.setPositiveButton(R.string.ok,
            new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    Log.d(LOGTAG, "Color :" + picker.getColor());
                    colorPickerView.setTextColor(picker.getColor());
                    picker.setOldCenterColor(picker.getColor());
                }
            });
    colorDialogBuilder.setNegativeButton("Cancel",
            new DialogInterface.OnClickListener() {

                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.cancel();
                }
            });
    AlertDialog colorPickerDialog = colorDialogBuilder.create();
    colorPickerDialog.show();
}

I have tried this use in a Dialog, But this code gives me NullPointerExcepion, My Color Change Listener is not working properly too.. Please suggest me some improvements

@WonderlustKing

This comment has been minimized.

Copy link

commented Mar 29, 2014

i have the some problem. When i try to use Color Picker in Dialog i take NullPointerException. :/

@WonderlustKing

This comment has been minimized.

Copy link

commented Mar 31, 2014

well , @nijogeorgep i have found a solution in my problem (probably it will work and for u).when u write:
svBar = (SVBar) findViewById(R.id.svbar);
opacityBar = (OpacityBar) findViewById(R.id.opacitybar);

change in:
svBar = (SVBar) colorDialogBuilder.findViewById(R.id.svbar);
opacityBar = (OpacityBar) colorDialogBuilder.findViewById(R.id.opacitybar);

u should use the dialog object to take the values for the color picker. Hope it works!!

@tgaurnier

This comment has been minimized.

Copy link

commented Jun 17, 2014

I had the same issue, and this also fixed it for me, however I am also having an issue with the OnColorChangedListener not working, I've tried it the same way nijogeorgep showed in his post, and I also tried it doing public class ColorChooserDialog extends DialogFragment implements OnColorChangedListener {, but no matter how I try it I get a cannot find symbol error, and the symbol it can not find is OnColorChangedListener.

I should also note that everything else from holocolopicker is working, so I did successfully include it as an external library, I can see the ColorPicker and bars in my dialog, OnColorChangedListener is the only symbol that is not being found.

For an example just look at nijogeorgep's post above, because I'm currently attempting the same thing.

@tgaurnier

This comment has been minimized.

Copy link

commented Jun 18, 2014

I figured it out, the OnColorChangedListener interface is within the ColorPicker class, so you need to use ColorPicker.OnColorChangedListener to get passed the "cannot find symbol" error.

Here is what nijogeorgep's example should now look like:

private void showColorPickerDialog()
{
    AlertDialog.Builder colorDialogBuilder = new AlertDialog.Builder(
    WaterMarkActivity.this);
    LayoutInflater inflater = LayoutInflater.from(this);
    View dialogview = inflater.inflate(R.layout.color_dialog_layout, null);
    picker = (ColorPicker) colorDialogBuilder.findViewById(R.id.picker);
    svBar = (SVBar) colorDialogBuilder.findViewById(R.id.svbar);
    opacityBar = (OpacityBar) colorDialogBuilder.findViewById(R.id.opacitybar);
    picker.addSVBar(svBar);
    picker.addOpacityBar(opacityBar);
    picker.setOnColorChangedListener(new ColorPicker.OnColorChangedListener()
    {
        @Override
        public void onColorChanged(int color) {

        }
    });
    colorDialogBuilder.setTitle("Choose Text Color");
    colorDialogBuilder.setView(dialogview);
    colorDialogBuilder.setPositiveButton(R.string.ok,
    new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            Log.d(LOGTAG, "Color :" + picker.getColor());
            colorPickerView.setTextColor(picker.getColor());
            picker.setOldCenterColor(picker.getColor());
        }
    });
    colorDialogBuilder.setNegativeButton("Cancel",
            new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            dialog.cancel();
        }
    });
    AlertDialog colorPickerDialog = colorDialogBuilder.create();
    colorPickerDialog.show();
}
@Nyaungbinhla

This comment has been minimized.

Copy link

commented Aug 25, 2014

i like your code....

@TarasMatolinets

This comment has been minimized.

Copy link

commented Nov 15, 2014

hey.You have to change namespace to com.larswerkman.holocolorpicker.ColorPicker and everything will be fine

@my9074

This comment has been minimized.

Copy link

commented Dec 29, 2014

There is some error: android.view.InflateException: Binary XML file line #9: Error inflating class com.larswerkman.holocolorpicker.ColorPicker
Caused by: java.lang.reflect.InvocationTargetException
Caused by: java.lang.NoClassDefFoundError: com.larswerkman.holocolorpicker.R$styleable
But I already add the holocolorpicker-master.jar in my Project's libs

@mehnaazm

This comment has been minimized.

Copy link

commented Feb 17, 2015

@my9047 . I had the same issue .. If you use eclipse then just right click -> properties -> android -> add -> HoloColorPicker . and remove it from the buildpath . Hope it resolves your issue

@anpatel

This comment has been minimized.

Copy link

commented Feb 21, 2015

@geeksunny You saved the day 😃

@hamedmoody

This comment has been minimized.

Copy link

commented Apr 11, 2015

Thanks for this lib. it is so useful

@mamkhaou

This comment has been minimized.

Copy link

commented May 14, 2015

Hello , please anyone could share how to use this project in eclipse. every time i try to use it in the xml file i have inflating issue. i tired with holocolorpicker and color , both . thank you for your help.

@androidapkr

This comment has been minimized.

Copy link

commented May 29, 2015

Hello
i want to use this library in my project.
this is open source library ?
is any permission required for usage ?

developer can contact me on mandaliya.rahul@gmail.com

@XNepster

This comment has been minimized.

Copy link

commented Oct 16, 2015

I am having a running colorPickerDialogue.May be it help someOne.

public void showColorPickDialogue()
{
    AlertDialog.Builder colorPickAlert = new AlertDialog.Builder(context);

    colorPickAlert.setTitle("Choose Background Color");

    LayoutInflater inflater = getLayoutInflater();

    View dialoglayout = inflater.inflate(R.layout.color_pick_dialog, null);

    colorPickAlert.setView(dialoglayout);

    ColorPicker picker = (ColorPicker) dialoglayout.findViewById(R.id.picker);

    SVBar svBar = (SVBar) dialoglayout.findViewById(R.id.svbar);

    OpacityBar opacityBar = (OpacityBar) dialoglayout.findViewById(R.id.opacitybar);

    final TextView text = (TextView) dialoglayout.findViewById(R.id.textView1);

    Button colorSelectedBtn = (Button)dialoglayout.findViewById(R.id.button1);

    final AlertDialog colorDialog = colorPickAlert.show();

    colorSelectedBtn.setOnClickListener(new View.OnClickListener() 
    {   
        @Override
        public void onClick(View v) 
        {
            colorDialog.dismiss();
        }
    });

    picker.addSVBar(svBar);
    picker.addOpacityBar(opacityBar);

    picker.setOnColorChangedListener(new OnColorChangedListener() 
    {
        @Override
        public void onColorChanged(int color) 
        {
            text.setBackgroundColor(color);
        }
    });

}

And color_pick_dialog.xml

<larswerkman.holocolorpicker.ColorPicker
    android:id="@+id/picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />

<larswerkman.holocolorpicker.SVBar
    android:id="@+id/svbar"
    android:layout_width="322dp"
    android:layout_height="112dp"
    android:layout_gravity="center"
    android:layout_margin="8dip" />

<larswerkman.holocolorpicker.OpacityBar
    android:id="@+id/opacitybar"
    android:layout_width="322dp"
    android:layout_height="112dp"
    android:layout_gravity="center"
    android:layout_margin="8dip" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="2" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Change Color" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Text Color"
        android:textColor="#FF0000"
        android:textSize="20sp" />
</LinearLayout>
@mahdiyeimani

This comment has been minimized.

Copy link

commented Dec 6, 2017

hi...
Your code was great ...
Thank you...
How can I use the code from the selected color?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.