Android Seekbar Scrubber

Description:

In this article I'm gonna show you scrubber seek bar demo with drawable in android.
It include a layer-list with background and progress properties of seek bar.Thats it!!!

Scrubber Seek bar

Lets get started!!!

Step 1:Create a drawable scrubber_layer_list.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">  
       <size android:height="5dp"/>  
       <solid android:color="#ffc6c8cc"/>  
       <stroke android:color="#000000" android:width="1dp"/>  
     </shape>  
     </item>  
   <item android:id="@android:id/progress">  
     <clip>  
       <shape android:shape="rectangle">  
         <size android:height="5dp"/>  
         <solid android:color="#ff7092cc"/>  
         <stroke android:color="#000000" android:width="1dp"/>  
       </shape>  
     </clip>  
   </item>  
 </layer-list>  

The above drawable is used to create the background and progress of seek bar using layer-list..



Step 2: Create a simple layout(activity_main) containing seekbar and textView.

 <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:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   tools:context=".MainActivity">  
   <SeekBar  
     android:max="100"  
     android:progress="0"  
     android:thumb="@null"  
     android:progressDrawable="@drawable/scrubber_layer_list"  
     android:layout_centerInParent="true"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:id="@+id/seekBar"/>  
   <TextView  
     android:id="@+id/scrubber_update_tv"  
     android:layout_below="@id/seekBar"  
     android:layout_centerInParent="true"  
     android:layout_marginTop="10dp"  
     android:textStyle="bold"  
     android:textSize="16sp"  
     android:text="0%"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
 </RelativeLayout>  

Step 3: Finally add listener to witness the seek percentage.

 public class MainActivity extends ActionBarActivity {  
   private TextView scrubberTv;  
   private SeekBar seekBar;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     scrubberTv = (TextView) findViewById(R.id.scrubber_update_tv);  
     seekBar = (SeekBar) findViewById(R.id.seekBar);  
     seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {  
       @Override  
       public void onProgr --Cha!-- (SeekBar seekBar, int i, boolean b) {  
         scrubberTv.setText("" + i +  --);  
       }  
       @Override  
       public void onStartTrackingTouch(SeekBar seekBar) {  
       }  
       @Override  
       public void onStopTrackingTouch(!-- Bar seekBar) {  
       }  
     });  
   }  
 }  

Output: