- Notifications
You must be signed in to change notification settings - Fork220
🎨 Android colorpicker for getting colors from any images by tapping on the desired color.
License
skydoves/ColorPickerView
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🎨 ColorPickerView enables you to obtain HSV colors, ARGB values, and Hex color codes from image drawables or your gallery pictures with a simple tap on the desired color. It offers additional features such as alpha and brightness slider bars, dialog support, and the ability to save and restore selected data.
If you're looking to implement a color picker in your Compose project, you can usecolorpicker-compose instead.
Add the dependency below to your module'sbuild.gradle file:
dependencies { implementation"com.github.skydoves:colorpickerview:2.3.0"}
Snapshots of the current development version of ColorPickerView are available, which trackthe latest versions.
repositories { maven { url'https://oss.sonatype.org/content/repositories/snapshots/' }}
- ColorPickerView in layout
- ColorListener
- Palette
- ActionMode
- Debounce
- Create using builder
- Restore and save state
- Palette from Gallery
2. AlphaSlideBar
3. BrightnessSlideBar
4. ColorPickerDialog
5. FlagView
6. AlphaTileView
7. ColorPickerView Methods
8. Other Libraries
Add following XML namespace inside your XML layout file.
xmlns:app="http://schemas.android.com/apk/res-auto"
You can simply useColorPickerView by defining it on your XML files. ThisColorPickerView will be initialized with the default HSV color palette and the default selector.
<com.skydoves.colorpickerview.ColorPickerViewandroid:id="@+id/colorPickerView"android:layout_width="300dp"android:layout_height="300dp"/>
You 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/colorpickerview_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 is triggered when a user taps theColorPickerView or when a position is selected using a function.
colorPickerView.setColorListener(newColorListener() {@OverridepublicvoidonColorSelected(intcolor,booleanfromUser) {LinearLayoutlinearLayout =findViewById(R.id.linearLayout);linearLayout.setBackgroundColor(color); }});
ColorEnvelope is a versatile wrapper class for color models, offering a wide range of color-related data. It provides access to HSV color values, Hex string codes, and ARGB values.
colorEnvelope.getColor()// returns a integer color.colorEnvelope.getHexCode()// returns a hex code string.colorEnvelope.getArgb()// returns a argb integer array.
ColorEnvelopeListener extendsColorListener and offersColorEnvelope as a parameter, granting access to a variety of color values.
colorPickerView.setColorListener(newColorEnvelopeListener() {@OverridepublicvoidonColorSelected(ColorEnvelopeenvelope,booleanfromUser) {linearLayout.setBackgroundColor(envelope.getColor());textView.setText("#" +envelope.getHexCode()); }});
If you do not set any custom palette, the default palette will be theColorHsvPalette.
You can manually select a specific point for the selector by specifying a particular color value using the following methods:
colorPickerView.selectByHsvColor(color);colorPickerView.selectByHsvColorRes(R.color.colorPrimary);
You can change the default palette as a desired image drawable using the method below:
colorPickerView.setPaletteDrawable(drawable);
If you wish to revert to the default HSV palette, you can do so using the method below:
colorPickerView.setHsvPaletteDrawable();
ActionMode is an option that restricts the invocation of the ColorListener based on user actions.
colorPickerView.setActionMode(ActionMode.LAST);// ColorListener will be invoked when the finger is released.
If you want to emit color values to the listener with a particular delay, you can utilizedebounceDuration attribute in your XML layout file:
app:debounceDuration="150"
Or you can set it programmatically.
colorPickerView.setDebounceDuration(150);
You can create an instance ofColorPickerView usingColorPickerView.Builder class like the example below:
ColorPickerViewcolorPickerView =newColorPickerView.Builder(context) .setColorListener(colorListener) .setPreferenceName("MyColorPicker"); .setActionMode(ActionMode.LAST) .setAlphaSlideBar(alphaSlideBar) .setBrightnessSlideBar(brightnessSlideBar) .setFlagView(newCustomFlag(context,R.layout.layout_flag)) .setPaletteDrawable(ContextCompat.getDrawable(context,R.drawable.palette)) .setSelectorDrawable(ContextCompat.getDrawable(context,R.drawable.selector)) .build();
You can define an initial color and position the selector and slide bars based on that initial color. Please note that this function is compatible only with the default HSV palette. Additionally, if you set a preference name using thesetPreferenceName method, this function will work only once.
app:initialColor="@color/colorPrimary"
Or you can use this method programmatically.
.setInitialColor(color);.setInitialColorRes(R.color.colorPrimary);
This is how to restore the state ofColorPickerView.setPreferenceName() method restores all of the saved states (selector, color) automatically.
colorPickerView.setPreferenceName("MyColorPicker");
This is how to save the states ofColorPickerView.
ThesetLifecycleOwner() method saves all of the states automatically when thelifecycleOwner is destroy.
colorPickerView.setLifecycleOwner(this);
Or you can save the states manually using the method below:
ColorPickerPreferenceManager.getInstance(this).saveColorPickerData(colorPickerView);
You can manipulate and clear the saved states usingColorPickerPreferenceManager.
ColorPickerPreferenceManagermanager =ColorPickerPreferenceManager.getInstance(this);manager.setColor("MyColorPicker",Color.RED);// manipulates the saved color data.manager.setSelectorPosition("MyColorPicker",newPoint(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.
Here is an example of how to get a bitmap drawable from the gallery image and set it to the palette.
Declare the permission below on yourAndroidManifest.xml file:
<uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/>
The codes below will start the Gallery and you can choose any desired images:
IntentphotoPickerIntent =newIntent(Intent.ACTION_PICK);photoPickerIntent.setType("image/*");startActivityForResult(photoPickerIntent,REQUEST_CODE_GALLERY);
In theonActivityResult, you can get a bitmap drawable from the gallery and set it as the palette. You can also change the palette image of theColorPickerView using thesetPaletteDrawable method.
try {finalUriimageUri =data.getData();finalInputStreamimageStream =getContentResolver().openInputStream(imageUri);finalBitmapselectedImage =BitmapFactory.decodeStream(imageStream);Drawabledrawable =newBitmapDrawable(getResources(),selectedImage);colorPickerView.setPaletteDrawable(drawable);}catch (FileNotFoundExceptione) {e.printStackTrace();}
AlphaSlideBar adjusts the transparency value of the selected color.
AlphaSlideBar in XML layout
<com.skydoves.colorpickerview.sliders.AlphaSlideBarandroid:id="@+id/alphaSlideBar"android:layout_width="match_parent"android:layout_height="wrap_content"app:selector_AlphaSlideBar="@drawable/colorpickerview_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.
You can attach and connect theAlphaSlideBar to yourColorPickerView using theattachAlphaSlider method.
AlphaSlideBaralphaSlideBar =findViewById(R.id.alphaSlideBar);colorPickerView.attachAlphaSlider(alphaSlideBar);
If you want to implement a vertical style of slides, you can achieve it with therotation attributes.
android:layout_width="280dp"// width must set a specific width size.android:layout_height="wrap_content"android:rotation="90"
BrightnessSlideBar adjusts the brightness of the selected color.
BrightnessSlideBar in XML layout
<com.skydoves.colorpickerview.sliders.BrightnessSlideBarandroid:id="@+id/brightnessSlide"android:layout_width="match_parent"android:layout_height="wrap_content"app:selector_BrightnessSlider="@drawable/colorpickerview_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.
You can attach and connect theBrightnessSlideBar to yourColorPickerView usingattachBrightnessSlider method.
BrightnessSlideBarbrightnessSlideBar =findViewById(R.id.brightnessSlide);colorPickerView.attachBrightnessSlider(brightnessSlideBar);
If you want to implement a vertical style of slides, you can achieve it with therotation attributes.
android:layout_width="280dp"// width must set a specific width size.android:layout_height="wrap_content"android:rotation="90"
ColorPickerDialog can be used just like an AlertDialog and it provides colors by tapping from any drawable.
newColorPickerDialog.Builder(this) .setTitle("ColorPicker Dialog") .setPreferenceName("MyColorPickerDialog") .setPositiveButton(getString(R.string.confirm),newColorEnvelopeListener() {@OverridepublicvoidonColorSelected(ColorEnvelopeenvelope,booleanfromUser) {setLayoutColor(envelope); } }) .setNegativeButton(getString(R.string.cancel),newDialogInterface.OnClickListener() {@OverridepublicvoidonClick(DialogInterfacedialogInterface,inti) {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();
You can get an instance ofColorPickerView from theColorPickerView.Builder and customize it by your preferences.
ColorPickerViewcolorPickerView =builder.getColorPickerView();colorPickerView.setFlagView(newCustomFlag(this,R.layout.layout_flag));// sets a custom flagViewbuilder.show();// shows the dialog
You can implement displayingFlagView over the selector.
This library providesBubbleFlagView by default as you can see in thepreviews.
Here is an example code for displaying a bubble flag view, which indicates what color value was selected.
BubbleFlagbubbleFlag =newBubbleFlag(this);bubbleFlag.setFlagMode(FlagMode.FADE);colorPickerView.setFlagView(bubbleFlag);
You can also fully customize theFlagView like the example below:
First, create a custom XML layout like the example below:
<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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"><com.skydoves.colorpickerview.AlphaTileViewandroid:id="@+id/flag_color_layout"android:layout_width="20dp"android:layout_height="20dp"android:layout_marginTop="6dp"android:layout_marginLeft="5dp"android:orientation="vertical"/><TextViewandroid: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>
Next, you should create a class that extendsFlagView:
publicclassCustomFlagextendsFlagView {privateTextViewtextView;privateAlphaTileViewalphaTileView;publicCustomFlag(Contextcontext,intlayout) {super(context,layout);textView =findViewById(R.id.flag_color_code);alphaTileView =findViewById(R.id.flag_color_layout); }@OverridepublicvoidonRefresh(ColorEnvelopecolorEnvelope) {textView.setText("#" +colorEnvelope.getHexCode());alphaTileView.setPaintColor(colorEnvelope.getColor()); }}
As you can see in the above code, you can observe and update the layout inside theonRefresh method. Lastly, set theFlagView to theColorPickerView using thesetFlagView method:
colorPickerView.setFlagView(newCustomFlag(this,R.layout.layout_flag));
FlagMode is an option to decides the visibility action of theFlagView.
colorPickerView.setFlagMode(FlagMode.ALWAYS);// showing always by tapping and dragging.colorPickerView.setFlagMode(FlagMode.LAST);// showing only when finger released.
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 theAlphaTileView.
<com.skydoves.colorpickerview.AlphaTileViewandroid:id="@+id/alphaTileView"android:layout_width="55dp"android:layout_height="55dp"app:tileSize="20"// the size of the repeating tileapp:tileEvenColor="@color/tile_even"// the color of even tilesapp:tileOddColor="@color/tile_odd"/>// the color of odd tiles
| Methods | Return | Description |
|---|---|---|
| getColor() | int | gets the last selected color. |
| getColorEnvelope() | ColorEnvelope | gets theColorEnvelope 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 | setsFlagView onColorPickerView. |
| attachAlphaSlider | void | linking anAlphaSlideBar on theColorPickerView. |
| attachBrightnessSlider | void | linking anBrightnessSlideBar on theColorPickerView. |
Here are other ColorPicker related libraries!
A library that let you implement ColorPickerView, ColorPickerDialog, ColorPickerPreference.
You can get colors using multi selectors.
Athere you can get a more specialized library on multi-coloring.
Support it by joiningstargazers for this repository. ⭐
Andfollow me for my next creations! 🤩
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.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.
About
🎨 Android colorpicker for getting colors from any images by tapping on the desired color.