Understanding the SeekBar in Android With an Example

Introduction

If you have used an Android device and are a beginner in Android programming then you might have noticed a few controls in Android that let you work around with various stuff in Android, such as text fields, input fields or sliders and so on. They are various controls for different purposes.

 

I won't talk about controls or how many there are, instead in this article I am will explain just the SeekBar control in Android applications that lets you select a value from a range of values. I would guide you about the SeekBar control and a few things that you should understand before using the control. I would also provide an example that you can understand, understanding the example would help you to use this control in your own applications and to manage your application's state using the control. 

 

The preceding image depicts an Android SeekBar control as rendered in Android 5.0 version. 

 

In the future sections, I will talk about the SeekBar control, what it is, how to use it and when to use it (Example). I assume you have a basic understanding of XML and the Java language before you proceed.

Android SeekBar

The View class in Android is the base class for most of the controls in Android. It is the building block for the user interface. The SeekBar control also inherits from it and is a child of the ProgressBar control and AbsSeekBar. This control allows users to select an input from a range of inputs. The range always starts from 0 and goes up to a maximum value set by, setMax(). The default value for the maximum field is 100. 

 

A SeekBar can be used in a number of ways, but most commonly is to provide the user with a range of options. For example, the brightness setter and the volume control in Android uses this control.

Creating a SeekBar

Creating a SeekBar in Android Studio is quite simple task, the IDE is all drag-and-drop enabled and you just need to drag the controls around to create the layout for your application. Android Studio would write the code-behind in the XML file for you. The graphical UI design is easier than programming the UI in XML file. I will also share the XML for a little clarification.

 

 
Drag-and-drop this control over the layout and position it where you want to keep the control in the layout.

 

Android Studio would generate the XML content for your layout. The XML content for the application's layout is now:

<SeekBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_alignParentTop="true"
        android:layout_marginTop="81dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:max="10"/>

In the preceding code, you can see that I have (in your case, Android Studio has) defined a SeekBar control and a few other properties for the UI. In the last line you can see the max attribute being used. I have set it to 10 only, the default value is 100. 

Capturing the control in code-behind 

Android programming is done in Java (officially), to capture the control  in code-behind for dynamic changes. You require to write Java code to capture the control, alter the state of the application or the control itself. Since this inherits from a View object you can find it as a View and then cast it to a SeekBar object. 

/*
 * Have a look at the XML code above and look
 * at the android:id attribute's property. The
 * value it has is "seekBar". That is why I am
 * using it in the function to get the control on runtime.
 */

// Under resources, look for ID of seekBar.
SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);

Now this variable would hold the handle for your control at runtime. You can use it to alter the properties for the control or to manage the state of your application like resources and so on. 

 

In the next section I will implement this SeekBar in a source code sample and show you a working example of this control.

Example usage

In this example, I will show you how to use a SeekBar to control the text size of the TextView control. You can use it to control other values in your application also, but for a better understanding and less complexity I will use the text size of the TextView control only so that you don't get confused.

 

In our application we need:

1. A SeekBar control
   
   To control the value, the user can select from a range of values. 
   
   
2. A TextView control
   
   To change its layout to depict the changes. 
   
   
3. Java based Listener 
   
   That would listen to the changes in the value of the SeekBar. 
   
   
4. Common sense
   
   Um, well, this is optional. 

First of all we need to generate the layout of our application.

Creating the UI

First of all, create a new application and in the main activity's layout, add the controls that are required for our application to do what it is intended to do. Drag-and-drop can be used to design the UI of your application. The application UI would look like this:

 

An activity layout containing only a SeekBar and Large TextView control.

 

The XML markup for this layout in my application is:

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
                android:id="@+id/layout">


    <SeekBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_alignParentTop="true"
        android:layout_marginTop="81dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:max="10"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

If you run the emulator and test it in your machine, you will (the theme and style of the application's activity are not guaranteed to be similar) see the following layout (mine has Android 5.0 Lollipop running). 

 

The sample Android project has the following two controls: 

1. SeekBar control
2. TextView control

Running Android 5.0 Lollipop

 

This has been set up and the application is ready to be programmed. We can now add the back-end code to it and manage the state of the application when the user interacts with the SeekBar.

Handling user interaction with SeekBar

You can now write Java code to handle the interaction of users with this SeekBar and manage the state of your application depending on how the user provided your application with whatever.

 

Android events are listener-based, you need to attach a new listener to every event that must take place and you are interestied in handling the event. Let us talk about the SeekBar's value. Whenever a user interacts we need to understand what the value holds. Handling the progress of the SeekBar every second would take many CPU cycles and would be very inefficient code, wasting the device's efficiency and affecting the user experience.

while (true) {
  // get the progress and change the state
  // int progress = seekBar.getProgress();
}

/*
 * Should work, but never use it.
 */

That it why it is always better to attach a listener that is triggered whenever the user interacts with it. I wrote the following code to attach the listener to our seekBar control.

seekBar.setOnSeekBarChangeListener(
   new SeekBar.OnSeekBarChangeListener() {
   @Override
   public void onProgressChanged(SeekBar seekBar, int progressValue, boolean fromUser) {
       /*
        * SeekBar object contains the control
        * progressValue is the new value it holds
        * flag indicating whether change was initiated by user
        */
       textView.setTextSize((float)(progressValue) + 15);
   }

   @Override
       public void onStartTrackingTouch(SeekBar seekBar) {
      // When user starts working with control
      // Save the progress if initial value is needed.
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
      // When user stops interacting
      // Add your own logic here
   }
});

The preceding class of OnSeekBarChangeListener holds three functions that need to be overriden. You override them and add your own logic that you want to. In my (first) function, I added the logic to update the size of the text in the layout. The intial value was zero and thus 15 is a constant value that must be added to the value of the SeekBar. 

 

Now let us run the application and see the changes. (I moved it to the far right end of the SeekBar and the changes were as in the following.)

 

 
Notice the big size of text in this layout.

 

This way you can control your application's layout, state or resources. All using the SeekBar only. Pretty easy, huh?

Conclusion

SeekBar can be used in many ways to get user input in the form of a range. Event listeners can be attached to it to get updates from the user interaction and to handle the application's state in many ways.