Kotlin – Android Color Picker Example

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

Android Color Picker

 

Android Color Picker

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1093 Views