🎨 Android colorpicker for getting colors from any images by tapping on the desired color.

Jaewoong Eum

Last update: Jan 8, 2023

Related tags

Animations android color-picker android-library android-ui colorpicker argb colorpickerview colorpickerdialog skydoves

Overview

ColorPickerView

🎨 ColorPickerView implements getting HSV colors, ARGB values, Hex color codes from
any image drawables or your gallery pictures by tapping on the desired color.
Supports alpha & brightness slider bar, dialog, and saving & restoring selected data.

Including in your project

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        mavenCentral()
    }
}

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:colorpickerview:2.2.3"
}

SNAPSHOT

Snapshots of the current development version of ColorPickerView are available, which track the latest versions.

repositories {
   maven {
     url 'https://oss.sonatype.org/content/repositories/snapshots/'
   }
}

1. ColorPickerView

2. AlphaSlideBar
3. BrightnessSlideBar
4. ColorPickerDialog
5. FlagView
6. AlphaTileView
7. ColorPickerView Methods
8. Other Libraries

Usage

Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

ColorPickerView in XML layout

We can use ColorPickerView without any customized attributes.
This ColorPickerView will be initialized with the default HSV color palette and default selector.

<com.skydoves.colorpickerview.ColorPickerView
   android:id="@+id/colorPickerView"
   android:layout_width="300dp"
   android:layout_height="300dp" />

Attribute descriptions

We can customize the palette image and selector or various options using the below attributes.

app:palette="@drawable/palette" // sets a custom palette image.
app:selector="@drawable/wheel" // sets a custom selector image.
app:selector_size="32dp" // sets a width & height size of the selector.
app:alpha_selector="0.8" // sets an alpha of thr selector.
app:alpha_flag="0.8" // sets an alpha of the flag.
app:actionMode="last" // sets action mode 'always' or 'last'.
// set an initial position of the selector using a specific color. This attribute will work with only a default HSV palette.
app:initialColor="@color/colorPrimary"
app:preferenceName="MyColorPicker" // sets a preference name.
app:debounceDuration="200" // sets a debounce duration of the invoking color listener.

ColorListener

ColorListener is invoked when tapped by a user or selected a position by a function.

colorPickerView.setColorListener(new ColorListener() {
    @Override
    public void onColorSelected(int color, boolean fromUser) {
        LinearLayout linearLayout = findViewById(R.id.linearLayout);
        linearLayout.setBackgroundColor(color);
    }
});

ColorEnvelope

ColorEnvelope is a wrapper class of color models for providing more variety of color models.
We can get HSV color value, Hex string code, ARGB value from the ColorEnvelope.

colorEnvelope.getColor() // returns a integer color.
colorEnvelope.getHexCode() // returns a hex code string.
colorEnvelope.getArgb() // returns a argb integer array.

ColorEnvelope Listener

ColorEnvelopeListener extends ColorListener and it provides ColorEnvelope as a parameter.

colorPickerView.setColorListener(new ColorEnvelopeListener() {
    @Override
    public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {
        linearLayout.setBackgroundColor(envelope.getColor());
        textView.setText("#" + envelope.getHexCode());
    }
});

Palette

If we do not set any customized palette, the default palette drawable is the ColorHsvPalette.
We can move and select a point on the palette using a specific color using the below methods.

colorPickerView.selectByHsvColor(color);
colorPickerView.selectByHsvColorRes(R.color.colorPrimary);

We can change the default palette as a desired image drawable using the below method.
But if we change the palette using another drawable, we can not use the selectByHsvColor method.

colorPickerView.setPaletteDrawable(drawable);

If we want to change back to the default palette, we can change it using the below method.

colorPickerView.setHsvPaletteDrawable();

ActionMode

ActionMode is an option restrict to invoke the ColorListener by user actions.

colorPickerView.setActionMode(ActionMode.LAST); // ColorListener will be invoked when the finger is released.

Debounce

Only emits color values to the listener if a particular timespan has passed without it emitting using debounceDuration attribute. We can set the debounceDuration on our xml layout file.

app:debounceDuration="150"

Or we can set it programmatically.

colorPickerView.setDebounceDuration(150);

