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:
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.)
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:
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:
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:
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:
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:
Let's now add the SeekBar.
Under the Widgets category of the Palette, locate the SeekBar:
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:
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:
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:
Your layout will look like this:
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:
With your SeekBar still selected, locate the thumb property:
Click the button to the right of the thumb textbox to bring up the resources dialogue box:
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:
Or this, in landscape:
Stop the app from running and we'll get some coding done. We'll do that in the next lesson below.