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:

Download

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>

<gradient

android:angle="270"

android:endColor="#252945"

android:startColor="#8a834b" />

</shape>

</item>

<item>

<clip>

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

Java2Blog

Android Custom SeekBar example

Source code:

Step 1 :Creating Project

Step 2 : Creating Layout

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

Step 4 : Creating XML for drawing progress bar :

Step 5 : Creating MainActivity

Step 6 : Running the app

Add Comment

Source code:

Step 1 :Creating Project

Step 2 : Creating Layout

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

Step 4 : Creating XML for drawing progress bar :

Step 5 : Creating MainActivity

Step 6 : Running the app

Join Our News Letter – Stay Updated

Related Posts

Add Comment

Join Our News Letter - Stay Updated