Kotlin – Android Color Picker Example
Published February 16, 2020In 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
Article Contributed By :
|
|
|
|
1322 Views |