
Android SeekBar is an alternative which has capability to draggable thumb moves right or left, an example of this is YouTube Player in which you drage the thumb to skip a part of video means using this you can move to video on any timing. That’s why we need a SeekBar.
Seekbar Example:
Lest’s start, create an Android Studio Project and the below code in your layout activity_main.xml file
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:layout_marginStart="20sp" android:layout_marginEnd="20sp" tools:context=".MainActivity"> <SeekBar android:id="@+id/seek_bar" android:layout_width="match_parent" android:layout_height="wrap_content"/> </RelativeLayout>
And add the below code to your MainActivity.java file:
package com.nsc.seekbar; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.SeekBar; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SeekBar seekBar = (SeekBar) findViewById(R.id.seek_bar); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int i, boolean b) { Toast.makeText(MainActivity.this, "SeekBar Progrees is : "+i,Toast.LENGTH_SHORT).show(); } @Override public void onStartTrackingTouch(SeekBar seekBar) { Toast.makeText(MainActivity.this, "SeekBar Touched!",Toast.LENGTH_SHORT).show(); } @Override public void onStopTrackingTouch(SeekBar seekBar) { Toast.makeText(MainActivity.this, "SeekBar Stopped! ",Toast.LENGTH_SHORT).show(); } }); } }
Output of SeekBar is:

Custom Android SeekBar:
To make a custo seekbar you will need to create some drawable files so first of create a SeekBar Thumb Drawable file name it as “seekbar_thumb” and add the below code to it:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <gradient android:angle="90" android:endColor="#00C853" android:startColor="#64DD17" /> <size android:height="30dp" android:width="30dp" /> </shape>
Now create one more drawable file for our custom seekbar background and position and name it as “custom_seekbar” then add given code to this file:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" android:gravity="center_vertical|fill_horizontal"> <shape android:shape="rectangle" android:tint="#DCDDDC"> <corners android:radius="8dp"/> <size android:height="20dp" /> <solid android:color="#DCDDDC" /> </shape> </item> <item android:id="@android:id/progress" android:gravity="center_vertical|fill_horizontal"> <scale android:scaleWidth="100%"> <selector> <item android:state_enabled="false" android:drawable="@android:color/transparent" /> <item> <shape android:shape="rectangle" android:tint="#00C853"> <corners android:radius="8dp"/> <size android:height="20sp" /> <solid android:color="#00C853" /> </shape> </item> </selector> </scale> </item> </layer-list>
Finally replace you activity_main.xml file with below code:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" tools:context=".MainActivity"> <SeekBar android:id="@+id/seek_bar" android:splitTrack="false" android:layout_marginStart="20sp" android:layout_marginEnd="20sp" android:progressDrawable="@drawable/border_seekbar" android:thumb="@drawable/seekbar_thumb" android:layout_width="match_parent" android:layout_height="wrap_content"/> </RelativeLayout>
Now run the project it will looks like the below screenshot:

Click Here to Download Source Code
Leave a Comment
You must be logged in to post a comment.