Android Widgets Seekbar

In this series of tutorials I’m going to take you through how to use all the Android Widgets, starting with the Seekbar. I have another series started that is concerned with Android Data Binding, and that series will eventual supercede what is covered here, but then again some people may stay with this style of doing things for some time.

It’s not actually hard to implement a Seekbar. It’s not hard at all. but there is a behaviour that I would like to try and encourage: Stack Overflow should not be your first port of call, Android documentation is king!

Don’t get me wrong, I have nothing against Stack Overflow, it is very useful, but only after consulting the documentation hasn’t resolved your question. I have seen some good answers on Stack Overflow, but I have also seen some very bad answers; very bad answers that have been voted up and given credibility.

Anyway, let’s get on with it. I have a very trivial IOS app that I am converting to Android. It’s called Payment Split Calculator and is a simple tool for dividing restaurant cheques (with a function for adding tip). It relies heavily  on SeekBars.

For this tutorial I will be using Android Developer Studio. Unfortunately I’m not keen on Eclipse and don’t really have any experience of it. But, Android Developer Studio is feature rich and based on JetBrains Java IDEA and I find it pretty decent.

Android Widgets SeekBar

Lets start by opening Android Developer Studio and creating a new project. for this tutorial it doesn’t matter what you call it but create it with a blank activity.

create new android studio project

target devices

blank activity

default activity name

Ok, so we have created a project with a blank activity which has the default name. Excellent.

Android Developer Studio

If, like me, you have used Android Developer Studio throughout it’s various versions, betas, and release candidates, you will have notice that the style of the project has changed. For a time Fragments where the default, and then basic layouts; but I notice now that there is a concept of and activity_main.xml which then loads a content_main.xml. We’ll get into why this decision might be in place but for now just be aware that that is how the files are organised. In order to add widgets to our layout we will need to be focus on the content_main.xml file.

There should already be a TextView by default, displaying “Hello World” – there really should be a new standard phrase by now! Anyway, we’ll use that but also add a SeekBar. look through the pallet until you find SeekBar then drag it out onto your layout. Position it roughly where you want it and drag it out so that it spans the whole width of the screen.

seekbar placed

Double-click on the SeekBar so the.. erm… properties come up (I guess that’s what it’s called).

seekbar properties

Set the Max value to 20 and then change the id to sbtest.

Ok now switch back to your MainActivity.java file. Below the class declaration make a forward declaration for the SeekBar.

Now in the onCreate method, after the boilerplate code get a reference to the SeekBar.

SeekBar Events

What we want to happen is for the TextView we have to change it’s value as we slide the SeekBar along. So how do we do this? Well the first thing we should do is check out the official documentation for SeekBars. But using Android Developer Studio we can also right click on the word SeekBar, then select go to and then declaration.

seekbar go to declaration

So between the official documentation and the actual code for the widget we should be able to figure out how to use it.

android documentation

The documentation tells us that SeekBars have an Interface SeekBar.OnSeekBarChangeListener that we can implement if we want to be notified of changes in its progress – definitely seems like what we want.

Implementing the SeekBar.OnSeekBarChangeListener

We have a number of options for how we can do this and if you have a look through Stack Overflow the most common seems to be to implement it on a nested class within your main activity. That’s one way but for this tutorial I’m just going to have the MainActivity itself implement the interface. To do that, we need to change the class declaration from:

to this

Now we need to implement a few methods. The easiest way to do this in Android Developer Studio is to right click then select generate and then override methods.

generate override methods

Because we are on the MainActivity class there will be a lot so you will have to scroll down to the bottom to get to the ones for SeekBar.OnSeekBarChangeListener. Once you have found them there should be 3 or 4, select them all and click to implement. For this tutorial we are only interested in on.

In this method we are going to update the value of our TextView with the conveniently provided progress integer.

We forward declare a variable for our TextView at the top of our class (below the SeekBar declaration)

Next we get a reference to our TextView object. Type the following in the onCreate method after the code we wrote for the SeekBar.

Now in our OnProgressChanged method we can write something like this

We are almost done. Only one thing remains. We need to tell our SeekBar who is listening. So back in the onCreate method we add the following below everything else

Now when we run the project and use the slider the TextView displays the progress

seekbar final

I hope you  found that useful. I will be continuing the series with all the other widgets.

Leave a Reply

Your email address will not be published. Required fields are marked *