Create using builder

This is how to create ColorPickerView's instance using ColorPickerView.Builder class.

ColorPickerView colorPickerView = new ColorPickerView.Builder(context)
      .setColorListener(colorListener)
      .setPreferenceName("MyColorPicker");
      .setActionMode(ActionMode.LAST)
      .setAlphaSlideBar(alphaSlideBar)
      .setBrightnessSlideBar(brightnessSlideBar)
      .setFlagView(new CustomFlag(context, R.layout.layout_flag))
      .setPaletteDrawable(ContextCompat.getDrawable(context, R.drawable.palette))
      .setSelectorDrawable(ContextCompat.getDrawable(context, R.drawable.selector))
      .build();

Initial color

We can set an initial color and set positions of selector and slideBars based on the initial color.
This function will work only with a default HSV palette.
If we set preference name using the setPreferenceName method, this function will work only once.

app:initialColor="@color/colorPrimary"

Or we can use this method programmatically.

.setInitialColor(color);
.setInitialColorRes(R.color.colorPrimary);

Restore and save

This is how to restore the state of ColorPickerView.
setPreferenceName() method restores all of the saved states (selector, color) automatically.

colorPickerView.setPreferenceName("MyColorPicker");

This is how to save the states of ColorPickerView.
setLifecycleOwner() method saves all of the states automatically when the lifecycleOwner is destroy.

colorPickerView.setLifecycleOwner(this);

Or we can save the states manually using the below method.

ColorPickerPreferenceManager.getInstance(this).saveColorPickerData(colorPickerView);

Manipulate and clear

We can manipulate and clear the saved states using ColorPickerPreferenceManager.

ColorPickerPreferenceManager manager = ColorPickerPreferenceManager.getInstance(this);
manager.setColor("MyColorPicker", Color.RED); // manipulates the saved color data.
manager.setSelectorPosition("MyColorPicker", new Point(120, 120)); // manipulates the saved selector's position data.
manager.clearSavedAllData(); // clears all of the states.
manager.clearSavedColor("MyColorPicker"); // clears only saved color data. 
manager.restoreColorPickerData(colorPickerView); // restores the saved states manually.

Palette from Gallery

Here is how to get a bitmap drawable from the gallery image and set it to the palette.

Declare below permission on your AndroidManifest.xml file.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

The below codes will start the Gallery and we can choose the desired image.

Intent photoPickerIntent = new Intent(Intent.ACTION_PICK);
photoPickerIntent.setType("image/*");
startActivityForResult(photoPickerIntent, REQUEST_CODE_GALLERY);

In the onActivityResult, we can get a bitmap drawable from the gallery and set it as the palette. And We can change the palette image of the ColorPickerView using the setPaletteDrawable method.

try {
  final Uri imageUri = data.getData();
  final InputStream imageStream = getContentResolver().openInputStream(imageUri);
  final Bitmap selectedImage = BitmapFactory.decodeStream(imageStream);
  Drawable drawable = new BitmapDrawable(getResources(), selectedImage);
  colorPickerView.setPaletteDrawable(drawable);
} catch (FileNotFoundException e) {
  e.printStackTrace();
}

AlphaSlideBar

AlphaSlideBar changes the transparency of the selected color.

AlphaSlideBar in XML layout

<com.skydoves.colorpickerview.sliders.AlphaSlideBar
   android:id="@+id/alphaSlideBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:selector_AlphaSlideBar="@drawable/wheel" // sets a customized selector drawable.
   app:borderColor_AlphaSlideBar="@android:color/darker_gray" // sets a color of the border.
   app:borderSize_AlphaSlideBar="5"/> // sets a size of the border.

We can attach and connect the AlphaSlideBar to our ColorPickerView using attachAlphaSlider method.

AlphaSlideBar alphaSlideBar = findViewById(R.id.alphaSlideBar);
colorPickerView.attachAlphaSlider(alphaSlideBar);

We can make it vertically using the below attributes.

android:layout_width="280dp" // width must set a specific width size.
android:layout_height="wrap_content"
android:rotation="90"

BrightnessSlideBar

BrightnessSlideBar changes the brightness of the selected color.

