Android SeekBar
Android SeekBar is the extension of ProgressBar. SeekBar allows the user to change the value using touch event/draggable thumb/left right arrow keys. SeekBar has a thumb that can be slided in order to choose a value between 0 and some maximum that can be set from the developer. The user can increase the value by dragging the thumb right or by pressing the right arrow key. Similarly the user can decrease the value by dragging the thumb left or by pressing the left arrow key.
The seekbar has three states: drag start, changing and drag ended.
Example
In this example I will show you how to implement simple and custom SeekBar.
VIDEO DEMO
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java).
2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken two SeekBar one for Simple and another for Custom.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" android:padding="5dp" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Simple Seekabar" android:textSize="20sp" /> <SeekBar android:id="@+id/simple_seekbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" /> <TextView android:id="@+id/seek_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:gravity="right" android:textSize="15sp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="Custom Seekabar" android:textSize="20sp" /> <SeekBar android:id="@+id/custom_seekbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:max="100" android:progress="50" android:progressDrawable="@drawable/custom_progress" android:thumb="@drawable/thumb" /> <TextView android:id="@+id/custom_seek_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" android:gravity="right" android:textSize="15sp" /> </LinearLayout> |
3. For custom seekbar we need to create a new xml file for that in drawable folder and set it to seekbar as :
|
1 |
android:progressDrawable="@drawable/custom_progress" |
Here custom_progress is xml file created in drawable shown below :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- SeekBar Background --> <item android:id="@android:id/background"> <shape android:shape="rectangle" > <corners android:radius="5dp" /> <gradient android:angle="270" android:endColor="#DDFF" android:startColor="#DDCC" /> </shape> </item> <!-- SeekBar Secondary Progress --> <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> |
4. Now, come to MainActivity.java and add the following code. In this class we read the tracking on both seekbar and display the seek in textView as text and also work on three states of seekbar as listeners.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
package com.android_seekbar_demo; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.widget.SeekBar; import android.widget.SeekBar.OnSeekBarChangeListener; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends ActionBarActivity { private static SeekBar simple, custom; private static TextView seek_progress, custom_seek_progress; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); setListeners(); } // Initializing all views void init() { simple = (SeekBar) findViewById(R.id.simple_seekbar); custom = (SeekBar) findViewById(R.id.custom_seekbar); seek_progress = (TextView) findViewById(R.id.seek_progress); custom_seek_progress = (TextView) findViewById(R.id.custom_seek_progress); // Initially setting text to textViews seek_progress.setText("Progress Covered : " + simple.getProgress() // Get // progress + "/" + simple.getMax());// Get maximum progress custom_seek_progress.setText("Progress Covered : " + custom.getProgress() + "/" + custom.getMax()); } // Setting listeners to both seekbars void setListeners() { simple.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { // Initially progress should be 0 int progress = 0; @Override public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) { // On progress changed the progress value should also change progress = progresValue; Toast.makeText(getApplicationContext(), "Changing seekbar's progress", Toast.LENGTH_SHORT) .show(); } @Override public void onStartTrackingTouch(SeekBar seekBar) { Toast.makeText(getApplicationContext(), "Started tracking seekbar", Toast.LENGTH_SHORT).show(); } @Override public void onStopTrackingTouch(SeekBar seekBar) { // When tracking stops modify the textview text with progress // value seek_progress.setText("Progress Covered : " + progress + "/" + seekBar.getMax()); Toast.makeText(getApplicationContext(), "Stopped tracking seekbar", Toast.LENGTH_SHORT).show(); } }); custom.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { int progress = 0; @Override public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) { progress = progresValue; Toast.makeText(getApplicationContext(), "Changing seekbar's progress", Toast.LENGTH_SHORT) .show(); } @Override public void onStartTrackingTouch(SeekBar seekBar) { Toast.makeText(getApplicationContext(), "Started tracking seekbar", Toast.LENGTH_SHORT).show(); } @Override public void onStopTrackingTouch(SeekBar seekBar) { custom_seek_progress.setText("Progress Covered : " + progress + "/" + seekBar.getMax()); Toast.makeText(getApplicationContext(), "Stopped tracking seekbar", Toast.LENGTH_SHORT).show(); } }); } } |
5. Now, run the app and you will get the output as shown in video.
Thanks. 
1 Comment
Akshay
Wednesday, June 22nd, 2016thanks