Skip to content

Simple, maintained and highly customizable colorpicker library for Android.

License

Notifications You must be signed in to change notification settings

mrudultora/Colorpicker

Repository files navigation

Colorpicker Library for Android

Simple, maintained and highly customizable color picker library for Android. It is packed with ColorPicker Popup, Colorpicker dialogs and ColorPicker BottomSheet dialogs. ColorPicker Popup supports alpha and uses HSV (behind the scene) and allows you to set your defaults. It supports Dark Mode and Material Theme and uses AndroidX. 🎨

Android Build License API Donate Javadoc

Highlights

• ColorPicker Popup (comes with ColorPickerView) to pick colors using Hue, Saturation and Value (HSV).
• ColorPicker AlertDialogs to choose color from the list of colors.
• ColorPicker BottomSheetDialogs to choose color from the list of colors.
• Supports Dark Mode as well as Landscape Orientation.

Demo

ColorPicker Dialogs ColorPicker Popup
ColorPicker Dialogs ColorPicker Dialogs

Gradle

Add it in your root build.gradle at the end of repositories:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Now add the following dependency in your app's build.gradle

dependencies {
        implementation 'com.github.mrudultora:Colorpicker:1.2.0'
}

Usage

This library comes with three types of dialogs. These are as follows:

• ColorPickerPopUp

ColorPickerPopUp colorPickerPopUp = new ColorPickerPopUp(context);	// Pass the context.
        colorPickerPopUp.setShowAlpha(true)			// By default show alpha is true.
                .setDefaultColor(defaultColor)			// By default red color is set.
                .setDialogTitle("Pick a Color")
                .setOnPickColorListener(new ColorPickerPopUp.OnPickColorListener() {
                    @Override
                    public void onColorPicked(int color) {
                          // handle the use of color
                    }
                    
                    @Override
                    public void onCancel() {
                        colorPickerPopUp.dismissDialog();	// Dismiss the dialog.
                    }
                })
		.show();

• ColorPickerDialog

ColorPickerDialog colorPickerDialog = new ColorPickerDialog(context);   // Pass the context.
        colorPickerDialog.setColors()					
                .setColumns(4)                        		// Default number of columns is 5.
                .setDefaultSelectedColor(defaultColor)		// By default no color is used.
                .setColorItemShape(ColorItemShape.CIRCLE)		
                .setOnSelectColorListener(new OnSelectColorListener() {
                    @Override
                    public void onColorSelected(int color, int position) {
                        // handle color or position
                    }

                    @Override
                    public void cancel() {
                        colorPickerDialog.dismissDialog();	// Dismiss the dialog.
                    }
                })
		.show();

• ColorPickerBottomSheetDialog

ColorPickerBottomSheetDialog bottomSheetDialog = new ColorPickerBottomSheetDialog(context); 
        bottomSheetDialog.setColumns(6) 				  	
                .setColors()                                  // Default colors list is used.
                .setDefaultSelectedColor(defaultColor)		  
                .setColorItemShape(ColorItemShape.CIRCLE)     // Default shape is SQUARE             
                .setOnSelectColorListener(new OnSelectColorListener() {
                    @Override
                    public void onColorSelected(int color, int position) {
                        // handle color or position
                    }

                    @Override
                    public void cancel() {
                        bottomSheetDialog.dismissDialog();     // Dismiss the dialog.
                    }
                })
		.show();

Customization🎨

• You can change the text of Title, Positive and Negative Buttons directly from the strings.xml by adding following parameters.

<resources>
    <!-- Strings related to dialog box -->
    <string name="dialog_title">Choose Color</string>
    <string name="dialog_positive_button_text">@android:string/ok</string>
    <string name="dialog_negative_button_text">@android:string/cancel</string>
</resources>

• There are 3 ways to pass the list of colors in setColors method. If no parameter is passed, then 15 default colors array would be used on calling setColors().

ColorPickerDialog colorPickerDialog = new ColorPickerDialog(context);   // Pass the context.
        colorPickerDialog
	
	// Option 1: Pass the resource id of array
	.setColors(R.array.array_colors)
	
	//Option 2: Pass the arraylist of HEX colors in String format.
	.setColors(new ArrayList<>(Arrays.asList("#95afc0", "#ff7979", "#ffbe76", "#7ed6df", "#badc58")))
	
	// Option 3: Pass any number of colors in int format.
	.setColors(Color.RED, Color.BLUE, Color.GREEN, Color.BLACK, Color.YELLOW,Color.CYAN,Color.MAGENTA)
	
	// Option 4: Use Predefined 15 colors array.
	.setColors()
	.setOnDirectSelectColorListener(new OnDirectSelectColorListener() {
                    @Override
                    public void onDirectColorSelected(int color, int position) {
                        
                    }
                })
	.show();

The array of 15 different default colors is as following. You can define your own in similar way.

<!-- Array of default colors -->
    <array name="default_colors">
	    
        <item>#f44236</item>
        <item>#ea1e63</item>
        <item>#9a28b1</item>
        <item>#683ab7</item>
        <item>#2F4FE3</item>
	    
        <item>#2295f0</item>
        <item>#04a8f5</item>
        <item>#00bed2</item>
        <item>#009788</item>
        <item>#4cb050</item>
	    
        <item>#ff9700</item>
        <item>#FFC000</item>
        <item>#D2E41D</item>
        <item>#fe5722</item>
        <item>#795547</item>	  
    </array>

• You have options to choose from two types of listeners in case of dialogs. They are OnSelectColorListener and OnDirectSelectColorListener. First one works normally and is fired on pressing the buttons of dialog box. On setting the second one, i.e, OnDirectSelectColorListener, it will be fired as soon as any color is selected. If this is set in dialog then the positive and negative buttons would be hided (See the demo videos for more clear view on this).

• You can change tick color (by default it would be white) on all the items in color palette of dialogs. This library also supports to change the tick color for some particular color items. This can be achieved as below:

ColorPickerBottomSheetDialog bottomSheetDialog = new ColorPickerBottomSheetDialog(getActivity());
        bottomSheetDialog.setColors()
	
	// Option 1: Set tick colors for all the items
	.setTickColor(Color.BLUE)
	
	// Option 2: Set tick color for some particular items. 
	.setTickColor(Color.YELLOW, Color.parseColor("#f44236"), Color.parseColor("#ff9700"),
			Color.parseColor("#4cb050"))
	.show();

• You can change shape of items in color palette. The library provides Square and Circle in-built. For other shapes, you can pass the drawable for that shape.

ColorPickerDialog colorPickerDialog = new ColorPickerDialog(getActivity());  // context
        colorPickerDialog.setColors()
	
	// Star would be used as a color item in palette. Any drawable is allowed.
        .setColorItemDrawable(R.drawable.ic_baseline_star_24)   
	
	.show();

• You can change the size of color item of palette. Also, the size of tick can be changed. This can be achieved as below:

ColorPickerDialog colorPickerDialog = new ColorPickerDialog(getActivity());  // context
        colorPickerDialog.setColors()
	
	// Set tick dimensions in dp (same for height and width). Default is 24dp. 
	.setTickDimenInDp(20)
	
	// Set the color item dimensions in dp (). Default is 45dp.
	.setColorItemDimenInDp(48)
	
	.show();

• ColorPicker Popup also suppports similar features. You can pass the default color (with or without alpha). You can remove the support of alpha from the dialog box. It uses different layout for landscape, so you don't have to care about the UI look in landscape.

• Now, apart from these there are many other methods too. Some of the methods in which you are trying to get something from layout (for ex. getPositiveButton()), must be called after show() method. This is because these classes are wrapper over Android's AlertDialog class. So, some basic methods work similar to it and may throw NullPointerException.

ColorPicker methods

Remember to call getter methods after show() is called to avoid NullPointerException.

Methods Return Description
getDialog() Dialog Get dialog for more control over it. This method may throw NullPointerException if the dialog box is not showing on screen.
getDialogView() View Get the view inflated in dialog box.
getDialogBaseLayout() RelativeLayout Get the base/parent layout of dialog view for more customizations.
dismissDialog() void Dismiss the dialog if it's visible on screen.
setColorItemDimenInDp(int dimen) this Sets the height and width of color items in palette in dp. Default Value is 45dp
setTickDimenInDp(int dimen) this Sets the tick mark size in dp. Default value is 24dp.
getDialogTitle() TextView Get the dialog title for customising it. This method may throw NullPointerException if the dialog box is not showing on screen.
getNegativeButton() Button Get the negative button from dialog box. This method may throw NullPointerException if the dialog box is not showing on screen.
getPositiveButton() Button Get the positive button from dialog box. This method may throw NullPointerException if the dialog box is not showing on screen.
setColorItemShape(ColorItemShape colorShape) this Set the shape of color item. SQUARE and CIRCLE are the two shapes available. By default, SQUARE would be selected.
setColorItemDrawable() this Sets the drawable of item in color palette (for any shape other than square and circle are also allowed).
setColumns(int columns) this Set the value of columns. This value would be used in spanCount of GridLayoutManager.
setDefaultSelectedColor(int defaultColor) this Sets the default color when dialog box pops up. Tick mark would have a default color.
setTickColor(int tickColor) this Sets the color of tick mark on item in color palette. Default color is white.
setTickColor(int tickColor, int... colorItems) this Sets the color of tick mark on particular items in color palette. These items would have the color passed in this method. Default color is white.
setDialogTitle(String title) this Sets the title of dialog box. Default title is "Choose Color".
setPositiveButtonText(String positiveText) this Sets the Positive button text of dialog box. Default text is "Ok".
setNegativeButtonText(String negativeText) this Sets the Negative button text of dialog box. Default text is "Cancel".
setShowAlpha(boolean showAlpha) ColorPickerPopUp Sets whether to show Alpha Channel or not.
setDefaultColor(int defaultColor) ColorPickerPopUp Sets the default color in ColorPickerView, Hue and Alpha (if enabled).
show() void Shows the dialog box on screen.

For more info regarding these methods, have a look at the javadoc.

Let us Know

It would be great if any of your apps uses this library. Please, do let me know about it on [email protected]. The list of the apps using this library would be updated soon. Your views, suggestions and feedbacks are welcomed. Also, feel free to open issues or contributing to this library.

Apps Using this Library

  1. Device Info : View Hardware and Software Info (50K+ Downloads on Google Play Store) (Visit)
  2. Chemistry Notes Offline (100K+ Downloads on Google Play Store) (Visit)

Find this library useful? ❤️

Support it by starring this repository and joining stargazers for this repository. ⭐
And follow me for more such libraries! 🤩

License

Copyright 2021 mrudultora (Mrudul Tora)

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.