🎨 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.
Add below codes to your rootbuild.gradle file (not your module build.gradle file).
allprojects{repositories{jcenter() } }And add below dependency code to your module's build.gradle file.
dependencies{implementation "com.github.skydoves:colorpickerview:2.1.7" }
- ColorPickerView in layout
- ColorListener
- ActionMode
- Debounce
- Create using builder
- Restore and save
- Pallette 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"<com.skydoves.colorpickerview.ColorPickerViewandroid:id="@+id/colorPickerView"android:layout_width="300dp"android:layout_height="300dp"app:palette="@drawable/palette"app:selector="@drawable/wheel"/>app:palette="@drawable/palette"// sets palette image.app:selector="@drawable/wheel"// sets selector image.app:alpha_selector="0.8"// sets selector's alpha.app:alpha_flag="0.8"// sets flag's alpha.app:actionMode="last"// sets action mode "always" or "last".app:preferenceName="MyColorPicker"// sets preference name.ColorListener is invoked whenever tapped by a user or selecting position manually.
colorPickerView.setColorListener(newColorListener(){@OverridepublicvoidonColorSelected(intcolor, booleanfromUser){LinearLayoutlinearLayout = findViewById(R.id.linearLayout); linearLayout.setBackgroundColor(color)} });ColorEnvelopeListener provides hsv color, hex code, argb by ColorEnvelope.
colorPickerView.setColorListener(newColorEnvelopeListener(){@OverridepublicvoidonColorSelected(ColorEnvelopeenvelope, booleanfromUser){linearLayout.setBackgroundColor(envelope.getColor()); textView.setText("#" + envelope.getHexCode())} });ColorEnvelope is a wrapper class of colors for provide various forms of color.
colorEnvelope.getColor() // returns a integer color.colorEnvelope.getHexCode() // returns a hex code string.colorEnvelope.getArgb() // returns a argb integer array.ActionMode controls an action about ColorListener invoking.
colorPickerView.setActionMode(ActionMode.LAST); // the listener will be invoked only when finger released.Only emit a color 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);This is how to create ColorPickerView's instance using ColorPickerView.Builder class.
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();This is how to restore the status for ColorPickerView.
Using setPreferenceName() method restores all of the saved statuses automatically.
colorPickerView.setPreferenceName("MyColorPicker");This is how to save the status for ColorPickerView.
Using setLifecycleOwner() method saves all of the statuses when the lifecycleOwner's destroy automatically.
colorPickerView.setLifecycleOwner(this); // this means activity or fragment.Or we can save the status manually regardless lifecycle using below method.
ColorPickerPreferenceManager.getInstance(this).saveColorPickerData(colorPickerView);We can manipulate and clear the saved statuses using ColorPickerPreferenceManager.
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 statuses.manager.clearSavedColor("MyColorPicker"); // clears only saved color data. manager.restoreColorPickerData(colorPickerView); // restores the saved statuses manually.Here is how to get bitmap drawable from the desired gallery image and set to the palette.
Firstly, declare below permission on your AndroidManifest.xml file.
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>startActivityForResult for getting an image from the Gallery.
IntentphotoPickerIntent = newIntent(Intent.ACTION_PICK); photoPickerIntent.setType("image/*"); startActivityForResult(photoPickerIntent, REQUEST_CODE_GALLERY);On the onActivityResult, we can get a bitmap drawable from the gallery and set it as the palette.
try{finalUriimageUri = data.getData(); finalInputStreamimageStream = getContentResolver().openInputStream(imageUri); finalBitmapselectedImage = BitmapFactory.decodeStream(imageStream); Drawabledrawable = newBitmapDrawable(getResources(), selectedImage); colorPickerView.setPaletteDrawable(drawable)} catch (FileNotFoundExceptione){e.printStackTrace()}AlphaSlideBar changes the transparency of the selected color. 
AlphaSlideBar on xml layout
<com.skydoves.colorpickerview.sliders.AlphaSlideBarandroid:id="@+id/alphaSlideBar"android:layout_width="match_parent"android:layout_height="wrap_content"app:selector_AlphaSlideBar="@drawable/wheel"// sets the selector drawable.app:borderColor_AlphaSlideBar="@android:color/darker_gray"// sets the border color.app:borderSize_AlphaSlideBar="5"/> // sets the border size.attachAlphaSlider method connects slider to the ColorPickerView.
AlphaSlideBaralphaSlideBar = findViewById(R.id.alphaSlideBar); colorPickerView.attachAlphaSlider(alphaSlideBar);If you want to implement vertically, use below attributes.
android:layout_width="280dp"// width should be set manuallyandroid:layout_height="wrap_content"android:rotation="90"BrightnessSlideBar changes the brightness of the selected color. 
BrightnessSlideBar on xml layout
<com.skydoves.colorpickerview.sliders.BrightnessSlideBarandroid:id="@+id/brightnessSlide"android:layout_width="match_parent"android:layout_height="wrap_content"app:selector_BrightnessSlider="@drawable/wheel"// sets the selector drawable.app:borderColor_BrightnessSlider="@android:color/darker_gray"// sets the border color.app:borderSize_BrightnessSlider="5"/> // sets the border size.attachBrightnessSlider method connects slider to the ColorPickerView.
BrightnessSlideBarbrightnessSlideBar = findViewById(R.id.brightnessSlide); colorPickerView.attachBrightnessSlider(brightnessSlideBar);If you want to implement vertically, use below attributes.
android:layout_width="280dp"// width should be set manuallyandroid:layout_height="wrap_content"android:rotation="90"
ColorPickerDialog can be used just like using AlertDialog and provides colors from any drawables.
ColorPickerDialog extends AlertDialog. So we can customize themes also.
newColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK) .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) // default is true. If false, do not show the AlphaSlideBar. .attachBrightnessSlideBar(true) // default is true. If false, do not show the BrightnessSlideBar. .show();If you need to customize the ColorpickerView on the dialog, you can get the instance of ColorPickerView from the ColorpickerView.Builder. but it should be done before shows dialog using show() method.
ColorPickerViewcolorPickerView = builder.getColorPickerView(); colorPickerView.setFlagView(newCustomFlag(this, R.layout.layout_flag)); // sets a custom flagViewbuilder.show(); // shows the dialog
FlgaView implements showing a flag above a selector. This is optional.
First, create a layout for FlagView as your taste like 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"><LinearLayoutandroid: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>Second, create a custom class extending FlagView. This is an example code.
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())} }The last, set FlagView on the ColorPickerView using setFlagView method.
colorPickerView.setFlagView(newCustomFlag(this, R.layout.layout_flag));FlagMode decides the FlagView's visibility action.
colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always by tapping and dragging.colorPickerView.setFlagMode(FlagMode.LAST); // showing only when finger released.
AlphaTileView visualizes ARGB color on the view. If you want to visualizes ARGB color on the general view, it will not be shown accurately. because it will be mixed with the parent view's background color. so if you want to visualize ARGB color accurately, should use AlphaTileView.
<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 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. |
| selectCenter() | void | selects the center of the palette manually. |
| 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 ColorPicker libraries are released!
A library that let you implement ColorPickerView, ColorPickerDialog, ColorPickerPreference.
You can get colors using multi selectors.
At here you can get a more specialized library on multi-coloring.
Support it by joining stargazers for this repository. ⭐
And follow me for my next creations! 🤩
Copyright 2017 skydoves 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.