Kotlin – Android Color Picker Example
Implement a color picker in your Android app using Kotlin. Learn how to integrate and customize the color selection feature effortlessly. Visit rrtutors.com.
Published February 16, 2020
In this post we are going to create Android Color Picker Example.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.
Step 2 − Add the following code to activity_colorpicker.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://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="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:textAllCaps="false"
android:background="@color/colorPrimary"
android:textColor="@color/white"
android:text="Color Picker" />
</LinearLayout>
<include layout="@layout/colorpicker" />
</RelativeLayout>
|
Step 3: Create required resourses files
seekbar_a_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp" android:color="#D9D9D9"/>
<corners android:radius="1dp" />
</shape>
|
seekbar_a_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="1dp" android:color="#FFFFFF"/>
<corners android:radius="1dp" />
</shape>
|
seekbar_a_style.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/seekbar_a_background"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/seekbar_a_progress" />
</item>
</layer-list>
|
seekbar_a_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/seekbar_a_background"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/seekbar_a_progress" />
</item>
</layer-list>
|
Similiarly add other resourses files with respected colors
Step 4: create colorpicker.xml file and add below code
<RelativeLayout
xmlns:android="https://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>
|
Step 5: Update ColorpickerActivity.kt with below code
import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.view.View
import android.widget.SeekBar
import com.rrtutors.androidsamples.R
import kotlinx.android.synthetic.main.activity_colorpicker.*
import kotlinx.android.synthetic.main.colorpicker.*
class ColorpickerActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_colorpicker)
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
}
}
|
Step 6: Let's run application
