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:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.java2blog.customseekbarexampleapp.MainActivity" >

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="40dp"
        android:max="10"
        android:thumb="@drawable/thumb"
        android:secondaryProgress="5"
        android:progress="5"
        android:progressDrawable="@layout/progress_seekbar"
        />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seekBar"
        android:layout_marginLeft="29dp"
        android:layout_marginTop="14dp" />

</RelativeLayout>
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.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="10dp"/>

            <gradient
                android:angle="270"
                android:endColor="#252945"
                android:startColor="#8a834b" />
        </shape>
    </item>
    <item>
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="10dp" />

                <gradient
                    android:angle="270"
                    android:endColor="#990800"
                    android:startColor="#d14900" />
            </shape>
        </clip>
    </item>

</layer-list>
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/MainActivity.java as below:
package com.java2blog.customseekbarexampleapp;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;

import com.java2blog.customseekbarexampleapp.R;

import static com.java2blog.customseekbarexampleapp.R.id.seekBar;
import static com.java2blog.customseekbarexampleapp.R.id.textView;

public class MainActivity extends Activity {

    SeekBar customSeekbar;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        customSeekbar = (SeekBar) findViewById(R.id.seekBar);
        textView = (TextView) findViewById(R.id.textView);
        // Set default value to 0
        textView.setText("Progress : "+customSeekbar.getProgress() + "/" + customSeekbar.getMax());
        customSeekbar.setOnSeekBarChangeListener(
                new OnSeekBarChangeListener() {
                    int progress = 0;
                    @Override
                    public void onProgressChanged(SeekBar seekBar,
                                                  int progresValue, boolean fromUser) {
                        progress = progresValue;
                    }

                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }

                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {
                        // Display the value in textview
                        textView.setText("Progress : "+progress + "/" + seekBar.getMax());
                    }
                });
    }
}

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 !!

Written by Arpit:

If you have read the post and liked it. Please connect with me on Facebook | Twitter | Google Plus

 

Java tutorial for beginners Copyright © 2012