Android Custom SeekBar example


In previous post, we have already seen Android SeekBar example. In this post, we will see how to create Custom SeekBar.
If you follow Android SeekBar example , you will see below screen.

We will customize above SeekBar and it will look as below after customization.

If you want to customize above SeekBar , you can follow below tutorial to create Custom SeekBar it.

Source code:

Step 1 :Creating Project

Create an android application project named “AndroidCustomSeekBarExampleApp”.

Step 2 : Creating Layout

Change res ->layout -> activity_main.xml as below:

If you notice, it has two new attributes android:thumb=”@drawable/thumb” and android:progressDrawable=”@layout/progress_seekbar”. You will understand more about it in further steps.

Step 3: Create thumb and put it in drawable folder :

Thumb is nothing but item which you drag to change the progress.  Create a thumb image called “thumb.png” and put it in drawable folder. It will look something like below :
You can download image from source.

Step 4 : Creating XML for drawing progress bar :

  • Go to res -> layout
  • right click on layout
  • Click on New -> File.
  • Create a file named “progress_seekbar.xml” and paste below code in row_item.xml.

Above XML is used to design progresses for custom SeekBar. Above XML uses layer-list tag. A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

Step 5 : Creating MainActivity

Change src/main/packageName/ as below:

We are getting widget reference from layout file and then using SeekBar’s setOnSeekBarChangeListener method to set listener for our custom seekbar.

Step 6 : Running the app

When you run the app, you will get below screen:

Drag ping circle and use it to set the value for SeekBar.

We are done with Android Custom SeekBar example.
Happy Android Learning !!


Add Comment