BrightnessSlideBar in XML layout

<com.skydoves.colorpickerview.sliders.BrightnessSlideBar
   android:id="@+id/brightnessSlide"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:selector_BrightnessSlider="@drawable/wheel" // sets a customized selector drawable.
   app:borderColor_BrightnessSlider="@android:color/darker_gray" // sets a color of the border.
   app:borderSize_BrightnessSlider="5"/> // sets a size of the border.

We can attach and connect the BrightnessSlideBar to our ColorPickerView using attachBrightnessSlider method.

BrightnessSlideBar brightnessSlideBar = findViewById(R.id.brightnessSlide);
colorPickerView.attachBrightnessSlider(brightnessSlideBar);

We can make it vertically using the below attributes.

android:layout_width="280dp" // width must set a specific width size.
android:layout_height="wrap_content"
android:rotation="90"

ColorPickerDialog

ColorPickerDialog can be used just like an AlertDialog and it provides colors by tapping from any drawable.

new ColorPickerDialog.Builder(this)
      .setTitle("ColorPicker Dialog")
      .setPreferenceName("MyColorPickerDialog")
      .setPositiveButton(getString(R.string.confirm),
          new ColorEnvelopeListener() {
              @Override
              public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {
                  setLayoutColor(envelope);
              }
          })
       .setNegativeButton(getString(R.string.cancel),
          new DialogInterface.OnClickListener() {
              @Override
              public void onClick(DialogInterface dialogInterface, int i) {
                  dialogInterface.dismiss();
              }
           })
      .attachAlphaSlideBar(true) // the default value is true.
      .attachBrightnessSlideBar(true)  // the default value is true.
      .setBottomSpace(12) // set a bottom space between the last slidebar and buttons.
      .show();

we can get an instance of ColorPickerView from the ColorPickerView.Builder and we can customize it.

ColorPickerView colorPickerView = builder.getColorPickerView();
colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag)); // sets a custom flagView
builder.show(); // shows the dialog

FlagView

We can implement showing a FlagView above and below on the selector.
This library provides BubbleFlagView by default as we can see the previews.
Here is the example code for implementing it.

BubbleFlag bubbleFlag = new BubbleFlag(this);
bubbleFlag.setFlagMode(FlagMode.FADE);
colorPickerView.setFlagView(bubbleFlag);

We can also fully customize the FlagView like below.

First, We need a customized layout like below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:background="@drawable/flag"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/flag_color_layout"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="6dp"
        android:layout_marginLeft="5dp"
        android:orientation="vertical"/>

    <TextView
        android:id="@+id/flag_color_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="5dp"
        android:textSize="14dp"
        android:textColor="@android:color/white"
        android:maxLines="1"
        android:ellipsize="end"
        android:textAppearance="?android:attr/textAppearanceSmall"
        tools:text="#ffffff"/>
</LinearLayout>

Second, we need to create a class that extends FlagView. Here is an example code.

public class CustomFlag extends FlagView {

    private TextView textView;
    private AlphaTileView alphaTileView;

    public CustomFlag(Context context, int layout) {
        super(context, layout);
        textView = findViewById(R.id.flag_color_code);
        alphaTileView = findViewById(R.id.flag_color_layout);
    }

    @Override
    public void onRefresh(ColorEnvelope colorEnvelope) {
        textView.setText("#" + colorEnvelope.getHexCode());
        alphaTileView.setPaintColor(colorEnvelope.getColor());
    }
}

And last, set the FlagView to the ColorPickerView using the setFlagView method.

colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));

FlagMode

FlagMode is an option to decides the visibility action of the FlagView.

colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always by tapping and dragging.
colorPickerView.setFlagMode(FlagMode.LAST); // showing only when finger released.

AlphaTileView

AlphaTileView visualizes ARGB colors over the view.
If we need to represent ARGB colors on the general view, it will not be showing accurately. Because a color will be mixed with the parent view's background color. so if we need to represent ARGB colors accurately, we can use the AlphaTileView.

<com.skydoves.colorpickerview.AlphaTileView
     android:id="@+id/alphaTileView"
     android:layout_width="55dp"
     android:layout_height="55dp"
     app:tileSize="20" // the size of the repeating tile
     app:tileEvenColor="@color/tile_even" // the color of even tiles
     app:tileOddColor="@color/tile_odd"/> // the color of odd tiles

ColorPickerView Methods

Methods	Return	Description
getColor()	int	gets the last selected color.
getColorEnvelope()	ColorEnvelope	gets the `ColorEnvelope` of the last selected color.
setPaletteDrawable(Drawable drawable)	void	changes palette drawable manually.
setSelectorDrawable(Drawable drawable)	void	changes selector drawable manually.
setSelectorPoint(int x, int y)	void	selects the specific coordinate of the palette manually.
selectByHsvColor(@ColorInt int color)	void	changes selector's selected point by a specific color.
selectByHsvColorRes(@ColorRes int resource)	void	changes selector's selected point by a specific color using a color resource.
setHsvPaletteDrawable()	void	changes the palette drawable as the default drawable (ColorHsvPalette).
selectCenter()	void	selects the center of the palette manually.
setInitialColor(@ColorInt int color)	void	changes selector's selected point by a specific color initially.
setInitialColorRes(@ColorRes int resource)	void	changes selector's selected point by a specific color initially using a color resource.
setActionMode(ActionMode)	void	sets the color listener's trigger action mode.
setFlagView(FlagView flagView)	void	sets `FlagView` on `ColorPickerView`.
attachAlphaSlider	void	linking an `AlphaSlideBar` on the `ColorPickerView`.
attachBrightnessSlider	void	linking an `BrightnessSlideBar` on the `ColorPickerView`.

Other Libraries

Here are other ColorPicker related libraries!

ColorPickerPreference

A library that let you implement ColorPickerView, ColorPickerDialog, ColorPickerPreference.

Multi-ColorPickerView

You can get colors using multi selectors.
At here you can get a more specialized library on multi-coloring.

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐
And follow me for my next creations! 🤩

License

Copyright 2017 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Comments

API for setting the colour to start with

When creating ColorPickerView, I want to specify an RGB color initially and expect the selector to be placed on the corresponding color in the color wheel as well as in the brightness slider.

The method setPureColor is not suitable for this.

Persisting via the PreferencesManager is not desired.
enhancement Released

opened by eku 19
Selector Drawable Color and Icon Change.

We should add selector drawable as we want and it should show color where we move it. Right now Bubble flag is performing that functionality but i want to do it with selector drawable.
Release Next

opened by HafizAwaiskhan 15
Usage failure selectByHsv，
Please complete the following information:

Library Version 2.1.1

Affected Device(s) [millet 5s with Android 8.0]

Describe the Bug: Hello, I call the method [colorPickerView. selectByHsv (color)]. It was found that [selectedColor = getColorFromBitmap (x, y);] This line of code always gets a value of 0. Excuse me, why is this?

Expected Behavior: I expect to specify the position of the palette with the color as the parameter
opened by EmakefunAurora 9

selectByHsvColor() not working

Library Version [e.g. v2.2.3] (tried multiple versions)
SDK 30

Describe the Bug:

When I try to selectByHsvColor() I get an error saying:

selectByHsvColor(@ColorInt int color) can be called only when the palette is an instance of ColorHsvPalette. Use setHsvPaletteDrawable();

But when I try to setHsvPaletteDrawable() I get an error:

 java.lang.IllegalArgumentException: width and height must be > 0
        at android.graphics.Bitmap.createBitmap(Bitmap.java:1113)
        at android.graphics.Bitmap.createBitmap(Bitmap.java:1080)
        at android.graphics.Bitmap.createBitmap(Bitmap.java:1030)
        at android.graphics.Bitmap.createBitmap(Bitmap.java:991)
        at com.skydoves.colorpickerview.ColorPickerView.setHsvPaletteDrawable(ColorPickerView.java:741)

I don't use a custom Palette Drawable.

I have my ColorPicker in my main activity like this:

<com.skydoves.colorpickerview.ColorPickerView
        android:layout_width="300px"
        android:layout_height="300px"
        android:id="@+id/colorPickerView"
        >
