Android Custom SeekBar Example Code

Please follow and like us:

Android Custom SeekBar Example Code

What is SeekBar in Android? in simple word, SeekBar helps to drag left or right to set current progress level. In this tutorial, I will show you how to use and customize SeekBar in Android with the help of XML. 

Let’s Explore Android Custom SeekBar Example Code Step By Step

Download Android Custom SeekBar Example Code

first create seekbar_progressbar.xml file in drawable file. Here i used <clip> in xml for clips between two gradient rectangle items

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp"/>

            <gradient
                android:angle="90"
                android:endColor="#6c6e6a"
                android:startColor="#61635f" />
        </shape>
    </item>
    <item>
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                <gradient
                    android:angle="90"
                    android:endColor="#3F51B5"
                    android:startColor="#303F9F" />
            </shape>
        </clip>
    </item>

</layer-list>

then make activity_main.xml file with spinner declaration. add above seekbar_progressbar drawable as seekbar’s progressDrawable.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center"
        android:text="Android Custom SeekBar Example"
        android:textSize="18sp" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="100dp"
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_progressbar"
        android:thumbTintMode="multiply" />

    <TextView
        android:id="@+id/count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Current Progress: 0/100"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

MainActivity.java file contains the logic of Android Custom SeekBar. we can set SeekBar’s thumbnail by setThumb() method.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        seekBar = (SeekBar) findViewById(R.id.seekBar);
        textView = (TextView) findViewById(R.id.count);
        // Set SeekBar Thumbnail Programmatically
        seekBar.setThumb(getResources().getDrawable(R.drawable.seebar));
        // Add listener to SeekBar
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            int seekBarProgress = 0;

            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                seekBarProgress = progress;
            }

            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            public void onStopTrackingTouch(SeekBar seekBar) {
                textView.setText("Current Progress: " + seekBarProgress + " / " + seekBar.getMax());
            }

        });
    }
}

Download Android Custom SeekBar Example Code

Android Custom SeekBar Example Code Tutorial

Android Custom Seekbar is helpful for custom requirement in your Android App. Hope you like our Android Custom Seekbar Tutorial.

nirav kalola