ColorPicker

Additional

Language
Kotlin
Version
v2.0 (Dec 17, 2020)
Created
Dec 26, 2019
Updated
Jan 1, 2021
Owner
Dhaval Patel (Dhaval2404)
Contributors
Dhaval Patel (Dhaval2404)
Marc Auberer (marcauberer)
2
Activity
Badge
Generate
Download
Source code
APK file

Advertising

🎨Color Picker Library for Android

Built with ❤︎ by Dhaval Patel and contributors

Yet another Color Picker Library for Android. It is highly customizable and easy to use. Pick the color from wheel or select Material Colors from dialog. The original ColorPickerView was written by Hong Duan.



  • The ColorPicker configuration is created using the builder pattern.

    // Kotlin Code
    ColorPickerDialog
        .Builder(this)            // Pass Activity Instance
        .setTitle("Pick Theme")            // Default "Choose Color"
        .setColorShape(ColorShape.SQAURE)   // Default ColorShape.CIRCLE
        .setDefaultColor(mDefaultColor)     // Pass Default Color
        .setColorListener { color, colorHex ->
         // Handle Color Selection
        }
        .show()
    // Java Code
    new ColorPickerDialog
        .Builder(this)
        .setTitle("Pick Theme")
        .setColorShape(ColorShape.SQAURE)
        .setDefaultColor(mDefaultColor)
        .setColorListener(new ColorListener() {
            @Override
            public void onColorSelected(int color, @NotNull String colorHex) {
                // Handle Color Selection
            }
        })
        .show();
  • The MaterialColorPicker configuration is created using the builder pattern.

    // Kotlin Code
    MaterialColorPickerDialog
        .Builder(this)             // Pass Activity Instance
        .setTitle("Pick Theme")             // Default "Choose Color"
        .setColorShape(ColorShape.SQAURE)    // Default ColorShape.CIRCLE
        .setColorSwatch(ColorSwatch._300)    // Default ColorSwatch._500
        .setDefaultColor(mDefaultColor)   // Pass Default Color
        .setColorListener { color, colorHex ->
         // Handle Color Selection
        }
        .show()
    // Java Code
    new MaterialColorPickerDialog
        .Builder(this)
        .setTitle("Pick Theme")
        .setColorShape(ColorShape.SQAURE)
        .setColorSwatch(ColorSwatch._300)
        .setDefaultColor(mDefaultColor)
        .setColorListener(new ColorListener() {
            @Override
            public void onColorSelected(int color, @NotNull String colorHex) {
             // Handle Color Selection
            }
        })
        .show();
  • 🎨Customization

    • You can change the color or Positive and Negative Button Text Color. Add Following parameters in your colors.xml file.

      <resources>
          <!-- Here you can add color of your choice  -->
          <color name="positiveButtonTextColor">@color/colorAccent</color>
          <color name="negativeButtonTextColor">@color/colorAccent</color>
          <color name="bottomSheetDividerColor">#F5F5F5</color>
      </resources>
    • You can provide predefine colors for the MaterialColorPicker

      // Kotlin Code
      MaterialColorPickerDialog
         .Builder(activity!!)
      
         // Option 1: Pass Hex Color Codes
         //.setColors(arrayListOf("#f6e58d", "#ffbe76", "#ff7979", "#badc58", "#dff9fb", "#7ed6df", "#e056fd", "#686de0", "#30336b", "#95afc0"))
      
         // Option 2: Pass Hex Color Codes from string.xml
         //.setColors(resources.getStringArray(R.array.themeColorHex))
      
         // Option 3: Pass color array from colors.xml
         .setColorRes(resources.getIntArray(R.array.themeColors))
      
         .setColorListener { color, colorHex ->
           // Handle Color Selection
         }
         .show()
      // Java Code
      String[] colorArray = new String[]{"#f6e58d", "#ffbe76", "#ff7979",
          "#badc58", "#dff9fb", "#7ed6df", "#e056fd", "#686de0", "#30336b", "#95afc0"};
      
      new MaterialColorPickerDialog
          .Builder(requireActivity())
      
          // Option 1: Pass Hex Color Codes
          //.setColors(colorArray)
      
          // Option 2: Pass Hex Color Codes from string.xml
          //.setColors(getResources().getStringArray(R.array.themeColorHex))
      
          // Option 3: Pass color array from colors.xml
          .setColorRes(getResources().getIntArray(R.array.themeColors))
          
          .setColorListener(object : ColorListener {
              override fun onColorSelected(color: Int, colorHex: String) {
                  // Handle Color Selection
              }
          })
          .show();

      Where R.array.themeColors and R.array.themeColorHex are defined as below

      <array name="themeColors">
        <item>@color/green_500</item>
        <item>@color/blue_500</item>
        <item>@color/red_500</item>
        <item>@color/grey_500</item>
        <item>@color/orange_500</item>
      </array>
      
      <string-array name="themeColorHex">
        <item>#f6e58d</item>
        <item>#ffbe76</item>
        <item>#ff7979</item>
        <item>#badc58</item>
        <item>#dff9fb</item>
        <item>#7ed6df</item>
        <item>#e056fd</item>
        <item>#686de0</item>
        <item>#30336b</item>
        <item>#95afc0</item>
      </string-array>
    • You can set the Dismiss listener

      ColorPicker

      // Kotlin Code
       ColorPickerDialog
          .Builder(requireActivity())
          .setDismissListener {
              // Handle Dismiss Event
          }
          .show()
      // Java Code
      new ColorPickerDialog
          .Builder(this)
          .setDismissListener(new DismissListener() {
              @Override
              public void onDismiss() {
                  // Handle Dismiss Event
              }
          })
          .show();

      MaterialColorPicker

      // Kotlin Code
      MaterialColorPickerDialog
          .Builder(this)
          .setDismissListener {
              // Handle Dismiss Event
          }
          .show()
      // Java Code
      new MaterialColorPickerDialog
          .Builder(this)
          .setDismissListener(new DismissListener() {
              @Override
              public void onDismiss() {
                  // Handle Dismiss Event
              }
          })
          .show();
    • You can set the Tick color for each card. This will come handy when color list include black or white colors. By default tick color will be either black or white based on the color darkness. If more dark colors the tick color will be white else black.

       // Kotlin Code
       MaterialColorPickerDialog
           .Builder(this)
           .setTickColorPerCard(true)     // Default will be false
           .show()
       // Java Code
       new MaterialColorPickerDialog
           .Builder(this)
           .setTickColorPerCard(true)     // Default will be false
           .show();

    💥Compatibility

    • Library - Android Lollipop 5.0+ (API 21)
    • Sample - Android Lollipop 5.0+ (API 21)

    ✔️Changelog

    Version: 2.0

    • Added Java compatibility #8
    • Added option to set tick color per color card #12
    • Added dialog dismiss listener #13

    Version: 1.2

    • Added Dark mode support & German translation #4

    Version: 1.1

    • Added option to change positive and negative button text color #2

    Version: 1.0

    • Initial Build

    📃 Libraries Used

    🌟 Credits

    Let us know!

    We'll be really happy if you sent us links to your projects where you use our component. Just send an email to dhavalpatel244@gmail.com And do let us know if you have any questions or suggestion regarding the library.

    License

    Copyright 2020, Dhaval Patel
    
    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.