</com.skydoves.colorpickerview.ColorPickerView>

Expected Behavior:

selectByHsv() should work since I don't use custom Palette Drawable.

opened by kovaszab 5

Add initColor method

Hello! Could you please add initColor method for ColorPickerDialog builder's for initialize set start color for ColorPickerView?

For example:

new ColorPickerDialog.Builder(this) .setTitle("ColorPicker Dialog") .setPreferenceName("MyColorPickerDialog") .setPositiveButton(getString(R.string.confirm), new ColorEnvelopeListener() { @Override public void onColorSelected(ColorEnvelope envelope, boolean fromUser) { setLayoutColor(envelope); } }) .setNegativeButton(getString(R.string.cancel), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }) .attachAlphaSlideBar(true) // the default value is true. .attachBrightnessSlideBar(true) // the default value is true. .setBottomSpace(12) // set a bottom space between the last slidebar and buttons. .setInitColor(here color in Int or Hex) // This method is neeeded for set initialize color. <------------ .show();
enhancement Released

opened by Lasicaine 5

ColorPickerView exception on startup when target SDK = 28: "IllegalArgumentException: x must be < bitmap.width()"

If the compile and target SDK versions are changed to 28 in the sample app then this exception will be thrown during initial layout:

09-25 16:36:31.481 7552-7552/com.skydoves.colorpickerviewdemo E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.skydoves.colorpickerviewdemo, PID: 7552
    java.lang.IllegalArgumentException: x must be < bitmap.width()
        at android.graphics.Bitmap.checkPixelAccess(Bitmap.java:1780)
        at android.graphics.Bitmap.getPixel(Bitmap.java:1728)
        at com.skydoves.colorpickerview.ColorPickerView.getColorFromBitmap(ColorPickerView.java:211)
        at com.skydoves.colorpickerview.ColorPickerView.setSelectorPoint(ColorPickerView.java:356)
        at com.skydoves.colorpickerview.ColorPickerView.selectCenter(ColorPickerView.java:402)
        at com.skydoves.colorpickerview.ColorPickerView$1.onGlobalLayout(ColorPickerView.java:111)
        at android.view.ViewTreeObserver.dispatchOnGlobalLayout(ViewTreeObserver.java:945)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2357)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1460)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7183)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:949)
        at android.view.Choreographer.doCallbacks(Choreographer.java:761)
        at android.view.Choreographer.doFrame(Choreographer.java:696)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

Edit: reverting the targetSdkVersion to 27 and leaving the compileSdkVersion at 28 suppresses the issue. They must have introduced additional restrictions to Bitmap.getPixel() in Android 28

opened by kiwiandroiddev 4

Initilize ColorPickerView

I am trying to use ColorPickerView to pick colors and save it to preference. Next time when I open the selector activity I want it to show previously saved color. I am not sure how this can be done when we do not have any API that allows to initialize ColorPickerView.

opened by ShubhamSoni 4
ActionMode and FlagMode aren't working independently
Library Version 2.2.3

Describe the Bug:

When I set ColorPickerView's ActionMode to LAST it works as it should. But I want the FlagView to move together with the Selector so I set it to FlagMode.ALWAYS. But there is a Bug that FlagMode.ALWAYS has no effect when you set your ColorPickerView to LAST.

Expected Behavior:

ActionMode and FlagMode should be working independent from each other.

I already tried to fix this in your sample app. See the attached videos please.

Unexpected Behavior https://user-images.githubusercontent.com/51320528/142865610-b039e7e9-40d2-47c0-b424-8e9b700f0e6b.mp4

Expected Behavior https://user-images.githubusercontent.com/51320528/142866047-1654e9b5-1246-4c8f-b645-24eac1790675.mp4
opened by janaltenhof 3
Image drawable palette does not map initial color accurate

I am using an image as a drawable on the palette. When I am trying to set the initial color property it does not map the selector to the right color.

Please fix this issue.

opened by mhassaan07 3
The color will flash when the touch point moves outside the color plate.
Library Version [v2.1.6]

Describe the Bug:

When the touch point moves inside the color plate, everything works normally.

However, the color will flash when the touch point moves outside the color plate.

