Kotlin Android – Color Picker
Color Picker is an application, where you can choose specific amounts of Red(R), Green(G), Blue(B) colors and Transparency(A).
In this tutorial, we shall implement a Color Picker using SeekBar and other basic View components of Android. No third party library shall be used. It is a simple Color Picker and you can make your custom changes. For complete source code, scroll to the end of the tutorial.
Following is a sample screenshot of what we are building in this tutorial.
As shown in the above image, there are four seekbars with min value 0 and max value 255 to read the four channels of color (Alpha, Red, Green, Blue). An EditText is available to input color hex value. Preview could be seen in a button at the top.
Steps to Build Color Picker in Android
Following are the steps we followed to build the Kotlin Android – Color Picker presented in this Example.
- There should be four SeekBar s included for picking Alpha (Transparency), Red, Green and Blue components. As the hex value of a color component ranges from 0..255, take the max value of each SeekBar as 255.
- An EditText is used to display the complete color’s hex value. The same EditText can be used to provide a custom color hex value.
- A button is provided at the top, to preview the color formed with the values collected from SeekBars or EditText.
Example – Kotlin Android – Color Picker
In the main activity, we have presented two buttons, one for showing the color and other a regular button. Upon clicking any of the two buttons, color picker layout will appear and you can choose the color by changing the seekbar positions.
Following are the layout and Activity (Kotlin) files. For resources like drawables which are used for styling seekbars, you can download this whole Android Application using the link provided at the end of this tutorial.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TutorialKart - Color Picker"
android:textSize="25sp"
android:padding="25sp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnColorSelected"
android:layout_width="200sp"
android:layout_height="200sp" />
<Button
android:id="@+id/btnColorPicker"
android:layout_margin="25sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Color Picker" />
</LinearLayout>
<include layout="@layout/colorpicker" />
</RelativeLayout> colorpicker.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/colorSelector"
android:visibility="gone"
android:background="#CC000000"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:orientation="vertical"
android:layout_centerVertical="true"
android:padding="50px"
android:background="#333333"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:background="#FFFFFF"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/btnColorPreview"
android:background="#F00"
android:layout_width="match_parent"
android:layout_height="200px" />
<LinearLayout
android:gravity="center"
android:background="#555555"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="#"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/strColor"
android:text="FFFF0000"
android:textSize="20sp"
android:maxLength="8"
android:textColor="#FFFFFF"
android:background="#555555"
android:padding="5sp"
android:imeOptions="actionDone"
android:textAlignment="center"
android:layout_width="150sp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<SeekBar
android:id="@+id/colorA"
android:padding="30px"
android:progress="255"
android:progressDrawable="@drawable/seekbar_a_progress"
android:thumb="@drawable/seekbar_a_thumb"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/colorR"
android:padding="30px"
android:progress="255"
android:progressDrawable="@drawable/seekbar_r_progress"
android:thumb="@drawable/seekbar_r_thumb"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/colorG"
android:padding="30px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_g_progress"
android:thumb="@drawable/seekbar_g_thumb"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/colorB"
android:padding="30px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_b_progress"
android:thumb="@drawable/seekbar_b_thumb"
android:layout_weight="0.9"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_marginTop="30px"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/colorCancelBtn"
android:text="Cancel"
android:background="#CCCCCC"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/colorOkBtn"
android:background="#EEEEEE"
android:text="Apply"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</RelativeLayout> MainActivity.kt
package com.tutorialkart.colorpicker
import android.app.Activity
import android.graphics.Color
import android.os.Bundle
import android.view.View
import android.widget.SeekBar
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.colorpicker.*
import android.text.Editable
import android.text.TextWatcher
class MainActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btnColorPicker.setOnClickListener {
colorSelector.visibility = View.VISIBLE
}
btnColorSelected.setOnClickListener {
colorSelector.visibility = View.VISIBLE
}
strColor.addTextChangedListener(object : TextWatcher {
override fun afterTextChanged(s: Editable) {
if (s.length == 6){
colorA.progress = 255
colorR.progress = Integer.parseInt(s.substring(0..1), 16)
colorG.progress = Integer.parseInt(s.substring(2..3), 16)
colorB.progress = Integer.parseInt(s.substring(4..5), 16)
} else if (s.length == 8){
colorA.progress = Integer.parseInt(s.substring(0..1), 16)
colorR.progress = Integer.parseInt(s.substring(2..3), 16)
colorG.progress = Integer.parseInt(s.substring(4..5), 16)
colorB.progress = Integer.parseInt(s.substring(6..7), 16)
}
}
override fun beforeTextChanged(s: CharSequence, start: Int,
count: Int, after: Int) {
}
override fun onTextChanged(s: CharSequence, start: Int,
before: Int, count: Int) {
}
})
colorA.max = 255
colorA.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onStopTrackingTouch(seekBar: SeekBar) {}
override fun onStartTrackingTouch(seekBar: SeekBar) {}
override fun onProgressChanged(seekBar: SeekBar, progress: Int,
fromUser: Boolean) {
val colorStr = getColorString()
strColor.setText(colorStr.replace("#","").toUpperCase())
btnColorPreview.setBackgroundColor(Color.parseColor(colorStr))
}
})
colorR.max = 255
colorR.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onStopTrackingTouch(seekBar: SeekBar) {}
override fun onStartTrackingTouch(seekBar: SeekBar) {}
override fun onProgressChanged(seekBar: SeekBar, progress: Int,
fromUser: Boolean) {
val colorStr = getColorString()
strColor.setText(colorStr.replace("#","").toUpperCase())
btnColorPreview.setBackgroundColor(Color.parseColor(colorStr))
}
})
colorG.max = 255
colorG.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onStopTrackingTouch(seekBar: SeekBar) {}
override fun onStartTrackingTouch(seekBar: SeekBar) {}
override fun onProgressChanged(seekBar: SeekBar, progress: Int,
fromUser: Boolean) {
val colorStr = getColorString()
strColor.setText(colorStr.replace("#","").toUpperCase())
btnColorPreview.setBackgroundColor(Color.parseColor(colorStr))
}
})
colorB.max = 255
colorB.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onStopTrackingTouch(seekBar: SeekBar) {}
override fun onStartTrackingTouch(seekBar: SeekBar) {}
override fun onProgressChanged(seekBar: SeekBar, progress: Int,
fromUser: Boolean) {
val colorStr = getColorString()
strColor.setText(colorStr.replace("#","").toUpperCase())
btnColorPreview.setBackgroundColor(Color.parseColor(colorStr))
}
})
colorCancelBtn.setOnClickListener {
colorSelector.visibility = View.GONE
}
colorOkBtn.setOnClickListener {
val color:String = getColorString()
btnColorSelected.setBackgroundColor(Color.parseColor(color))
colorSelector.visibility = View.GONE
}
}
fun getColorString(): String {
var a = Integer.toHexString(((255*colorA.progress)/colorA.max))
if(a.length==1) a = "0"+a
var r = Integer.toHexString(((255*colorR.progress)/colorR.max))
if(r.length==1) r = "0"+r
var g = Integer.toHexString(((255*colorG.progress)/colorG.max))
if(g.length==1) g = "0"+g
var b = Integer.toHexString(((255*colorB.progress)/colorB.max))
if(b.length==1) b = "0"+b
return "#" + a + r + g + b
}
} Conclusion
In this Kotlin Android Tutorial – Android Color Picker, we have provided the source code to build Color Picker using basic Android View elements an no third party library.