The Android SeekBar

Android Widgets: 1 2 3 4 5 6 7 8 9

A SeekBar in Android is slider that moves from side to side. You then return a value for the slider. For example, the slider in the image below is set to a middle value:

A SeekBar in Android

SeekBars are used for things like volume controls and setting the screen brightness. To learn how to use them, we'll set a question asking people how beautiful they think they are, on a scale of 0 to 10. We'll also change the image on the slider. We'll then display a message in something called a Toast.

Create a new project for this. Set the application name to anything you like. We'll call ours Slider Quiz. Select Empty Activity as the template. When you click Finish, you should have a project with an Hello World TextView in the middle.

Click on to the ativity_main.xml file. Select the TextView on your layout. Now hit the delete key on your keyboard to get rid of it. Drag another TextView on to your layout. Position it near the top, in the middle. Add constraints to the left and right sides, and the top of the screen. Have a look at the properties area on the right, and set a top margin of 32. Change the ID to quizQuestion: (You should know how to do all this by now.)

Android Studio showing a layout and properties

We'll set up a string resource for this. In the textbox where it says TextView, delete this and then click the button to the right:

Resources button for text property

When you click the button, you should see the resources dialogue box appear. In the top right, select, Add new resource > New String Value. Enter the following value when you see the new box appear:

Resource name: question

Resource value: On a scale of zero to 10, how beautiful would you say you are?

Your dialogue box will then look like this:

New String Value Resource dialogue box

Click OK to add the string resource to your strings.xml file. You can open this up, if you like. In the Explorer window on the left, expand the res > values folder. Double click the strings.xml file to see this:

The strings.xml file

If you wanted to, you could change the question here, rather than in the properties area.

Go back to your layout. You'll see the text on the TextView is a bit small. We can change that. With the TextView selected, have a look at the properties area on the right. Locate the textSize property and changed it to 24sp:

Changing the textSize property in Androidd Studio

You can set other text properties here: font family, typeface, line spacing, text colour, text style, text alignment. Experiment with them to see what they do. For the textAlignment, select the centre one.

Your TextView may look something like this:

TextView with properties changed

Let's now add the SeekBar.

Under the Widgets category of the Palette, locate the SeekBar:

The SeekBar in the palette

Drag one on to your layout, and position it below the TextView. Add constraints from the top of the SeekBar to the bottom of the TextView. Add constraints to the left, right and bottom of the layout. Your layout will then look like this:

A SeekBar added to a layout

As you can see, the SeekBar is far too small. With the SeekBar selected, locate the layout_width property in the properties area on the right. Change it match_parent:

Setting the layout_width property to match_parent

Under the SeekBar category in the image above, there are a few more properties we can set. The max property is the maximum value you want for your SeekBar (there's no minimum, sadly). Enter 10 in the max textbox. The progress property is how far along you want the slider when the app loads. Enter 5 in the progress textbox. Your properties area will then be like this:

Setting the max and progress properties of a SeekBar

Your layout will look like this:

A SeekBar on a layout

The circle part of the slider is called the thumb. This is another property we can set. Let's change it to an image. Save the image below to your own computer:

(The image size is 32 by 32 pixels. It's a transparent PNG image.)

Once you've saved the image to your computer, open an Explorer window (or Finder on the Mac) . Copy the image with CTRL + C (or COMMAND + C). Now paste it into Android Studio in the res > drawable folder:

The res > drawable folder

With your SeekBar still selected, locate the thumb property:

The thumb property of a SeekBar

Click the button to the right of the thumb textbox to bring up the resources dialogue box:

The Resource dialogue box showing a drawable

Select your smile image and click OK.

Run your app and see how it looks. Move the slider left and right. We haven't written any code, yet, so nothing will happen. Your app should look something like ours below, though:

Android SeekBar app running on portrait mode

Or this, in landscape:

Android SeekBar app running on landscape mode

Stop the app from running and we'll get some coding done. We'll do that in the next lesson below.