Creating Custom SeekBar in Android - GeeksforGeeks

12 Dec, 2021
SeekBar can be understood as an extension of ProgressBar in Android. You have to just drag the thumb on SeekBar and drag it towards the backward or forward direction and store the current value of progress changed. SeekBar is widely used in different applications ex – Audio player Video Player etc. You can implement the traditional SeekBar provided by Android. In this article, we will see how we can customize the android SeekBar.  For creating a custom SeekBar first we will design our SeekBar and thumb of seekBar for this we will add layout files in drawable. We can use pictures as a thumb too for that instead of creating a layout we have to just put the picture on the drawable rest things will be the same.
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: 
Wait for some time, After the build finish, you will see a MainActivity.java file and an XML file inside res -> layout named as activity_main.xml.  We will create our custom SeekBar and implement that on our activity_main.xml.
Step 3: 
Now right click on drawable -> new -> drawable resource file, name the file as custom_seekbar.xml and specify Root element as layer-list -> click on OK. a new file custom_seekbar.xml will be created
Step 4:  
Now in custom_seekbar.xml inside the layer-list add an item and give a shape to it. specify the color, height, corners of the SeekBar. Also, add another item of the same shape and size but you can change the color, left part of SeekBar’s thumb will be of this color.
Step 5:  
Now again click on drawable -> new -> drawable resource file, name the file as thumb.xml and specify Root element as shape  -> click on OK. a new file thumb.xml will be created. Inside this file give the height, radius, and color of the thumb. these things can be changed. It totally depends upon how you want to design.
Step 6:  
Now go to the activity_main.xml create a layout and inside the layout add a SeekBar. Specify the height width of SeekBar and the max progress that you want to use set progress to 0.
android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" 
android:max="50"
android:progress="0"
This will create a customized Seekbar inside activity_main.xml.
Step 7: 
Now open MainActivity.java class Declare objects of SeekBar and TextView,  inside onCreate method initialize both objects using findViewById() method. Perform an event of SeekBar change listener that will hold progress value, and by using this event set the progress value inside TextView.
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");

                
            }..
Step 8
Build and run the app. Put the thumb on Seekbar and move it either forward or backward it will display the process.
Code for the above implementation is given below:
Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
package com.abhi.customseekbar; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle;import android.view.View;import android.widget.SeekBar;import android.widget.TextView; public class MainActivity extends AppCompatActivity {     SeekBar seekBar;     TextView value;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        // initialize the seekBar object        seekBar=findViewById(R.id.seekbar);        value=findViewById(R.id.progress);        // calling the seekbar event change listener        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {            @Override            // increment or decrement on process changed            // increase the textsize            // with the value of progress            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {                value.setText(progress+"/"+"50");                        }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {                // This method will automatically                // called when the user touches the SeekBar            }             @Override            public void onStopTrackingTouch(SeekBar seekBar) {                // This method will automatically                // called when the user                // stops touching the SeekBar            }        });    }}
Below is the code for the activity_main.xml file. 
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:orientation="vertical"    android:background="#458C85"    tools:context=".MainActivity">     <RelativeLayout        android:id="@+id/Relative_1"        android:layout_width="match_parent"        android:layout_height="350dp"        android:layout_weight="2">         <TextView            android:id="@+id/textViewSelectSizeOfArray"            android:layout_width="273dp"            android:layout_height="wrap_content"            android:layout_above="@+id/seekbar"            android:layout_alignParentStart="true"            android:layout_alignParentEnd="true"             android:layout_marginBottom="9dp"            android:text="Custom Seek Bar"            android:textAlignment="center"            android:textColor="@color/white"            android:textSize="25dp" />         <SeekBar            android:id="@+id/seekbar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:indeterminate="false"            android:max="50"            android:progress="0"            android:progressDrawable="@drawable/custom_seekbar"            android:thumb="@drawable/thumb" />         <TextView            android:id="@+id/progress"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:layout_alignParentRight="true"            android:layout_alignParentBottom="true"            android:layout_marginLeft="0dp"            android:layout_marginRight="0dp"            android:layout_marginBottom="199dp"            android:padding="10dp"            android:text="0"            android:textAlignment="center"            android:textColor="@color/white"            android:textSize="30dp"            android:textStyle="bold">         </TextView>     </RelativeLayout> </LinearLayout>
Below is the code for the custom_seekbar.xml file. 
XML
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <!-- color, size, shape height of seekbar -->    <item android:gravity="center_vertical">        <shape android:shape="rectangle">            <solid android:color="#605A5C"/>            <size android:height="30dp"/>            <corners android:radius="9dp"/>        </shape>    </item>    <!-- color, size, shape height of seekbar when u drag it-->    <item android:gravity="center_vertical">        <scale android:scaleWidth="100%">            <selector>                <item android:state_enabled="false"                    android:drawable="@color/purple_200"/>                <item>                    <shape android:shape="rectangle">                        <solid android:color="@color/black"/>                        <size android:height="30dp"/>                        <corners android:radius="9dp"/>                    </shape>                </item>            </selector>        </scale>    </item></layer-list>
Below is the code for the thumb.xml file. 
XML
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="@color/purple_200"/>    <size android:height="30dp" android:width="25dp"/>    <corners android:radius="5dp"/></shape>
Output:
Project Link: Click Here
anikaseth98
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Arrays.sort() in Java with examples