Android SeekBar Exmple and Tutorial

Table of Contents

Seekbar Example:
Custom Android SeekBar:

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: