7 How to create custom Seekbar in Android

Tweet

From Developer.android.com: “A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys”

In this tutorial, we show you how to customize a seekbar control, use this seekbar to control with media volume of device.

Here is a result of this tutorial:

This project is developed in Eclipse 4.2.0.

1. Make a custom Seekbar control by XML Layout

<SeekBar

        android:id="@+id/seekBar1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" 

        android:progressDrawable="@drawable/styled_progress"

        android:paddingLeft="15dp"

        android:paddingRight="15dp"

        android:thumb="@drawable/thumbler_small"

        android:indeterminate="false" />

We need a “thumbler_small”  picture and file “styled_progress.xml” in folder drawable:

<?xml version="1.0" encoding="UTF-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:id="@+android:id/SecondaryProgress"

        android:drawable="@drawable/progress_cyan"/>

    <item

        android:id="@+android:id/progress"

        android:drawable="@drawable/progress_red"/>

</layer-list>

And of course two image with name “progress_cyan” and “progress_red” for the horizontal bar.

2. Coding

Begin, init to work with media volume by using an AudioManager. Then set the position of the thumb of seekbar with the media volume value.

private void initControls()

    {

        try

        {

            audioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);

            seekbar.setMax(audioManager

                    .getStreamMaxVolume(AudioManager.STREAM_MUSIC));

            seekbar.setProgress(audioManager

                    .getStreamVolume(AudioManager.STREAM_MUSIC));  

        }

        catch (Exception e)

        {

            e.printStackTrace();

        }

    }

When user slide the thumb of seekbar then the value of media volume will be change

seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

              @Override

            public void onStopTrackingTouch(SeekBar seekBar) {

                 //add here your implementation

            }

            @Override

            public void onStartTrackingTouch(SeekBar seekBar) {

              //add here your implementation

            }

            @Override

            public void onProgressChanged(SeekBar seekBar, int progress,

                boolean fromUser) {

              audioManager.setStreamVolume(AudioManager.STREAM_MUSIC,

                        progress, 0);

              textview.setText("Media Volume value = " + progress);

            }

          });

and otherwise when user push on the volume up or down button on device, the position of the thumb of seekbar will be changed.

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

     switch (keyCode) {

        case KeyEvent.KEYCODE_VOLUME_UP:

            audioManager.adjustStreamVolume(AudioManager.STREAM_MUSIC, AudioManager.ADJUST_RAISE, AudioManager.FLAG_SHOW_UI);

            //Raise the Volume Bar on the Screen

     seekbar.setProgress(audioManager.getStreamVolume(AudioManager.STREAM_MUSIC)             );

            return true;

        case KeyEvent.KEYCODE_VOLUME_DOWN:

            //Adjust the Volume

            audioManager.adjustStreamVolume(AudioManager.STREAM_MUSIC,            AudioManager.ADJUST_LOWER, AudioManager.FLAG_SHOW_UI);

            //Lower the VOlume Bar on the Screen

            seekbar.setProgress(audioManager.getStreamVolume(AudioManager.STREAM_MUSIC)

             );

            return true;

        default:

            return false;

     }

}

3. DEMO

 3.1. When user slide on seekbar

3.2. When user button on vulume button on device

You can download all source code at here