Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@slaviboy
slaviboy committed Aug 16, 2020
1 parent 6ff0e6d commit e6c9b1e
Showing 1 changed file with 36 additions and 35 deletions.
71 changes: 36 additions & 35 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ Simple library for creating fully modular color pickers written in Kotlin
## About
Kotlin Library used for creating custom color pickers by adding different modules that combined all together form color picker.
To learn more about the library you can check the [Wiki](https://github.com/slaviboy/ColorPickerKotlin/wiki) page

Top 3 most popular color pickers are pre-made and included (kotlin classes together with the layout files) as [example](https://github.com/slaviboy/ColorPickerKotlin/tree/master/app/src/main):
* **RectangularHSV** - with base color on top-right corner, represents HSV color model
* **RectangularHSL** - with base color on middle-left side, represents HSL color model
* **CircularHSV** - with hue colors in form of a circle, represents HSV color model

[![Platform](https://img.shields.io/badge/platform-android-green.svg)](http:https://developer.android.com/index.html)
[![API](https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat)](https://android-arsenal.com/api?level=21)
[![Download](https://img.shields.io/badge/version-0.1.0-blue)](https://github.com/slaviboy/ColorPickerKotlin/releases/tag/v.0.1.0)

## Add to your project
Add the jitpack maven repository
Expand All @@ -30,50 +29,52 @@ dependencies {
implementation 'com.github.slaviboy:ColorPickerKotlin:v0.1.0'
}
```

## How to use
Follow the next few easy steps on how to include color pickers components in your own project.
If you want to create custom color picker with your own custom components- TextViews and Color Windows combined in separate xml file, you can check the tutorial section on the [Wiki](https://github.com/slaviboy/ColorPickerKotlin/wiki#tutorial-creating-custom-color-picker) page.


### Add Components
Here is example on how to include color picker components in your layout, in this particular example rectangular color window **RectangularSV** is used together with simple EditText that holds information about the RGB(Red, Green, Blue) values, for the selected color.
```xml
<com.slaviboy.colorpicker.windows.rectangular.RectangularSV
android:id="@+id/rectangularSV"
android:layout_width="200dp"
android:layout_height="200dp"
app:corner_radius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:selector_radius="0.06vh"
app:selector_stroke_width="0.03vh" />
<com.slaviboy.colorpicker.module.rectangular.RectangularSV
android:id="@+id/rectangularSV"
android:layout_width="200dp"
android:layout_height="200dp"
app:corner_radius="10dp"
app:layout_constraintBottom_toTopOf="@+id/label"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:selector_radius="0.06vh"
app:selector_stroke_width="0.03vh" />

<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RGB"
app:layout_constraintBottom_toBottomOf="@+id/text"
app:layout_constraintRight_toLeftOf="@+id/text"
app:layout_constraintTop_toTopOf="@+id/text" />
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RGB"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/text"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/rectangularSV"
app:layout_constraintVertical_chainStyle="packed" />

<EditText
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/rectangularSV" />
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/label"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/label"
app:layout_constraintTop_toTopOf="@+id/label" />
```

### Set Updater and ColorConverter
In your activity you need to associate the color components with certain [ColorConverter](https://github.com/slaviboy/ColorPickerKotlin/wiki#ColorConverter) and [Updater](https://github.com/slaviboy/ColorPickerKotlin/wiki#Updater).

ColorConverter class is used for conversion of the current selected color into different color models. Those color model values can be used by text views to display the currently selected color.The class has methods that lets you get the current selected color in different color model formats.

Update class is responsible for updating the content of all attached color pickers and text views responsively, so the change in one view will trigger change in the other color picker components. That way you can attach multiple color pickers and separate components without the need of manually changing each one.
Update class is responsible for updating the content of all attached color pickers and text views responsively, so the change in one view will trigger change in the other color picker components. That way you can attach multiple color pickers and separate components without the need of manually changing each one. If you want to create custom color picker with your own custom components combined in separate xml file, you can check the tutorial section on the [Wiki](https://github.com/slaviboy/ColorPickerKotlin/wiki#tutorial-creating-custom-color-picker) page.

```kotlin

Expand Down

0 comments on commit e6c9b1e

Please sign in to comment.