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: