Adjusting Progress with SeekBar Android

You have seen how to display progress to the user. What if, however, you want to give the user some ability to move the indicator, for example, to set the current cursor position in a playing media file or to tweak a volume setting? You accomplish this by using the SeekBar control provided by the Android SDK. It’s like the regular horizontal progress bar, but includes a thumb, or selector, that can be dragged by the user. A default thumb selector is provided, but you can use any drawable item as a thumb. In Figure, we replaced the default thumb with a little Android graphic.

Here we have an example of an XML layout resource definition for a simple SeekBar:

With this sample SeekBar, the user can drag the thumb to any value between 0 and 500. Although this is shown visually, it might be useful to show the user what exact value the user is selecting. To do this, you can provide an implementation of the onProgressChanged() method, as shown here:

There are two interesting things to notice in this example. The first is that the fromTouch parameter tells the code if the change came from the user input or if, instead, it came from a programmatic change as demonstrated with the regular ProgressBar controls. The second interesting thing is that the SeekBar still enables you to set a secondary progress value. In this example, we set the secondary indicator to be halfway between the user’s selected value and the maximum value of the progress bar. You might use this feature to show the progress of a video and the buffer stream.

Displaying Rating Data with RatingBar

Although the SeekBar is useful for allowing a user to set a value, such as the volume, the RatingBar has a more specific purpose: showing ratings or getting a rating from a user. By default, this progress bar uses the star paradigm with five stars by default. A user can drag across this horizontal to set a rating. A program can set the value, as well. However, the secondary indicator cannot be used because it is used internally by this particular control.

Here’s an example of an XML layout resource definition for a RatingBar with four stars:

This layout definition for a RatingBar demonstrates setting both the number of stars and the increment between each rating value. Here, users can choose any rating value between 0 and 4.0, but only in increments of 0.25, the stepSize value. For instance, users can set a value of 2.25.This is visualized to the users, by default, with the stars partially filled. Figure illustrates how the RatingBar behaves.

Although the value is indicated to the user visually, you might still want to show a numeric representation of this value to the user.You can do this by implementing the onRatingChanged() method of the RatingBar.OnRatingBarChangeListener class.

The preceding example shows how to register the listener.When the user selects a rating using the control, a TextView is set to the numeric rating the user entered. One interesting thing to note is that, unlike the SeekBar, the implementation of the onRatingChange() method is called after the change is complete, usually when the user lifts a finger.That is, while the user is dragging across the stars to make a rating, this method isn’t called. It is called when the user stops pressing the control.

Showing Time Passage with the Chronometer

Sometimes you want to show time passing instead of incremental progress. In this case, you can use the Chronometer control as a timer. This might be useful if it’s the user who is taking time doing some task or in a game where some action needs to be timed. The Chronometer control can be formatted with text, as shown in this XML layout resource definition:

You can use the Chronometer object’s format attribute to put text around the time that displays.A Chronometer won’t show the passage of time until its start() method is called.To stop it, simply call its stop() method. Finally, you can change the time from which the timer is counting.That is, you can set it to count from a particular time in the past instead of from the time it’s started.You call the setBase() method to do this.

In this next example code, the timer is retrieved from the View by its resource identifier. We then check its base value and set it to 0. Finally,we start the timer counting up from there.

Displaying the Time

Displaying the time in an application is often not necessary because Android devices have a status bar to display the current time. However, there are two clock controls available to display this information: the DigitalClock and AnalogClock controls.

Using the DigitalClock

The DigitalClock control is a compact text display of the current time in standard numeric format based on the users’ settings. It is a TextView, so anything you can do with a TextView you can do with this control, except change its text. You can change the color and style of the text, for example.

By default, the DigitalClock control shows the seconds and automatically updates as each second ticks by. Here is an example of an XML layout resource definition for a DigitalClock control:

Using the AnalogClock

The AnalogClock control is a dial-based clock with a basic clock face with two hands, one for the minute and one for the hour. It updates automatically as each minute passes.The image of the clock scales appropriately with the size of its View. Here is an example of an XML layout resource definition for an AnalogClock control:

The AnalogClock control’s clock face is simple. However you can set its minute and hour hands. You can also set the clock face to specific drawable resources, if you want to jazz it up. Neither of these clock controls accepts a different time or a static time to display. They can show only the current time in the current time zone of the device, so they are not particularly useful.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Android Topics