Thursday, December 27, 2012

4 How to create custom Seekbar in Android


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:

Android Custom SeekBar - Figure 2


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

Android Custom SeekBar - Figure 1

3.2. When user button on vulume button on device

Android Custom SeekBar - Figure 2

You can download all source code at here

4 comments:

  1. Great tutorial! Thank you buddy.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. On a default seekbar how to get a progress result above thumb floating with it ???

    ReplyDelete
  4. Its not working, I am unable to see the image for 'SecondaryProgress'. It is only displaying the progress image.

    ReplyDelete