Update README.md

Author: skydoves

README.md

@@ -28,28 +28,32 @@ Add following XML namespace inside your XML layout file.
 xmlns:app="http://schemas.android.com/apk/res-auto"
 ```
 
-### ColorPickerView in layout
+
+### ColorPickerView in XML layout
+We can use `ColorPickerView` without any customized attributes.<br>
+This `ColorPickerView` will be initialized with the default HSV color palette and default selector.
 ```gradle
 <com.skydoves.colorpickerview.ColorPickerView
-     android:id="@+id/colorPickerView"
-     android:layout_width="300dp"
-     android:layout_height="300dp"
-     app:palette="@drawable/palette"
-     app:selector="@drawable/wheel" />
+   android:id="@+id/colorPickerView"
+   android:layout_width="300dp"
+   android:layout_height="300dp" />
 ```
 
 ### Attribute descriptions
+We can customize the palette image and selector or various options using the below attributes.
 ```gradle
-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.
+app:palette="@drawable/palette" // sets a custom palette image.
+app:selector="@drawable/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'.
+app:preferenceName="MyColorPicker" // sets a preference name.
+app:debounceDuration="200" // sets a debounce duration of the invoking color listener.
 ```
 
 ### ColorListener
-ColorListener is invoked whenever tapped by a user or selecting position manually.
+`ColorListener` is invoked when tapped by a user or selected a position by a function.
 ```java
 colorPickerView.setColorListener(new ColorListener() {
     @Override
@@ -60,8 +64,17 @@ colorPickerView.setColorListener(new ColorListener() {
 });
 ```
 
+### ColorEnvelope
+`ColorEnvelope` is a wrapper class of color models for providing more variety of color models.<br>
+We can get HSV color value, Hex string code, ARGB value from the `ColorEnvelope`.
+```java
+colorEnvelope.getColor() // returns a integer color.
+colorEnvelope.getHexCode() // returns a hex code string.
+colorEnvelope.getArgb() // returns a argb integer array.
+```
+
 ### ColorEnvelope Listener
-ColorEnvelopeListener provides hsv color, hex code, argb by `ColorEnvelope`.
+`ColorEnvelopeListener` extends `ColorListener` and it provides `ColorEnvelope` as a parameter.
 ```java
 colorPickerView.setColorListener(new ColorEnvelopeListener() {
     @Override
@@ -72,18 +85,38 @@ colorPickerView.setColorListener(new ColorEnvelopeListener() {
 });
 ```
 
-### ColorEnvelope
-ColorEnvelope is a wrapper class of colors for provide various forms of color.
+### Palette
+If we do not set any customized palette, the default palette drawable is the `ColorHsvPalette`.<br>
+We can move and select a point on the palette using a specific color using the below methods.
 ```java
-colorEnvelope.getColor() // returns a integer color.
-colorEnvelope.getHexCode() // returns a hex code string.
-colorEnvelope.getArgb() // returns a argb integer array.
+colorPickerView.selectByHsvColor(color);
+colorPickerView.selectByHsvColorRes(R.color.colorPrimary);
+```
+We can change the default palette as a desired image drawable using the below method.<br>
+But if we change the palette using another drawable, we can not use the `selectByHsvColor` method.
+```java
+colorPickerView.setPaletteDrawable(drawable);
+```
+If we want to change back to the default palette, we can change it using the below method.
+```java
+colorPickerView.setHsvPaletteDrawable();
 ```
 
 ### ActionMode
-ActionMode controls an action about `ColorListener` invoking.
+`ActionMode` is an option restrict to invoke the `ColorListener` by user actions.
+```java
+colorPickerView.setActionMode(ActionMode.LAST); // ColorListener will be invoked when the finger is released.
+```
+
+### Debounce
+Only emits color values 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.
+```xml
+app:debounceDuration="150"  
+```
+Or we can set it programmatically.
 ```java
-colorPickerView.setActionMode(ActionMode.LAST); // the listener will be invoked only when finger released.
+colorPickerView.setDebounceDuration(150);
 ```
 
 ### Create using builder
@@ -102,49 +135,49 @@ ColorPickerView colorPickerView = new ColorPickerView.Builder(context)
 ```
 
 ### Restore and save
-This is how to restore the status for `ColorPickerView`.<br>
-Using `setPreferenceName()` method restores all of the saved statuses automatically.
+This is how to restore the state of `ColorPickerView`.<br>
+`setPreferenceName()` method restores all of the saved states (selector, color) automatically.
 
 ```java
 colorPickerView.setPreferenceName("MyColorPicker");
 ```
 
-This is how to save the status for `ColorPickerView`.<br>
-Using `setLifecycleOwner()` method saves all of the statuses when the lifecycleOwner's destroy automatically.
+This is how to save the states of `ColorPickerView`.<br>
+`setLifecycleOwner()` method saves all of the states automatically when the lifecycleOwner is destroy.
 ```java
-colorPickerView.setLifecycleOwner(this); // this means activity or fragment.
+colorPickerView.setLifecycleOwner(this);
 ```
-Or we can save the status manually regardless lifecycle using below method.
+Or we can save the states manually using the below method.
 ```java
 ColorPickerPreferenceManager.getInstance(this).saveColorPickerData(colorPickerView);
 ```
 
 ### Manipulate and clear
-We can manipulate and clear the saved statuses using `ColorPickerPreferenceManager`.
+We can manipulate and clear the saved states using `ColorPickerPreferenceManager`.
 ```java
 ColorPickerPreferenceManager manager = ColorPickerPreferenceManager.getInstance(this);
 manager.setColor("MyColorPicker", Color.RED); // manipulates the saved color data.
 manager.setSelectorPosition("MyColorPicker", new Point(120, 120)); // manipulates the saved selector's position data.
-manager.clearSavedAllData(); // clears all of the statuses.
+manager.clearSavedAllData(); // clears all of the states.
 manager.clearSavedColor("MyColorPicker"); // clears only saved color data. 
-manager.restoreColorPickerData(colorPickerView); // restores the saved statuses manually.
+manager.restoreColorPickerData(colorPickerView); // restores the saved states manually.
 ```
 
-### Pallette from Gallery
-Here is how to get bitmap drawable from the desired gallery image and set to the palette.<br><br>
+### Palette from Gallery
+Here is how to get a bitmap drawable from the gallery image and set it to the palette.<br><br>
 <img src="https://user-images.githubusercontent.com/24237865/52941911-313dc000-33ad-11e9-8264-6d78f4ad613a.jpg" align="left" width="35%">
 
-Firstly, declare below permission on your `AndroidManifest.xml` file.
+Declare below permission on your `AndroidManifest.xml` file.
 ```gradle
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 ```
-startActivityForResult for getting an image from the Gallery.
+The below codes will start the Gallery and we can choose the desired image.
 ```java
 Intent photoPickerIntent = new Intent(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.
+In the `onActivityResult`, we can get a bitmap drawable from the gallery and set it as the palette. And We can change the palette image of the `ColorPickerView` using the `setPaletteDrawable` method.
 ```java
 try {
   final Uri imageUri = data.getData();
@@ -176,63 +209,63 @@ ColorPickerPreference is used in PreferenceScreen and shows ColorPickerDialog if
 
 #### customizing
 If you want to customizing ColorPickerDialog in ColorPickerPreference, you could get ColorPickerDialog.Builder 
-using getColorPickerDialogBuilder() method.
+using `getColorPickerDialogBuilder()` method.
 ```java
 ColorPickerPreference colorPickerPreference_toolbar = (ColorPickerPreference) findPreference(getActivity().getString(R.string.ToolbarColorPickerPreference));
 ColorPickerDialog.Builder builder_toolbar = colorPickerPreference_toolbar.getColorPickerDialogBuilder();
 builder_toolbar.setFlagView(new CustomFlag(getActivity(), R.layout.layout_flag));
 ```
 
-## AlphaSlideBar(Optional)
+## AlphaSlideBar
 AlphaSlideBar changes the transparency of the selected color. <br><br>
-<img src="https://user-images.githubusercontent.com/24237865/52943592-d1e1af00-33b0-11e9-9e3c-9a1190ae969e.gif" align="left" width="31%">
+<img src="https://user-images.githubusercontent.com/24237865/90913596-6ea66200-e417-11ea-893a-467e93189c2b.gif" align="left" width="31%">
 
-`AlphaSlideBar` on xml layout
+`AlphaSlideBar` in XML layout
 ```gradle
 <com.skydoves.colorpickerview.sliders.AlphaSlideBar
    android: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.
+   app:selector_AlphaSlideBar="@drawable/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.
 ```
-`attachAlphaSlider` method connects slider to the `ColorPickerView`.
+We can attach and connect the `AlphaSlideBar` to our `ColorPickerView` using `attachAlphaSlider` method.
 
 ```java
 AlphaSlideBar alphaSlideBar = findViewById(R.id.alphaSlideBar);
 colorPickerView.attachAlphaSlider(alphaSlideBar);
 ```
-If you want to implement vertically, use below attributes.
+We can make it vertically using the below attributes.
 ```gradle
-android:layout_width="280dp" // width should be set manually
+android:layout_width="280dp" // width must set a specific width size.
 android:layout_height="wrap_content"
 android:rotation="90"
 ```
 
-## BrightnessSlideBar(Optional)
+## BrightnessSlideBar
 BrightnessSlideBar changes the brightness of the selected color. <br><br>
-<img src="https://user-images.githubusercontent.com/24237865/52943593-d1e1af00-33b0-11e9-813a-557760e172ed.gif" align="left" width="31%">
+<img src="https://user-images.githubusercontent.com/24237865/90913583-6c440800-e417-11ea-8645-c5f6d1bf97df.gif" align="left" width="31%">
 
-`BrightnessSlideBar` on xml layout
+`BrightnessSlideBar` in XML layout
 ```gradle
 <com.skydoves.colorpickerview.sliders.BrightnessSlideBar
    android: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.
+   app:selector_BrightnessSlider="@drawable/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.
 ```
-`attachBrightnessSlider` method connects slider to the `ColorPickerView`.
+We can attach and connect the `BrightnessSlideBar` to our `ColorPickerView` using `attachBrightnessSlider` method.
 
 ```java
 BrightnessSlideBar brightnessSlideBar = findViewById(R.id.brightnessSlide);
 colorPickerView.attachBrightnessSlider(brightnessSlideBar);
 ```
-If you want to implement vertically, use below attributes.
+We can make it vertically using the below attributes.
 ```gradle
-android:layout_width="280dp" // width should be set manually
+android:layout_width="280dp" // width must set a specific width size.
 android:layout_height="wrap_content"
 android:rotation="90"
 ```
@@ -241,11 +274,10 @@ android:rotation="90"
 ![dialog0](https://user-images.githubusercontent.com/24237865/45362890-0d619b80-b611-11e8-857b-e12f82978b53.jpg) 
 ![dialog1](https://user-images.githubusercontent.com/24237865/45362892-0d619b80-b611-11e8-9cc5-25518a9d392a.jpg) <br>
 
-ColorPickerDialog can be used just like using AlertDialog and provides colors from any drawables. <br>
-ColorPickerDialog extends `AlertDialog`. So we can customize themes also. <br>
+`ColorPickerDialog` can be used just like an AlertDialog and it provides colors by tapping from any drawable. <br>
 
 ```java
-new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK)
+new ColorPickerDialog.Builder(this)
       .setTitle("ColorPicker Dialog")
       .setPreferenceName("MyColorPickerDialog")
       .setPositiveButton(getString(R.string.confirm),
@@ -255,31 +287,42 @@ new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK)
                   setLayoutColor(envelope);
               }
           })
-       setNegativeButton(getString(R.string.cancel),
+       .setNegativeButton(getString(R.string.cancel),
           new DialogInterface.OnClickListener() {
               @Override
               public void onClick(DialogInterface dialogInterface, int i) {
                   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.
+      .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();
 ```
 
-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.
+we can get an instance of `ColorPickerView` from the `ColorPickerView.Builder` and we can customize it. <br>
 ```java
 ColorPickerView colorPickerView = builder.getColorPickerView();
 colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag)); // sets a custom flagView
 builder.show(); // shows the dialog
 ```
 
-## FlagView(Optional)
+## FlagView
+We can implement showing a `FlagView` above and below on the selector.<br>
+This library provides `BubbleFlagView` by default as we can see the [previews](https://github.com/skydoves/ColorPickerView#colorpickerview).<br>
+Here is the example code for implementing it.
+
+```java
+BubbleFlag bubbleFlag = new BubbleFlag(this);
+bubbleFlag.setFlagMode(FlagMode.FADE);
+colorPickerView.setFlagView(bubbleFlag);
+```
+
+We can also fully customize the `FlagView` like below.<br>
 ![flag0](https://user-images.githubusercontent.com/24237865/45364191-75fe4780-b614-11e8-81a5-04690a4392db.jpg) 
 ![flag1](https://user-images.githubusercontent.com/24237865/45364194-75fe4780-b614-11e8-844c-136d14c91560.jpg) <br>
 
-FlgaView implements showing a flag above a selector. This is optional.<br><br>
-First, create a layout for `FlagView` as your taste like below. 
+First, We need a customized layout like below.
 ```gradle
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -313,7 +356,7 @@ First, create a layout for `FlagView` as your taste like below.
 </LinearLayout>
 ```
 
-Second, create a custom class extending `FlagView`. This is an example code.
+Second, we need to create a class that extends `FlagView`. Here is an example code.
 ```java
 public class CustomFlag extends FlagView {
 
@@ -334,22 +377,23 @@ public class CustomFlag extends FlagView {
 }
 ```
 
-The last, set `FlagView` on the `ColorPickerView` using `setFlagView` method.
+And last, set the `FlagView` to the `ColorPickerView` using the `setFlagView` method.
 
 ```java
 colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));
 ```
 
 ### FlagMode
-FlagMode decides the `FlagView`'s visibility action.
+`FlagMode` is an option to decides the visibility action of the `FlagView`.
 ```java
 colorPickerView.setFlagMode(FlagMode.ALWAYS); // showing always by tapping and dragging.
 colorPickerView.setFlagMode(FlagMode.LAST); // showing only when finger released.
 ```
 
 ## AlphaTileView
 ![alphatileview](https://user-images.githubusercontent.com/24237865/45364416-09377d00-b615-11e8-9707-b83f55053480.jpg) <br>
-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`.<br>
+`AlphaTileView` visualizes ARGB colors over the view.<br>
+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 the `AlphaTileView`.
 
 ```gradle
 <com.skydoves.colorpickerview.AlphaTileView
@@ -369,9 +413,12 @@ getColorEnvelope() | ColorEnvelope | gets the `ColorEnvelope` of the last select
 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.
 setActionMode(ActionMode) | void | sets the color listener's trigger action mode.
-setFlagView(FlagView flagview) | void | sets `FlagView` on `ColorPickerView`.
+setFlagView(FlagView flagView) | void | sets `FlagView` on `ColorPickerView`.
 attachAlphaSlider | void | linking an `AlphaSlideBar` on the `ColorPickerView`.
 attachBrightnessSlider | void | linking an `BrightnessSlideBar` on the `ColorPickerView`.