Android's SeekBar: a tutorial

  • Written by  Clive

Using a SeekBar to change the size of text in a TextView

Android SeekBar icon

Seek Bars are like Progress Bars, with a slight difference. The user determines the progress by moving a slider.

We’ll show you how to use a SeekBar to change the size of text in a TextView.

Our SeekBar Tutorial app

This is what a plain old SeekBar looks like:

screenshot default seekbar

A simple default SeekBar. Slide it to the right to increase the progress and to the left to decrease it

We’ve customised the SeekBar in our SeekBar tutorial; we make the SeekBar invisible and use our own image for the scroll-thumb:

Android SeekBar screenshot

Slide the dollar scroll-thumb to the right and watch the text increase in size

The Layout

Define your SeekBar in the layout

We define our SeekBar in the XML layout file, activity_my.xml:

Android SeekBar XML layout

Define the SeekBar in your layout file

Note the following:

  • max – the maximum value for the SeekBar’s progress
  • progress – the default value for the SeekBar’s progress
  • progressDrawable – the drawable used to draw the SeekBar. We set it to the color white, making it invisible against the white screen
  • thumb – we use our own image for the SeekBar’s scroll-thumb slider

The Activity

Get a reference to the SeekBar in your activity

We get a reference to the SeekBar in our Activity’s onCreate() method. We also register a listener on the SeekBar to listen for progress changes.

Android SeekBar onCreate() myseekBar

Register the OnSeekBarChangeListener interface on the SeekBar to listen for progress changes

Note the following:

  • mySeekBar – a reference to our SeekBar defined in the XML layout file
  • setOnSeekBarChangeListener – the listener to monitor changes in the SeekBar’s progress

Listen for progress changes as the user moves the slider

Use the OnSeekBarChangeListener interface to listen for changes in the SeekBar’s progress as the user moves the slider.

Android SeekBar OnSeekBarChangeListener

Use the interface’s onProgressChanged() method to get the new progress value

Note the following:

  • OnSeekBarChangeListener – an interface that listens for changes in the progress
  • onProgressChanged – called when the slider moves, indicating that the progress has changed. It receives three parameters:
    • the SeekBar whose progress has changed
    • the current progress value
    • whether the progress change was initiated programmatically or by the user
  • updateTextSize – our method which we use to change the size of the text

Update the TextView’s text size

Sliding the SeekBar’s scroll-thumb image, changes the progress value. We use the interface listener to monitor this, calling the updateTextSize() method each time the progress changes.

Android SeekBar OnSeekBarChangeListener onProgressChanged()

The updateTextSize() method uses the current progress value to set the size of the text

Note the following:

  • sizeIncrease – this is the current progress. It’s passed to our updateTextSize() method
  • newTextSize – our float variable which we’ll use to set the size of the text. We set it to half the value of the current progress value (we don’t want the text to be too big!)
  • We use an if statement to make sure that the text size will always be between 10 and 50
  • setTextSize – we set the size of the text, passing two parameters:
    • the unit of measure. We use the sp or scale-independent unit represented by the TypedValue.COMPLEX_UNIT_SP constant
    • the new size for the text

Check out some SeekBar libraries

DoubleSeekBar

RangeSeekBar

AndroidCircularSeekBar

You may also want to check out our Android’s progress bars tutorial.

I hope that you have found this tutorial helpful.

This project was created using Android Studio.

You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.