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

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.


License API Build Status Codacy Android Weekly Javadoc


Including in your project

Maven Central Jitpack

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

ColorPickerView
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/'
   }
}

Table of Contents

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

dialog0 dialog1

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.
flag0 flag1

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
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.

screenshot1128436220

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

    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.

    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,

    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

    image

    opened by EmakefunAurora 9
  • selectByHsvColor() not working

    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

    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:

    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

    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

    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

    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.

    The color will flash when the touch point moves outside the color plate.

    • Library Version [v2.1.6]

    Describe the Bug:

    1. When the touch point moves inside the color plate, everything works normally.
    2. 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

    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

    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 01 08 2022_01 46 08_REC Color picker making black have max brightness 01 08 2022_01 16 45_REC Color picker making the same color I just picked have max brightness 01 08 2022_01 15 25_REC

    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

    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

    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

    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

    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.

    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)
Owner
Jaewoong Eum
Android software engineer. Digital Nomad. Open Source Contributor. ❤️ Love coffee, music, magic tricks and writing poems. Coffee Driven Development.
Jaewoong Eum
An Android Holo themed colorpicker designed by Marie Schweiz

Android Holo ColorPicker Marie Schweiz http://marie-schweiz.de/ made a beautifull new design for the Holo ColorPicker which added a lot of new functio

Lars Werkman 1.4k Dec 21, 2022
A great material designed colorpicker by Marie Schweiz

Lobsterpicker Designed by Marie Schweiz, Developed by Lars Werkman Lobsterpicker is a library for android material design made to support apps and dev

Lars Werkman 534 Sep 15, 2022
A color picker and a color preference for use in Android applications.

HSV-Alpha Color Picker for Android This library implements a color picker and a color preference for use in Android applications. Features I couldn't

Martin Stone 279 Nov 26, 2022
Android view that allows the user to create drawings. Customize settings like color, width or tools. Undo or redo actions. Zoom into DrawView and add a background.

DrawView Android view that allows the user to create drawings. Draw anything you like in your Android device from simple view. Customize draw settings

Oscar Gilberto Medina Cruz 839 Dec 28, 2022
SystemUiController - Android Ui color controller (status bar, navigation bar)

SystemUiController Android system ui color controller (status bar, navigation bar) Download implementation "land.sungbin:systemuicontroller:${version}

Ji Sungbin 8 Dec 3, 2022
A material Switch with icon animations and color transitions

Material Animated Switch A material Switch with icon animations and color transitions Sample video: Youtube Material Animated Switch video Sample app:

Adrián Lomas 1.2k Dec 29, 2022
Simple View to change Brush Size, Alpha and Color

BrushView Simple View to change Brush Size, Alpha and Color Screenshots How to install In your build.gradle project allprojects { repositories {

Andres Ruiz 16 Jun 28, 2018
A View on which you can freely draw, customizing paint width, alpha and color, and take a screenshot of the content. Useful for note apps, signatures or free hand writing.

FreeDrawView A View that let you draw freely on it. You can customize paint width, alpha and color. Can be useful for notes app, signatures or hands-f

Riccardo Moro 643 Nov 28, 2022
A color picker for Jetpack compose 🎨

Compose Color Picker ?? Color Picker for Jetpack compose A color picker for Jetpack compose ?? Download ?? Working on it ?? Usage ColorPicker { co

mhssn 12 Dec 8, 2022
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.

This project isn't maintained anymore. It is now recommended to use https://github.com/peterLaurence/MapView. MapView is maintained by Peter, one of o

Mike Dunn 1.5k Dec 29, 2022
[] A simple way to "badge" any given Android view at runtime without having to cater for it in layout

Android ViewBadger A simple way to "badge" any given Android view at runtime without having to cater for it in layout. Note: If your aim is to replica

Jeff Gilfelt 3k Nov 28, 2022
FogView is a android library that can show fog on any layout and the fog removes when user rubs it.

Fog View Android Library Min SDK 8 (Android 2.2–2.2.3 Froyo) Screnshots How to use If you want use this library, you can download project and import i

Chetan Kaushik 631 Dec 31, 2022
Helper class to make any view rotatable

Rotatable This is a helper class actually, it simplifies having a view as rotatable by setting touch events and handling a lot of boilerplate works! S

Yahya Bayramoğlu 300 Nov 11, 2022
Pop animation with circular dust effect for any view updation

Popview-Android Pop animation with circular dust effect for any view updation Getting Started In your build.gradle dependencies { compile 'rb.popv

R B Krishna 489 Dec 28, 2022
Overscroll any scrollable items!

ComposeOverscroll Overscroll any scrollable items! Preview compare with iOS demo Preview.for.overscroll.and.nested.invoke.mp4 How to use for column :

null 7 Dec 15, 2022
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Pedro Vicente Gómez Sánchez 3k Dec 6, 2022
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Txus Ballesteros 1.5k Jan 2, 2023
View that imitates Ripple Effect on click which was introduced in Android L (for Android 2.3+)

RippleView View that imitates Ripple Effect on click which was introduced in Android L. Usage For a working implementation, Have a look at the Sample

Muthuramakrishnan Viswanathan 1.2k Dec 30, 2022