Custom SeekBar in Android Studio .

In this post, you will learn to create a custom seekbar in android studio. A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys to do so. To create a custom seekbar need follow these steps . 

• Create a drawable resource file in the drawable folder. Name it whatever you want. In this we will create a custom appearance for the thumb of the seekbar . 
• Copy the following code in this drawable folder : 

custom_thumb.xml:

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<solid android:color="@color/colorPrimary"/>
	<size android:height="55dp" android:width="25dp"/>
	<corners android:radius="5dp"/>
	</shape>

view raw xml hosted with ❤ by GitHub

Now create another drawable resource file for the custom background of the seekbar .
Paste in the following code in this.

    

      

        

  

    
    


        


  


  

        

          

          
<?xml version="1.0" encoding="utf-8"?>
        
        

          

          
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        
        

          

          


        
        

          

          
    <item android:gravity="center_vertical">
        
        

          

          


        
        

          

          
        <shape android:shape="rectangle">
        
        

          

          


        
        

          

          
            <solid android:color="#FFFFFF"/>
        
        

          

          
            <size android:height="50dp"/>
        
        

          

          
            <corners android:radius="20dp"/>
        
        

          

          
            <stroke android:color="@color/colorPrimaryDark"
        
        

          

          
                android:width="3dp"/>
        
        

          

          
        </shape>
        
        

          

          
    </item>
        
        

          

          


        
        

          

          
    <item android:gravity="center_vertical">
        
        

          

          


        
        

          

          
        <scale android:scaleWidth="100%">
        
        

          

          


        
        

          

          
            <selector>
        
        

          

          


        
        

          

          
                <item android:state_enabled="false"
        
        

          

          
                    android:drawable="@color/colorPrimary"/>
        
        

          

          
                <item>
        
        

          

          
                    <shape android:shape="rectangle">
        
        

          

          
                        <solid android:color="@color/colorPrimaryDark"/>
        
        

          

          
                        <size android:height="50dp"/>
        
        

          

          
                        <corners android:radius="20dp"/>
        
        

          

          
                    </shape>
        
        

          

          


        
        

          

          
                </item>
        
        

          

          


        
        

          

          
            </selector>
        
        

          

          


        
        

          

          
        </scale>
        
        

          

          


        
        

          

          
    </item>
        
        

          

          


        
        

          

          


        
        

          

          
</layer-list>
        
  



    

  


      
      

        view raw
        
          xml
        
        hosted with ❤ by GitHub
      
    

Now in your activity_main.xml file, copy this code  :
activity_main.xml:
    

    

      

        

  

    
    


        


  


  

        

          

          
<?xml version="1.0" encoding="utf-8"?>
        
        

          

          
<RelativeLayout 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"
        
        

          

          
    tools:context=".MainActivity">
        
        

          

          


        
        

          

          
    <TextView
        
        

          

          
        android:layout_width="wrap_content"
        
        

          

          
        android:layout_height="wrap_content"
        
        

          

          
        android:layout_centerHorizontal="true"
        
        

          

          
        android:textSize="50sp"
        
        

          

          
        android:textStyle="bold"
        
        

          

          
        android:text="SeekBar"
        
        

          

          
        android:textColor="@color/colorPrimaryDark"
        
        

          

          
        android:layout_marginTop="40dp"/>
        
        

          

          


        
        

          

          


        
        

          

          
    <SeekBar
        
        

          

          
        android:id="@+id/seekBar"
        
        

          

          
        android:layout_width="match_parent"
        
        

          

          
        android:layout_height="60dp"
        
        

          

          
        android:layout_centerInParent="true"
        
        

          

          
        android:layout_marginBottom="10dp"
        
        

          

          
        android:layout_marginStart="10dp"
        
        

          

          
        android:layout_marginEnd="5dp"
        
        

          

          
        android:max="100"
        
        

          

          
        android:progress="0"
        
        

          

          
        android:indeterminate="false"
        
        

          

          
        android:thumb="@drawable/custom_thumb"
        
        

          

          
        android:progressDrawable="@drawable/seekbar_background"
        
        

          

          
        android:padding="6dp"
        
        

          

          
        />
        
        

          

          


        
        

          

          
</RelativeLayout>
        
  



    

  


      
      

        view raw
        
          xml
        
        hosted with ❤ by GitHub
      
    


  


Output: