Android SeekBar Example

If you are a beginner looking for knowledge about Seek Bar in Android, you have come to the right place. We have compiled all the necessary information one must have about Seek Bar in Android, ranging from the Android SeekBar basics to actually creating your own SeekBar in Android from zero. To begin with, you must proper understand what a Seek Bar in Android actually means.

Seek Bar in Android

The most important part of understanding Android Seek Bar is ProgressBar. If you are familiar with Android ProgressBar, you can easily understand Android Seek Bar and even visualize it right now. This is because the two are quite similar. That being said, it is very easy for a layman to mix the two up, so you have to be careful while learning about each of them.

A Seek Bar, in Android, is an extension of ProgressBar. What makes the two different is the fact that a Seek Bar adds a thumb that a user can drag by putting his finger on it and moving the finger. A SeekBar in Android can be of many types, such as a horizontal SeekBar, vertical SeekBar, custom SeekBar and many more. However, the horizontal SeekBar is the most common and the default style of SeekBar in Android. Also, this is the style that we will show you how to create in this tutorial. A developer must know what kind of SeekBar style suits his purpose and choose accordingly.

Having a SeekBar in an Android user interface is extremely important. This is because a SeekBar enables a user to select from a number of integer values so that he can choose a value between minimum and maximum to set it as the current progress level. If you still have not been able to picture what a SeekBar in Android looks like, a few examples of SeekBar are the brightness control, volume control and flashlight intensity control bars of your device.

SeekBar vs ProgressBar

As we have mentioned before, people (especially beginners) often get confused between a SeekBar and a ProgressBar due to their similar appearances; however, the two are quite unalike in terms of function and purpose. The main difference between SeekBar and ProgressBar is, as mentioned above, that a user can determine the progress by moving a thumb or slider in SeekBar, whereas ProgressBar only shows the progress and cannot be interacted with. Also, while adding SeekBar through your code in the layout file, you type in the SeekBar element.

It is not possible for one to create a proper Android SeekBar (one that we see in our apps daily) without knowing the essentials of the codes that is used to develop the seek bar. Before creating an Android SeekBar with many features, you must learn the following important components of the codes and understand the purpose of each component.

Open your “MainActivity.java” file, and type in the following code:

// MainActivity.java

package com.androidaura.seekbar;

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

public class MainActivity extends AppCompatActivity {

    TextView tv;
    SeekBar sb;

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

        tv = (TextView) findViewById(R.id.textview);
        sb = (SeekBar) findViewById(R.id.seekBar);

        sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {


            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                tv.setText(String.valueOf(progress));
            }

            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
} 

By carefully reading this code, you will realize how important it is for our project. Since it is the first screen to appear in our project, it will not be wrong to say that this code basically runs or launches our project. No other additional activities can be performed without this code.

Now, open your “activity_main.xml” layout file for UI designing, and type in the following code:

// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:text="10"
        android:textSize="25sp" />
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:max="100"
        android:progress="10"/>

</LinearLayout> 

If you read this code carefully, you will see that we have used a few widgets and added a few additional features to our project, such as centralized text, a maximum value of 100, text size of 25 sp and so on. First, we have used the “LinearLayout” widget with a vertical orientation. This means that all the contents of our project will be arranged vertically. In addition to that, we have used the “TextView” widget that will display all the text to the user of our project. Other than that, we have used the most important widget of our project and that is the “SeekBar” widget, which will add a seek bar to our project.

When you are done with adding the codes in both the files, you will get your output. The codes mentioned above will give you the following SeekBar:

Output

Seek Bar

With all this necessary knowledge about the Android SeekBar, we hope you can create your own SeekBar in Android now. If you want to get better at developing a SeekBar in Android from scratch, we advise you to practice and experiment by trying different attributes and methods. The output will give you an idea of your progress.