What happened and What should I do?
opened by SuhaylZhao 3
setSelectorPoint() method is not working

Using colorpickerpreference library version 1.0.4

Using an LG G6 smartphone.

I am using a ColorpickerView in one of my fragments.

Calling setSelectorPoint in onCreate of my fragment does not change the selector point. I am storing the X and Y selector point float values using the getSelectorX() and getSelectorY() methods when onDetach is called. When the fragment is closed and re-opened I typecast the selected float x and y values to integers, then pass them through the setSelectorPoint() method.

I have confirmed the x/y values are being stored and retrieve correctly by the fragment, although the selector always initializes at the center point regardless...

Thank you for the library! Hope we can get this resolved.

opened by dheadrick1618 3
Color Picker Brightness and Alpha slider issue on a
Please complete the following information:

Library Version 2.2.4

Affected Device(s) Pixel 4 API 26

Describe the Bug:

When using the colorPickerDialog.colorPickerView.setPaletteDrawable loading in an image that the user has previously drawn. When the color picker dialog appears, the image shows up fine on it. However, an issue arises when I select certain drawn lines that have had their brightness reduced. The color that is being given by the ColorEnvelope is a color that has its brightness set to Max. This becomes really bad when I try to select the color black and the ColorEnvelope returns the color white.

I have included a code snippet of color picker dialog being used I also included screenshots of the color picker using the color wheel and using an image

private fun openEyeDropper() { try { val bubbleFlag = CustomFlag(requireContext(), R.layout.bubble_flag) bubbleFlag.flagMode = FlagMode.LAST val colorPickerDialog = ColorPickerDialog.Builder(requireContext()) .setTitle("Color Eye Dropper") .setPositiveButton(getString(R.string.confirm), ColorEnvelopeListener { envelope, fromUser -> defaultColor = envelope.color draw_View.setDrawingColor(envelope.color) changeToolColors() }) .setNegativeButton( getString(R.string.cancel) ) { dialogInterface, i -> dialogInterface.dismiss() } .attachAlphaSlideBar(false) // the default value is true. .attachBrightnessSlideBar(true) // the default value is true. .setBottomSpace(12) // set a bottom space between the last slidebar and buttons. colorPickerDialog.colorPickerView.setPaletteDrawable(draw_View.bitmap.toDrawable(requireContext().resources)) colorPickerDialog.colorPickerView.flagView = bubbleFlag colorPickerDialog.show() } catch (e: Exception){ Log.e( "Error Exception" , e.message.toString()) } }

Picking a color and lowering the brightness Color picker making black have max brightness Color picker making the same color I just picked have max brightness

Expected Behavior:

What I expect to happen when I select a point on an image is that it returns the color and retains the same brightness level and alpha level.

Suggestion The issue seems to occur in the AbstractSliderclass on the notifyColor method. It calls colorPickerView.getPureColor() which seems to reset the alpha and brightness levels. I do understand why this implementation is important when using the color wheel, however, I think an image should allow you to retain the alpha and brightness values of a color point. Especially if you use the default color wheel to create a drawing and you want to retrieve a previous color from it. A possible solution could be giving a flag to the color listener to see if it using the color wheel or a custom image. Then in the color listener, you can check if it is an image and if it is then you don't have to reset the alpha and brightness of a color.
opened by chazilian 0
Illegal char <:> at index 53: app-mergeDebugResources-38:/values/values.xml
Library Version 2.2.4

Affected Device(s) Redmi Note 5

I'm using Android Studio Chipmunk | 2021.2.1 Patch 1

Illegal char <:> at index 53 in values.xml file:

In may application i'm custom color picker dialog. for that i have used this library (skydoves/ColorPickerView) with latest version with 2.2.4. And when I try to Run 'app' it is showing Illegal char <:> at index 53: com.example.myapp.app-mergeDebugResources-38:/values/values.xml error. before that I have used another colorpickerdialog library and that was works fine. No errors like this are there. Also, I check that in my project there no values/values.xml kind of file.
opened by Dhanrajsinh002 4
Set ColorPickerView Size programatically

HI @skydoves first thanks for the library! @skydoves I've created Picker dialog using ColorPickerDialog.builder, in "landscape" oriented activity. The issue is that the colorPickerView size is way bigger, I want to reduce the size of it so the user does not have to scroll down to access alphaBar and other. can't there be a public method to set width ,height of the ColorPickerView so anyone can set the size of his convenience? Thanks

opened by MTayyabSarfraz 0
getSelectedPoint and setSelectorPoint bug

There is an error between the obtained coordinates and the set coordinates

getSelectedPoint -> Point(620, 435) setSelectorPoint -> Point(620, 435) approximatedPoint -> Point(618, 434)

opened by WuWenL0 3
Stop Touch events when touch outside of View

It would be nice if the Touch Event could be Canceled when the motion event goes outside the view. At least if it could be added as an option to set it because the selector isn't really acting well when the finger goes outside of the View.

opened by AleksaDjordjevic97 0
The edge color selection is somewhat inaccurate. It is recommended to take the color value 2 pixels away from the edge.
Please complete the following information:

Library Version [e.g. v2.1.0]

Affected Device(s) [e.g. Samsung Galaxy s10 with Android 9.0]

Describe the Bug:

Add a clear description about the problem.

Expected Behavior:

A clear description of what you expected to happen.
opened by xybCoder 1

Releases(2.2.4)

2.2.4(Nov 25, 2021)
🎉 Released a new version 2.2.4! 🎉

What's Changed

added getSelector function by @Nishanth-Risor in https://github.com/skydoves/ColorPickerView/pull/73

Update: notify to flag view by @skydoves in https://github.com/skydoves/ColorPickerView/pull/72

Update dependencies by @skydoves in https://github.com/skydoves/ColorPickerView/pull/79

Bugfix: notify flag view when ActionMode is set to LAST by @janaltenhof in https://github.com/skydoves/ColorPickerView/pull/81

New Contributors

@Nishanth-Risor made their first contribution in https://github.com/skydoves/ColorPickerView/pull/73

@janaltenhof made their first contribution in https://github.com/skydoves/ColorPickerView/pull/81

Full Changelog: https://github.com/skydoves/ColorPickerView/compare/2.2.3...2.2.4
Source code(tar.gz)
Source code(zip)
2.2.3(Feb 18, 2021)
🎉 Release a new version 2.2.3! 🎉

What's New?

Added colorPickerDialog kotlin extension.

Fixed the wrong calculation for the restoring position of the HSVColorPalette. (#64)

Changed internal resources naming conventions.

Source code(tar.gz)
Source code(zip)
2.2.2(Nov 10, 2020)
🎉 Released a new version 2.2.2! 🎉

What's New?

Adds support for setting the enabled and disabled. (#59)

Incorrect restored positions of the sliders. (#60)

Changed some class's visibility as protect.

Updated internal Gradle build tool version to 4.1.0.

Source code(tar.gz)
Source code(zip)
colorpickerview-2.2.2.aar(83.76 KB)
2.2.1(Oct 3, 2020)
🎉 Released a new version 2.2.1! 🎉

What's New?

Added some AbstractSlider attributes releated functionalties for customizing AlphaSlideBar and BrightnessSlideBar.

setSelectorDrawable(Drawable drawable)

setSelectorDrawableRes(@DrawableRes int resource)

setBorderColor(@ColorInt int color)

setBorderColorRes(@ColorRes int resource)

setBorderSize(int borderSize)

setBorderSizeRes(@DimenRes int resource)

Source code(tar.gz)
Source code(zip)
colorpickerview-2.2.1.aar(83.37 KB)
2.2.0(Sep 3, 2020)
🎉 Released a new version 2.2.0! 🎉

What's New?

Added Initial color functionalities. We can set an initial color and set positions of selector and slideBars based on the initial color. This function will work only with a default HSV palette. If we set a preference name using the setPreferenceName method, this function will work only once.

app:initialColor="@color/colorPrimary"

Or we can use this method programmatically.

.setInitialColor(color); .setInitialColorRes(R.color.colorPrimary);

Fixed the selector of the AlphaSlideBar is not working properly when we use selecyByHsv(color).

Added getAlpha() method for getting alpha value from the selected color.

Source code(tar.gz)
Source code(zip)
colorpickerview-2.2.0.aar(82.87 KB)
2.1.9(Aug 22, 2020)
🎉 Released a new version 2.1.9! 🎉

What's New?

Added a palette drawable ColorHsvPalette. ColorHsvPalette is a default drawable palette built by HSV (hue, saturation, value) color model for alternating representations of the RGB color model. If we don't set a custom palette drawable, the default palette will be the ColorHsvPalette.

Added selectByHsvColor(@ColorInt color) and selecyByHsvRes(@ColorRes resource) for selecting and moving the selector by a specific color.

Added setHsvPaletteDrawable() method for setting the palette to the ColorHsvPalette. This method can be used for changing as ColorHsvPalette from another palette drawable.

Added the BubbleFlag flag in library, so we can implement a bubble type FlagView fastly.

The selector was clipped at the end of the ColorPickerView, but now it is not clipped at the end of the view.

BubbleFlag bubbleFlag = new BubbleFlag(this); bubbleFlag.setFlagMode(FlagMode.FADE); colorPickerView.setFlagView(bubbleFlag);
Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.9.aar(81.46 KB)
2.1.8(Aug 16, 2020)
🎉 Released a new version 2.1.8! 🎉

What's New?

Support vector drawable as a selectors image in ColorPickerView, AlphaSlideBar, BrightnessSlideBar.

Updated compile SDK version to 30.

Added selector_size attribute for resizing the selector's size.

Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.8.aar(338.00 KB)
2.1.7(Jul 11, 2020)
🎉 Released a new version 2.1.7! 🎉

What's New?

Fixed debouncing internal logics.

Changed to override create() function instead of show() in the ColorPickerDialog.

Used ViewBinding instread of findViewById for reducing overhead.

Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.7.aar(337.07 KB)
2.1.6(Dec 14, 2019)

Implement debounce.

debounce

Only emit a color to the listener if a particular timespan has passed without it emitting using the debounceDuration attribute. We can set the debounceDuration on our xml layout file.
Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.6.aar(338.59 KB)
v2.1.5(Jun 14, 2019)
fixed selelcyByHsv method

restoring saved data ways

Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.5.aar(337.44 KB)
v2.1.4(May 29, 2019)
fixed setSelectorPoint working incorrectly.

what methods affected?

setSelectorPoint()

selectCenter()

selectByHsv()

Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.4.aar(600.47 KB)
v2.1.3(Mar 29, 2019)
fixed AlphaSliderBar initialize view size after rotating device

Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.3.aar(600.62 KB)
v2.1.2(Mar 28, 2019)
modified saving preference with null type check

FlagMode.Fade for flagView’s fadeIn-fadeOut effects

refactor PointMapper object creating an instance

Source code(tar.gz)
Source code(zip)
v2.1.1(Mar 3, 2019)

Mapping a transparent field tapped by a user approximately.
Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.1.aar(598.94 KB)
v2.1.0(Jan 25, 2019)
Saving and Restoring ColorPickerView & ColorPickerDialog data

ColorPickerPreferenceManager

Saving automatically by lifecycleOwner

Source code(tar.gz)
Source code(zip)
colorpickerview-2.1.0-javadoc.jar(261 bytes)
colorpickerview-2.1.0.aar(173.00 KB)
v2.0.3(Jan 19, 2019)

Source code(tar.gz)
Source code(zip)
colorpickerview-2.0.3-javadoc.jar(261 bytes)
colorpickerview-2.0.3.aar(168.08 KB)
v2.0.2(Jan 18, 2019)

Source code(tar.gz)
Source code(zip)
colorpickerview-2.0.2-javadoc.jar(261 bytes)
colorpickerview-2.0.2.aar(149.95 KB)
v2.0.1(Sep 26, 2018)

Fixed API 28 width bug
Source code(tar.gz)
Source code(zip)
v2.0.0(Sep 11, 2018)
What's new in v2.0.0!

AlphaSlideBar

BrightnessSlideBar

ColorPickerDialog

FlagView

AlphaTileView

Source code(tar.gz)
Source code(zip)