How to add ColorSeekBar in Android

23 Feb, 2021
Seekbar is a type of progress bar. We can drag the seekbar from left to right and vice versa and hence changes the current progress. ColorSeekbar is similar to seekbar but we use this to select a color from multiple colors and can select any custom color. With the help of this widget, we can give more control to the user to customize its application according to his need.
Approach:
Add the support Library in your root build.gradle file (not your module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bigbucket can be directly used in the application.allprojects {    repositories {        maven { url "https://jitpack.io" }    }}Add the support Library in build.gradle file and add dependency in the dependencies section. This library provides various inbuilt function which we can use to give users maximum independence to customize.dependencies {    implementation 'com.github.rtugeek:colorseekbar:1.7.7'}Now add a array of colors, custom_colors in strings.xml file in values directory.strings.xmlstrings.xml<array name="custom_colors">              <item>#219806</item>            <item>#F44336</item>            <item>#FFEB3B</item>  </array>Now add the following code in the activity_main.xml file.This will add a textview and a colorSeekbar in activity_main. In this file we add our array, custom_colors to the Seekbar.activity_main.xmlactivity_main.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical"    android:padding="16dp"    tools:context=".MainActivity">      <TextView        android:id="@+id/text_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksForGeeks"        android:textSize="30sp"        android:textStyle="bold" />      <com.rtugeek.android.colorseekbar.ColorSeekBar        android:id="@+id/color_seek_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:colorSeeds="@array/custom_colors"        app:showAlphaBar="true" />  </LinearLayout>Now add the following code in the MainActivity.java file. onClickListener is added with the seekbar. As the value is changes via seekbar the onClickListener is invoked and color of texts in textview changes.MainActivity.javaMainActivity.javapackage org.geeksforgeeks.colorseekbar;  import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.widget.TextView;import com.rtugeek.android.colorseekbar.ColorSeekBar;  public class MainActivity    extends AppCompatActivity {      TextView textView;      @Override    protected void onCreate(        Bundle savedInstanceState)    {          super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          textView = findViewById(            R.id.text_view);        ColorSeekBar            colorSeekBar            = findViewById(                R.id.color_seek_bar);          colorSeekBar.setOnColorChangeListener(            new ColorSeekBa                r.OnColorChangeListener() {                      @Override                    public void                    onColorChangeListener(                        int i, int i1, int i2)                    {                        textView                            .setTextColor(i2);                    }                });    }}
Add the support Library in your root build.gradle file (not your module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bigbucket can be directly used in the application.allprojects {    repositories {        maven { url "https://jitpack.io" }    }}
allprojects {    repositories {        maven { url "https://jitpack.io" }    }}
Add the support Library in build.gradle file and add dependency in the dependencies section. This library provides various inbuilt function which we can use to give users maximum independence to customize.dependencies {    implementation 'com.github.rtugeek:colorseekbar:1.7.7'}
dependencies {    implementation 'com.github.rtugeek:colorseekbar:1.7.7'}
Now add a array of colors, custom_colors in strings.xml file in values directory.strings.xmlstrings.xml<array name="custom_colors">              <item>#219806</item>            <item>#F44336</item>            <item>#FFEB3B</item>  </array>
strings.xml
<array name="custom_colors">              <item>#219806</item>            <item>#F44336</item>            <item>#FFEB3B</item>  </array>
Now add the following code in the activity_main.xml file.This will add a textview and a colorSeekbar in activity_main. In this file we add our array, custom_colors to the Seekbar.activity_main.xmlactivity_main.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical"    android:padding="16dp"    tools:context=".MainActivity">      <TextView        android:id="@+id/text_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksForGeeks"        android:textSize="30sp"        android:textStyle="bold" />      <com.rtugeek.android.colorseekbar.ColorSeekBar        android:id="@+id/color_seek_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:colorSeeds="@array/custom_colors"        app:showAlphaBar="true" />  </LinearLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical"    android:padding="16dp"    tools:context=".MainActivity">      <TextView        android:id="@+id/text_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="GeeksForGeeks"        android:textSize="30sp"        android:textStyle="bold" />      <com.rtugeek.android.colorseekbar.ColorSeekBar        android:id="@+id/color_seek_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:colorSeeds="@array/custom_colors"        app:showAlphaBar="true" />  </LinearLayout>
Now add the following code in the MainActivity.java file. onClickListener is added with the seekbar. As the value is changes via seekbar the onClickListener is invoked and color of texts in textview changes.MainActivity.javaMainActivity.javapackage org.geeksforgeeks.colorseekbar;  import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.widget.TextView;import com.rtugeek.android.colorseekbar.ColorSeekBar;  public class MainActivity    extends AppCompatActivity {      TextView textView;      @Override    protected void onCreate(        Bundle savedInstanceState)    {          super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          textView = findViewById(            R.id.text_view);        ColorSeekBar            colorSeekBar            = findViewById(                R.id.color_seek_bar);          colorSeekBar.setOnColorChangeListener(            new ColorSeekBa                r.OnColorChangeListener() {                      @Override                    public void                    onColorChangeListener(                        int i, int i1, int i2)                    {                        textView                            .setTextColor(i2);                    }                });    }}
MainActivity.java
package org.geeksforgeeks.colorseekbar;  import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.widget.TextView;import com.rtugeek.android.colorseekbar.ColorSeekBar;  public class MainActivity    extends AppCompatActivity {      TextView textView;      @Override    protected void onCreate(        Bundle savedInstanceState)    {          super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          textView = findViewById(            R.id.text_view);        ColorSeekBar            colorSeekBar            = findViewById(                R.id.color_seek_bar);          colorSeekBar.setOnColorChangeListener(            new ColorSeekBa                r.OnColorChangeListener() {                      @Override                    public void                    onColorChangeListener(                        int i, int i1, int i2)                    {                        textView                            .setTextColor(i2);                    }                });    }}
Output:
Android-Bars
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.