How to add ColorSeekBar in Android

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:

  1. 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    allprojects {
        repositories {
            maven { url "https://jitpack.io" }
        }
    }

    chevron_right

    
    

  2. 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    dependencies {
        implementation 'com.github.rtugeek:colorseekbar:1.7.7'
    }

    chevron_right

    
    

  3. Now add a array of colors, custom_colors in strings.xml file in values directory.

    strings.xml



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <array name="custom_colors">
      
                <item>#219806</item>
                <item>#F44336</item>
                <item>#FFEB3B</item>
      
    </array>

    chevron_right

    
    

  4. 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.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 
        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>

    chevron_right

    
    

  5. 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.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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);
                        }
                    });
        }
    }

    chevron_right

    
    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.