Home » Android » core » widget » SeekBar » Android SeekBar Example

About Thodoris Bais

Thodoris Bais
Thodoris is an Oracle Certified Associate Java Programmer and works as a Junior Software Developer, in the banking sector. He pursues a diploma at Informatics & Telecommunications Engineering and is interested in entrepreneurship and startups.

Android SeekBar Example

Hi there! As I promised, from now on, I’m getting into writing some Android examples! Today’s example will be what we call “to know us better”; simple ‘n easy.

In Android, a SeekBar is a ProgressBar element’s extension that allows the selection of integer values using a natural user interface. SeekBar has a thumb that can be slided in order to choose a value between 0 and some maximum that can be set from the developer.

For the need of this example, we will use the following tools in a Windows 64-bit platform:
 

  1. JDK 1.7
  2. Eclipse ADT 4.3 Kepler
  3. Android SDK 4.3
Tip
You may skip project creation and jump directly to the beginning of the example below.

1. Create a New Android Application Project

Open Eclipse IDE and go to File → New → Project → Android Application Project.

Fill in the name of the application, the project and the package in the appropriate fields and then click Next.

Figure 1. Create a new Android application

Figure 1. Create a new Android application

In the next window, the “Create Activity” option should be checked. The new created activity will be the main activity of your project. Then press Next button.

Figure 2. Configure the project

Figure 2. Configure the project

In “Configure Launcher Icon” window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next button.

Figure 3. Configure the launcher icon

Figure 3. Configure the launcher icon

Select the “Blank Activity” option and press Next.

Figure 4. Create the activity and select its type

Figure 4. Create the activity and select its type

You then have to specify a name for the new Activity and a name for the layout description of your app. The .xml files for the layout will automatically be created in the res/layout folder. Finally, press Finish.

Figure 5. Create a new blank activity

Figure 5. Create a new blank activity

Now you can see the final structure of the project in the following image (I have deleted the fragment_main.xml, as we don’t really need this).

Figure 6. The final structure of the project

Figure 6. The final structure of the project

2. Create the layout of the Main Activity

As I mentioned, I ‘ll try to keep it simple. Just add a SeekBar element at the very top of your layout and a TextView below, that will help help us keep track of its changes; all, under the concept of a RelativeLayout, just for demonstration.

Let’s do it by opening res/layout/activity_main.xml and navigating to the respective xml tab and paste the following.

activity_main.xml

<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"
    tools:context="com.javacodegeeks.android.seekbar.MainActivity" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="26dp"
        android:max="10"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seekBar1"
        android:layout_marginLeft="29dp"
        android:layout_marginTop="14dp" />
    
</RelativeLayout>

Except from setting our SeekBar‘s maximum value to 10, there isn’t any special to explain, so let’s see the MainActivity class.

3. Code the Main Activity

Let’s first navigate to src/com.javacodegeeks.android.textviewtest/MainActivity.java. Next, complete the class like this:

MainActivity.java

package com.javacodegeeks.android.seekbar;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity{

	 private SeekBar seekBar;
	 private TextView textView;

	 @Override
	 protected void onCreate(Bundle savedInstanceState) {
		 
	  super.onCreate(savedInstanceState);
	  setContentView(R.layout.activity_main);
	  initializeVariables();
	  
	  // Initialize the textview with '0'.
	  textView.setText("Covered: " + seekBar.getProgress() + "/" + seekBar.getMax());
	  
	  seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
		  int progress = 0;
		  
		  @Override
		  public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) {
			  progress = progresValue;
			  Toast.makeText(getApplicationContext(), "Changing seekbar's progress", Toast.LENGTH_SHORT).show();
		  }
		
		  @Override
		  public void onStartTrackingTouch(SeekBar seekBar) {
			  Toast.makeText(getApplicationContext(), "Started tracking seekbar", Toast.LENGTH_SHORT).show();
		  }
		
		  @Override
		  public void onStopTrackingTouch(SeekBar seekBar) {
			  textView.setText("Covered: " + progress + "/" + seekBar.getMax());
			  Toast.makeText(getApplicationContext(), "Stopped tracking seekbar", Toast.LENGTH_SHORT).show();
		  }
	   });
	 }
	 
	 // A private method to help us initialize our variables.
	 private void initializeVariables() {
		 seekBar = (SeekBar) findViewById(R.id.seekBar1);
		 textView = (TextView) findViewById(R.id.textView1);
	 }
}

Here are some points I believe need more in-depth explanation:

  • initializeVariables() is a usual technique that I use (when on Android development) to initialize all the existing xml variables.
  • In line 23, we used some SeekBar‘s common methods, to initialize the displayed in TextView progress, to zero.

What’s next? I’m sure you ‘ve already matched the SeekBar element to more than one of your installed applications, so what is needed to get things done, when touch and move the thumb, is an ActionListener, of course. Not exactly this, but it’s important that we have the generic meaning of it.

Assuming that we don’t know even the basics of Android, the best answer, according to platform questions, can be foud in the official developer’s site. I also found myself there, concluding that the ActionListener that match our needs, was OnSeekBarChangeListener.

Basically SeekBar.OnSeekBarChangeListener is a public static interface that is used to listen the SeekBar events, so we have to conform our Activity in order to implement it. This could be done either in the class definition ( public class MainActivity extends Activity implements OnSeekBarChangeListener ) or in the way line 25 shows. Of course, both ways are acceptable and allow us to override OnSeekBarChangeListener‘s methods:

  1. onProgressChanged: notification that the progress level has changed.
  2. onStartTrackingTouch: notification that the user has started a touch gesture.
  3. onStopTrackingTouch: notification that the user has finished a touch gesture.

So, after reading the corresponding official documentation, I was like “why not using all of these methods in my example?” and the easiest way to get this done was to just display a Toast, whenever each one happens. Lines 28-43 are your disclaimer, so let’s get today’s article finished with screenshots.

4. Run the Application

Figure 7. Initial state of the app

Figure 7. Initial state of the app

Now, let’s just touch (and keep it pressed for a while) the SeekBar element:

Figure 8. Touching the SeekBar

Figure 8. Touching the SeekBar

While moving the element, the overidded onProgressChanged method is executed:

Figure 9. Moving the SeekBar

Figure 9. Moving the SeekBar

Finally, after deciding its final position, it’s onStopTrackingTouch sequence to be executed:

Figure 10. Placing the SeekBar

Figure 10. Placing the SeekBar

5. Final Words – Source Code Download

And that was it for today, simple ‘n easy, as I promised! Have a nice day!
This was an example of SeekBar in Android. You can also download the source code for this example: SeekBar.zip

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

 

Want to take your Java Skills to the next level?
Grab our programming books for FREE!
  • Save time by leveraging our field-tested solutions to common problems.
  • The books cover a wide range of topics, from JPA and JUnit, to JMeter and Android.
  • Each book comes as a standalone guide (with source code provided), so that you use it as reference.
Last Step ...

Where should we send the free eBooks?

Good Work!
To download the books, please verify your email address by following the instructions found on the email we just sent you.