{"id":13350510,"url":"https://github.com/skydoves/ColorPickerView","last_synced_at":"2025-03-12T09:32:50.622Z","repository":{"id":18354248,"uuid":"84079834","full_name":"skydoves/ColorPickerView","owner":"skydoves","description":"🎨 Android colorpicker for getting colors from any images by tapping on the desired color.","archived":false,"fork":false,"pushed_at":"2024-09-09T18:24:31.000Z","size":23969,"stargazers_count":1629,"open_issues_count":25,"forks_count":219,"subscribers_count":26,"default_branch":"main","last_synced_at":"2025-02-27T12:14:36.849Z","etag":null,"topics":["android","android-library","android-ui","argb","color-picker","colorpicker","colorpickerdialog","colorpickerview","skydoves"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skydoves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"skydoves","custom":["https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"]}},"created_at":"2017-03-06T14:01:27.000Z","updated_at":"2025-02-26T06:00:02.000Z","dependencies_parsed_at":"2023-10-02T04:44:07.273Z","dependency_job_id":"819fee63-f90a-40c4-8030-2fc69191b985","html_url":"https://github.com/skydoves/ColorPickerView","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FColorPickerView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FColorPickerView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FColorPickerView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FColorPickerView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skydoves","download_url":"https://codeload.github.com/skydoves/ColorPickerView/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243191637,"owners_count":20251089,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","android-ui","argb","color-picker","colorpicker","colorpickerdialog","colorpickerview","skydoves"],"created_at":"2024-07-29T20:02:33.467Z","updated_at":"2025-03-12T09:32:49.342Z","avatar_url":"https://github.com/skydoves.png","language":"Java","readme":"\u003ch1 align=\"center\"\u003eColorPickerView\u003c/h1\u003e\u003c/br\u003e\n\u003cp align=\"center\"\u003e\n🎨 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.\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://devlibrary.withgoogle.com/products/android/repos/skydoves-colorpickerview\"\u003e\u003cimg alt=\"Google\" src=\"https://skydoves.github.io/badges/google-devlib.svg\"/\u003e\u003c/a\u003e\u003cbr\u003e\n  \u003ca href=\"https://opensource.org/licenses/Apache-2.0\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://android-arsenal.com/api?level=15\"\u003e\u003cimg alt=\"API\" src=\"https://img.shields.io/badge/API-15%2B-brightgreen.svg?style=flat\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves/ColorPickerView/actions\"\u003e\u003cimg alt=\"Build Status\" src=\"https://github.com/skydoves/ColorPickerView/workflows/Android%20CI/badge.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://androidweekly.net/issues/issue-316\"\u003e\u003cimg alt=\"Android Weekly\" src=\"https://skydoves.github.io/badges/android-weekly.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://skydoves.github.io/libraries/colorpickerview/javadoc/\"\u003e\u003cimg alt=\"Javadoc\" src=\"https://skydoves.github.io/badges/javadoc-colorpicker.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e \u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/art/art0.gif\" width=\"31%\"/\u003e\n\u003cimg src=\"/art/art1.gif\" width=\"31%\"/\u003e\n\u003c/p\u003e\n\n## ColorPicker Compose\n\nIf you're looking to implement a color picker in your Compose project, you can use [colorpicker-compose](https://github.com/skydoves/colorpicker-compose) instead.\n\n## Including in your project \n[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/colorpickerview.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22colorpickerview%22)\n\n### Gradle \n\nAdd the dependency below to your module's `build.gradle` file:\n\n```gradle\ndependencies {\n    implementation \"com.github.skydoves:colorpickerview:2.3.0\"\n}\n```\n\n## SNAPSHOT \n[![ColorPickerView](https://img.shields.io/static/v1?label=snapshot\u0026message=ColorPickerView\u0026logo=apache%20maven\u0026color=C71A36)](https://oss.sonatype.org/content/repositories/snapshots/com/github/skydoves/colorpickerview/) \u003cbr\u003e\nSnapshots of the current development version of ColorPickerView are available, which track [the latest versions](https://oss.sonatype.org/content/repositories/snapshots/com/github/skydoves/colorpickerview/).\n\n```Gradle\nrepositories {\n   maven {\n     url 'https://oss.sonatype.org/content/repositories/snapshots/'\n   }\n}\n```\n\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/53681606-38f75000-3d2f-11e9-8586-848d638f23b1.gif\" align=\"right\" width=\"30%\"\u003e\n\n## Table of Contents\n#### [1. ColorPickerView](https://github.com/skydoves/ColorPickerView#usage)\n- [ColorPickerView in layout](https://github.com/skydoves/ColorPickerView#colorpickerview-in-xml-layout)\n- [ColorListener](https://github.com/skydoves/ColorPickerView#colorlistener)\n- [Palette](https://github.com/skydoves/ColorPickerView#palette)\n- [ActionMode](https://github.com/skydoves/ColorPickerView#actionmode)\n- [Debounce](https://github.com/skydoves/ColorPickerView#debounce)\n- [Create using builder](https://github.com/skydoves/ColorPickerView#create-using-builder)\n- [Restore and save state](https://github.com/skydoves/ColorPickerView#restore-and-save)\n- [Palette from Gallery](https://github.com/skydoves/ColorPickerView#palette-from-gallery) \u003cbr\u003e\n\n__[2. AlphaSlideBar](https://github.com/skydoves/ColorPickerView#alphaslidebar)__ \u003cbr\u003e\n__[3. BrightnessSlideBar](https://github.com/skydoves/ColorPickerView#brightnessslidebar)__\u003cbr\u003e\n__[4. ColorPickerDialog](https://github.com/skydoves/ColorPickerView#colorpickerdialog)__ \u003cbr\u003e\n__[5. FlagView](https://github.com/skydoves/ColorPickerView#flagview)__ \u003cbr\u003e\n__[6. AlphaTileView](https://github.com/skydoves/ColorPickerView#alphatileview)__ \u003cbr\u003e\n__[7. ColorPickerView Methods](https://github.com/skydoves/ColorPickerView#colorpickerview-methods)__ \u003cbr\u003e\n__[8. Other Libraries](https://github.com/skydoves/ColorPickerView#other-libraries)__ \u003cbr\u003e\n\n## Usage\nAdd following XML namespace inside your XML layout file.\n\n```gradle\nxmlns:app=\"http://schemas.android.com/apk/res-auto\"\n```\n\n### ColorPickerView in XML layout\n\nYou can simply use `ColorPickerView` by defining it on your XML files. This `ColorPickerView` will be initialized with the default HSV color palette and the default selector.\n\n```gradle\n\u003ccom.skydoves.colorpickerview.ColorPickerView\n   android:id=\"@+id/colorPickerView\"\n   android:layout_width=\"300dp\"\n   android:layout_height=\"300dp\" /\u003e\n```\n\n### Attributes\n\nYou can customize the palette image and selector or various options using the below attributes:\n\n```gradle\napp:palette=\"@drawable/palette\" // sets a custom palette image.\napp:selector=\"@drawable/colorpickerview_wheel\" // sets a custom selector image.\napp:selector_size=\"32dp\" // sets a width \u0026 height size of the selector.\napp:alpha_selector=\"0.8\" // sets an alpha of thr selector.\napp:alpha_flag=\"0.8\" // sets an alpha of the flag.\napp:actionMode=\"last\" // sets action mode 'always' or 'last'.\n// set an initial position of the selector using a specific color. This attribute will work with only a default HSV palette.\napp:initialColor=\"@color/colorPrimary\"\napp:preferenceName=\"MyColorPicker\" // sets a preference name.\napp:debounceDuration=\"200\" // sets a debounce duration of the invoking color listener.\n```\n\n### ColorListener\n`ColorListener` is triggered when a user taps the `ColorPickerView` or when a position is selected using a function.\n\n```java\ncolorPickerView.setColorListener(new ColorListener() {\n    @Override\n    public void onColorSelected(int color, boolean fromUser) {\n        LinearLayout linearLayout = findViewById(R.id.linearLayout);\n        linearLayout.setBackgroundColor(color);\n    }\n});\n```\n\n### ColorEnvelope\n`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.\n\n```java\ncolorEnvelope.getColor() // returns a integer color.\ncolorEnvelope.getHexCode() // returns a hex code string.\ncolorEnvelope.getArgb() // returns a argb integer array.\n```\n\n### ColorEnvelope Listener\n`ColorEnvelopeListener` extends `ColorListener` and offers `ColorEnvelope` as a parameter, granting access to a variety of color values.\n\n```java\ncolorPickerView.setColorListener(new ColorEnvelopeListener() {\n    @Override\n    public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {\n        linearLayout.setBackgroundColor(envelope.getColor());\n        textView.setText(\"#\" + envelope.getHexCode());\n    }\n});\n```\n\n### Palette\nIf you do not set any custom palette, the default palette will be the `ColorHsvPalette`.\u003cbr\u003e\nYou can manually select a specific point for the selector by specifying a particular color value using the following methods:\n\n```java\ncolorPickerView.selectByHsvColor(color);\ncolorPickerView.selectByHsvColorRes(R.color.colorPrimary);\n```\n\nYou can change the default palette as a desired image drawable using the method below:\u003cbr\u003e\n\n```java\ncolorPickerView.setPaletteDrawable(drawable);\n```\n\nIf you wish to revert to the default HSV palette, you can do so using the method below:\n\n```java\ncolorPickerView.setHsvPaletteDrawable();\n```\n\n### ActionMode\n\n`ActionMode` is an option that restricts the invocation of the ColorListener based on user actions.\n\n```java\ncolorPickerView.setActionMode(ActionMode.LAST); // ColorListener will be invoked when the finger is released.\n```\n\n### Debounce\n\nIf you want to emit color values to the listener with a particular delay, you can utilize `debounceDuration` attribute in your XML layout file:\n\n```xml\napp:debounceDuration=\"150\"\n```\n\nOr you can set it programmatically.\n\n```java\ncolorPickerView.setDebounceDuration(150);\n```\n\n### Create using builder\n\nYou can create an instance of `ColorPickerView` using `ColorPickerView.Builder` class like the example below:\n\n```java\nColorPickerView colorPickerView = new ColorPickerView.Builder(context)\n      .setColorListener(colorListener)\n      .setPreferenceName(\"MyColorPicker\");\n      .setActionMode(ActionMode.LAST)\n      .setAlphaSlideBar(alphaSlideBar)\n      .setBrightnessSlideBar(brightnessSlideBar)\n      .setFlagView(new CustomFlag(context, R.layout.layout_flag))\n      .setPaletteDrawable(ContextCompat.getDrawable(context, R.drawable.palette))\n      .setSelectorDrawable(ContextCompat.getDrawable(context, R.drawable.selector))\n      .build();\n```\n\n### Initial color\nYou 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 the `setPreferenceName` method, this function will work only once.\n\n```gradle\napp:initialColor=\"@color/colorPrimary\"\n```\n\nOr you can use this method programmatically.\n\n```java\n.setInitialColor(color);\n.setInitialColorRes(R.color.colorPrimary);\n```\n\n### Restore and save\n\nThis is how to restore the state of `ColorPickerView`.\u003cbr\u003e\n`setPreferenceName()` method restores all of the saved states (selector, color) automatically.\n\n```java\ncolorPickerView.setPreferenceName(\"MyColorPicker\");\n```\n\nThis is how to save the states of `ColorPickerView`.\u003cbr\u003e\nThe `setLifecycleOwner()` method saves all of the states automatically when the `lifecycleOwner` is destroy.\n\n```java\ncolorPickerView.setLifecycleOwner(this);\n```\n\nOr you can save the states manually using the method below:\n\n```java\nColorPickerPreferenceManager.getInstance(this).saveColorPickerData(colorPickerView);\n```\n\n### Manipulate and clear\nYou can manipulate and clear the saved states using `ColorPickerPreferenceManager`.\n\n```java\nColorPickerPreferenceManager manager = ColorPickerPreferenceManager.getInstance(this);\nmanager.setColor(\"MyColorPicker\", Color.RED); // manipulates the saved color data.\nmanager.setSelectorPosition(\"MyColorPicker\", new Point(120, 120)); // manipulates the saved selector's position data.\nmanager.clearSavedAllData(); // clears all of the states.\nmanager.clearSavedColor(\"MyColorPicker\"); // clears only saved color data. \nmanager.restoreColorPickerData(colorPickerView); // restores the saved states manually.\n```\n\n### Palette from Gallery\nHere is an example of how to get a bitmap drawable from the gallery image and set it to the palette.\u003cbr\u003e\u003cbr\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/52941911-313dc000-33ad-11e9-8264-6d78f4ad613a.jpg\" align=\"left\" width=\"35%\"\u003e\n\nDeclare the permission below on your `AndroidManifest.xml` file:\n\n```gradle\n\u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/\u003e\n```\n\nThe codes below will start the Gallery and you can choose any desired images:\n\n```java\nIntent photoPickerIntent = new Intent(Intent.ACTION_PICK);\nphotoPickerIntent.setType(\"image/*\");\nstartActivityForResult(photoPickerIntent, REQUEST_CODE_GALLERY);\n```\n\nIn the `onActivityResult`, you can get a bitmap drawable from the gallery and set it as the palette. You can also change the palette image of the `ColorPickerView` using the `setPaletteDrawable` method.\n\n```java\ntry {\n  final Uri imageUri = data.getData();\n  final InputStream imageStream = getContentResolver().openInputStream(imageUri);\n  final Bitmap selectedImage = BitmapFactory.decodeStream(imageStream);\n  Drawable drawable = new BitmapDrawable(getResources(), selectedImage);\n  colorPickerView.setPaletteDrawable(drawable);\n} catch (FileNotFoundException e) {\n  e.printStackTrace();\n}\n```\n\n## AlphaSlideBar\n\n`AlphaSlideBar` adjusts the transparency value of the selected color. \u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/90913596-6ea66200-e417-11ea-893a-467e93189c2b.gif\" align=\"left\" width=\"31%\"\u003e\n\n`AlphaSlideBar` in XML layout\n```gradle\n\u003ccom.skydoves.colorpickerview.sliders.AlphaSlideBar\n   android:id=\"@+id/alphaSlideBar\"\n   android:layout_width=\"match_parent\"\n   android:layout_height=\"wrap_content\"\n   app:selector_AlphaSlideBar=\"@drawable/colorpickerview_wheel\" // sets a customized selector drawable.\n   app:borderColor_AlphaSlideBar=\"@android:color/darker_gray\" // sets a color of the border.\n   app:borderSize_AlphaSlideBar=\"5\"/\u003e // sets a size of the border.\n```\n\nYou can attach and connect the `AlphaSlideBar` to your `ColorPickerView` using the `attachAlphaSlider` method.\n\n```java\nAlphaSlideBar alphaSlideBar = findViewById(R.id.alphaSlideBar);\ncolorPickerView.attachAlphaSlider(alphaSlideBar);\n```\n\nIf you want to implement a vertical style of slides, you can achieve it with the `rotation` attributes.\n\n```gradle\nandroid:layout_width=\"280dp\" // width must set a specific width size.\nandroid:layout_height=\"wrap_content\"\nandroid:rotation=\"90\"\n```\n\n## BrightnessSlideBar\n\n`BrightnessSlideBar` adjusts the brightness of the selected color. \u003cbr\u003e\u003cbr\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/90913583-6c440800-e417-11ea-8645-c5f6d1bf97df.gif\" align=\"left\" width=\"31%\"\u003e\n\n`BrightnessSlideBar` in XML layout\n```gradle\n\u003ccom.skydoves.colorpickerview.sliders.BrightnessSlideBar\n   android:id=\"@+id/brightnessSlide\"\n   android:layout_width=\"match_parent\"\n   android:layout_height=\"wrap_content\"\n   app:selector_BrightnessSlider=\"@drawable/colorpickerview_wheel\" // sets a customized selector drawable.\n   app:borderColor_BrightnessSlider=\"@android:color/darker_gray\" // sets a color of the border.\n   app:borderSize_BrightnessSlider=\"5\"/\u003e // sets a size of the border.\n```\n\nYou can attach and connect the `BrightnessSlideBar` to your `ColorPickerView` using `attachBrightnessSlider` method.\n\n```java\nBrightnessSlideBar brightnessSlideBar = findViewById(R.id.brightnessSlide);\ncolorPickerView.attachBrightnessSlider(brightnessSlideBar);\n```\n\nIf you want to implement a vertical style of slides, you can achieve it with the `rotation` attributes.\n\n```gradle\nandroid:layout_width=\"280dp\" // width must set a specific width size.\nandroid:layout_height=\"wrap_content\"\nandroid:rotation=\"90\"\n```\n\n## ColorPickerDialog\n![dialog0](https://user-images.githubusercontent.com/24237865/45362890-0d619b80-b611-11e8-857b-e12f82978b53.jpg) \n![dialog1](https://user-images.githubusercontent.com/24237865/45362892-0d619b80-b611-11e8-9cc5-25518a9d392a.jpg) \u003cbr\u003e\n\n`ColorPickerDialog` can be used just like an AlertDialog and it provides colors by tapping from any drawable. \u003cbr\u003e\n\n```java\nnew ColorPickerDialog.Builder(this)\n      .setTitle(\"ColorPicker Dialog\")\n      .setPreferenceName(\"MyColorPickerDialog\")\n      .setPositiveButton(getString(R.string.confirm),\n          new ColorEnvelopeListener() {\n              @Override\n              public void onColorSelected(ColorEnvelope envelope, boolean fromUser) {\n                  setLayoutColor(envelope);\n              }\n          })\n       .setNegativeButton(getString(R.string.cancel),\n          new DialogInterface.OnClickListener() {\n              @Override\n              public void onClick(DialogInterface dialogInterface, int i) {\n                  dialogInterface.dismiss();\n              }\n           })\n      .attachAlphaSlideBar(true) // the default value is true.\n      .attachBrightnessSlideBar(true)  // the default value is true.\n      .setBottomSpace(12) // set a bottom space between the last slidebar and buttons.\n      .show();\n```\n\nYou can get an instance of `ColorPickerView` from the `ColorPickerView.Builder` and customize it by your preferences. \u003cbr\u003e\n\n```java\nColorPickerView colorPickerView = builder.getColorPickerView();\ncolorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag)); // sets a custom flagView\nbuilder.show(); // shows the dialog\n```\n\n## FlagView\nYou can implement displaying `FlagView` over the selector.\u003cbr\u003e\nThis library provides `BubbleFlagView` by default as you can see in the [previews](https://github.com/skydoves/ColorPickerView#colorpickerview).\u003cbr\u003e\nHere is an example code for displaying a bubble flag view, which indicates what color value was selected.\n\n```java\nBubbleFlag bubbleFlag = new BubbleFlag(this);\nbubbleFlag.setFlagMode(FlagMode.FADE);\ncolorPickerView.setFlagView(bubbleFlag);\n```\n\nYou can also fully customize the `FlagView` like the example below:\u003cbr\u003e\n\n![flag0](https://user-images.githubusercontent.com/24237865/45364191-75fe4780-b614-11e8-81a5-04690a4392db.jpg) \n![flag1](https://user-images.githubusercontent.com/24237865/45364194-75fe4780-b614-11e8-844c-136d14c91560.jpg) \u003cbr\u003e\n\nFirst, create a custom XML layout like the example below: \n\n```gradle\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cLinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:layout_width=\"100dp\"\n    android:layout_height=\"40dp\"\n    android:background=\"@drawable/flag\"\n    android:orientation=\"horizontal\"\u003e\n\n    \u003ccom.skydoves.colorpickerview.AlphaTileView\n        android:id=\"@+id/flag_color_layout\"\n        android:layout_width=\"20dp\"\n        android:layout_height=\"20dp\"\n        android:layout_marginTop=\"6dp\"\n        android:layout_marginLeft=\"5dp\"\n        android:orientation=\"vertical\"/\u003e\n\n    \u003cTextView\n        android:id=\"@+id/flag_color_code\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginTop=\"6dp\"\n        android:layout_marginLeft=\"10dp\"\n        android:layout_marginRight=\"5dp\"\n        android:textSize=\"14dp\"\n        android:textColor=\"@android:color/white\"\n        android:maxLines=\"1\"\n        android:ellipsize=\"end\"\n        android:textAppearance=\"?android:attr/textAppearanceSmall\"\n        tools:text=\"#ffffff\"/\u003e\n\u003c/LinearLayout\u003e\n```\n\nNext, you should create a class that extends `FlagView`:\n\n```java\npublic class CustomFlag extends FlagView {\n\n    private TextView textView;\n    private AlphaTileView alphaTileView;\n\n    public CustomFlag(Context context, int layout) {\n        super(context, layout);\n        textView = findViewById(R.id.flag_color_code);\n        alphaTileView = findViewById(R.id.flag_color_layout);\n    }\n\n    @Override\n    public void onRefresh(ColorEnvelope colorEnvelope) {\n        textView.setText(\"#\" + colorEnvelope.getHexCode());\n        alphaTileView.setPaintColor(colorEnvelope.getColor());\n    }\n}\n```\n\nAs you can see in the above code, you can observe and update the layout inside the `onRefresh` method. Lastly, set the `FlagView` to the `ColorPickerView` using the `setFlagView` method:\n\n```java\ncolorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));\n```\n\n### FlagMode\n`FlagMode` is an option to decides the visibility action of the `FlagView`.\n\n```java\ncolorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always by tapping and dragging.\ncolorPickerView.setFlagMode(FlagMode.LAST); // showing only when finger released.\n```\n\n## AlphaTileView\n![alphatileview](https://user-images.githubusercontent.com/24237865/45364416-09377d00-b615-11e8-9707-b83f55053480.jpg) \u003cbr\u003e\n`AlphaTileView` visualizes ARGB colors over the view.\u003cbr\u003e\nIf 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`.\n\n```gradle\n\u003ccom.skydoves.colorpickerview.AlphaTileView\n     android:id=\"@+id/alphaTileView\"\n     android:layout_width=\"55dp\"\n     android:layout_height=\"55dp\"\n     app:tileSize=\"20\" // the size of the repeating tile\n     app:tileEvenColor=\"@color/tile_even\" // the color of even tiles\n     app:tileOddColor=\"@color/tile_odd\"/\u003e // the color of odd tiles\n```\n\n### ColorPickerView Methods\nMethods | Return | Description\n--- | --- | ---\ngetColor() | int | gets the last selected color.\ngetColorEnvelope() | ColorEnvelope | gets the `ColorEnvelope` of the last selected color.\nsetPaletteDrawable(Drawable drawable) | void | changes palette drawable manually.\nsetSelectorDrawable(Drawable drawable) | void | changes selector drawable manually.\nsetSelectorPoint(int x, int y) | void | selects the specific coordinate of the palette manually.\nselectByHsvColor(@ColorInt int color) | void | changes selector's selected point by a specific color.\nselectByHsvColorRes(@ColorRes int resource) | void | changes selector's selected point by a specific color using a color resource.\nsetHsvPaletteDrawable() | void | changes the palette drawable as the default drawable (ColorHsvPalette).\nselectCenter() | void | selects the center of the palette manually.\nsetInitialColor(@ColorInt int color) | void | changes selector's selected point by a specific color initially.\nsetInitialColorRes(@ColorRes int resource) | void | changes selector's selected point by a specific color initially using a color resource.\nsetActionMode(ActionMode) | void | sets the color listener's trigger action mode.\nsetFlagView(FlagView flagView) | void | sets `FlagView` on `ColorPickerView`.\nattachAlphaSlider | void | linking an `AlphaSlideBar` on the `ColorPickerView`.\nattachBrightnessSlider | void | linking an `BrightnessSlideBar` on the `ColorPickerView`.\n\n## Other Libraries\nHere are other ColorPicker related libraries!\n\n### ColorPickerPreference\n[A library](https://github.com/skydoves/ColorPickerPreference) that let you implement ColorPickerView, ColorPickerDialog, ColorPickerPreference. \n\n### Multi-ColorPickerView\nYou can get colors using multi selectors.\u003cbr\u003e\nAt [here](https://github.com/skydoves/Multi-ColorPicker) you can get a more specialized library on multi-coloring.\n\n![screenshot1128436220](https://user-images.githubusercontent.com/24237865/45586566-4614b400-b934-11e8-9098-2d4341dd695e.png)\n\n## Find this library useful? :heart:\nSupport it by joining [stargazers](https://github.com/skydoves/ColorPickerView/stargazers) for this repository. :star: \u003cbr\u003e\nAnd __[follow](https://github.com/skydoves)__ me for my next creations! 🤩\n\n# License\n```xml\nCopyright 2017 skydoves (Jaewoong Eum)\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","funding_links":["https://github.com/sponsors/skydoves","https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"],"categories":["Color"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2FColorPickerView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskydoves%2FColorPickerView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2FColorPickerView/lists"}