Android SeekBar Exmple And Tutorial

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:

Android Defauld SeekBar Example - NSC - Nulled Source Code - Android Course Step by step free tutorials — Android Defauld SeekBar Example

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: