Tutorials Android Android Seekbar Example

Android Seekbar Example

Introduction

This tutorial will help you understand android SeekBar. Here in this example, we’ll see how to create and customize SeekBar with different color and layout.

SeekBar is one of the useful user interface element in android applications. SeekBar is an extension of ProgressBar that allows the selection of integer values using a natural user interface. Basically SeekBar has a thumb that you can slide to choose a value between 0 and some maximum that you set. A typical usage of Seekbar is your device brightness control and volume control.

We can add a SeekBar widget using element. android:max property is basically used to set a maximum integer value for selection using SeekBar. android:progress property is basically used to set a integer value for SeekBar progress.

Android Seekbar Example

activity_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#F0F0F5" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/background_view_rounded_single"
        android:orientation="vertical"
        android:visibility="visible" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Seekbar"
            android:textColor="#ffffff"
            android:textSize="20sp" />

        <SeekBar
            android:id="@+id/seek1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:progress="20"
            android:secondaryProgress="20" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Custom Seekbar"
            android:textColor="#fcfcfc"
            android:textSize="20sp" />

        <SeekBar
            android:id="@+id/volume_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progressbar"
            android:secondaryProgress="0" />
    </LinearLayout>

</RelativeLayout>

background_view_rounded_single.xml

<?xml version="1.0" encoding="UTF-8"?>
<inset android:insetLeft="1.0px" android:insetRight="1.0px" android:insetTop="0.0px" android:insetBottom="1.0px"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <selector>
        <item android:state_pressed="true">
            <shape>
                <gradient android:startColor="@color/rounded_container_bg" android:endColor="@color/rounded_container_bg" android:angle="270.0" />
                <corners android:radius="11.0dip" />
            </shape>
        </item>
        <item>
            <shape>
            	<stroke android:width="1.0px" android:color="@color/rounded_container_border" />
                <gradient android:startColor="@color/rounded_container_bg" android:endColor="@color/rounded_container_bg" android:angle="270.0" />
                <corners android:radius="10.0dip" />

            </shape>
        </item>
    </selector>
</inset>

progressbar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="270"
                android:endColor="@color/light_gray_header_color"
                android:startColor="@color/light_gray_header_color" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                <gradient
                    android:angle="270"
                    android:endColor="#00996a"
                    android:startColor="#00d190" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                <gradient
                    android:angle="270"
                    android:endColor="#00996a"
                    android:startColor="#00d190" />
            </shape>
        </clip>
    </item>

</layer-list>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="default_screen_bg">#f9f9f9</color>
    <color name="rounded_container_bg">#222222</color>
    <color name="rounded_container_border">#3b3f44</color>
    <color name="light_gray_header_color">#646663</color>

</resources>

We are good with layout design, lets move a bit into Java coding. Below is my activity code

public class SeekbarActivity extends Activity {

	private SeekBar volumeControl = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_seekbar);

		volumeControl = (SeekBar) findViewById(R.id.volume_bar);

		volumeControl.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			int progressChanged = 0;

			public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser){
				progressChanged = progress;
			}

			public void onStartTrackingTouch(SeekBar seekBar) {
				// TODO Auto-generated method stub
			}

			public void onStopTrackingTouch(SeekBar seekBar) {
				Toast.makeText(SeekbarActivity.this,"seek bar progress:"+progressChanged, 
						Toast.LENGTH_SHORT).show();
			}
		});
	}

}

Our activity implements SeekBar.OnSeekBarChangeListener; Basically SeekBar.OnSeekBarChangeListener is a public static interface that is used to listen the SeekBar events. The SeekBar.OnSeekBarChangeListener interface allows us to override the below methods.

  1. onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) – Used to notify that the progress level has changed.
  2. onStartTrackingTouch(SeekBar seekBar) – Used to notify that the user has started a touch gesture.
  3. onStopTrackingTouch(SeekBar seekBar) – Used to notify that the user has finished a touch gesture.

Output

Output of the above code is shown below

 Customizing Android Seekbar Example

Download Source Code

Download complete example source code from GitHub.

[download url=”https://github.com/javatechig/Android-Seekbar-Example”]
Total
0
Shares
guest
17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
jorsey
jorsey
9 years ago

nice example.

Karim
Karim
9 years ago

Thanks a lot for this example

Cpt.Thomas
Cpt.Thomas
9 years ago

Thx man

@danny117
@danny117
9 years ago

Thanks for the seekbar and thanks more for all the xml. I lifted the xml dropped it into a fragment and bam I have a really cool seek that overlays my main screen when I activate the fragment.

Vlad Palamarchuk
Vlad Palamarchuk
9 years ago

thank you GREAT!

javatechig
javatechig
9 years ago

All the code files are shown in the example above. Pls have a look into them. thanks

ranjithstar256
ranjithstar256
8 years ago

hi thanks for useful example 🙂 where can i download the codes?

gaon_ka_zamindar
gaon_ka_zamindar
8 years ago

It will be very helpful from next time if you share the source file.That is what opensource is about I think…

javatechig
javatechig
8 years ago

Thanks for your comment. We have missed to upload this piece of work on GitHub. However we have everything inline.

Thanks.

Bonhomme
Bonhomme
8 years ago

Silly question, but does background_view_rounded_single.xml go into the drawables folder, or does it go into the res layout folder as well?

javatechig
javatechig
8 years ago
Reply to  Bonhomme

just put it inside drawable folder

Bonhomme
Bonhomme
8 years ago

Oops ignore my previous question, worked it out. Can you help me understand/direct me to a tutorial for the background_view_rounded_single.xml file? I’ve never seen any of those terms before (android:startColor, endcolor, radius, statepressed, etc), and would like to get used to them.

Thanks for the tutorial, it’s very helpful 🙂

Priyanka
Priyanka
8 years ago

Nice One Why you not provide source zip code?
It tooks time to create.

barton555
barton555
8 years ago

I’ve done exactly the same. I have one problem in SeekbarActivity class, in 34 line. “seekbar cannot be resolved or is not a field”. I’ve tried to fix this by creating field seekbar in type “menu”, in R.java file but when I tried to run application, R.java file modified to last version, without seekbar field. Any ideas?

Alan
Alan
7 years ago
Reply to  barton555

You need to import the seekbar widget on your java file.

import android.widget.SeekBar;

radz
radz
7 years ago

any idea about two thumb range seekbar?

Previous Post
Android Tutorials

How to Turn off, Turn on Wifi in Android

Next Post
Android Tutorials

Sending SMS Message In Android

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
17
0
Would love your thoughts, please comment.x
()
x