Before starting coding for
Custom SeekBar,You must have good concept of following topics.
3.Selector
Layer List: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.
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:id="@android:id/background"
android:drawable="@drawable/seekbar_total"/>
<item
android:id="@android:id/secondaryProgress">
<clip
android:drawable="@drawable/seekbar_buffer"
/>
</item>
<item
android:id="@android:id/progress">
<clip
android:drawable="@drawable/seekbar_played"
/>
</item>
</layer-list>
Animation
List:A AnimationDrawable is a
drawable object that is used to create frame-by-frame animation.It's
oneshot element
should be true if u want loop animation otherwise false.
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"
>
<item
android:drawable="@drawable/progressbar_indeterminate1"
android:duration="200"/>
<item
android:drawable="@drawable/progressbar_indeterminate2"
android:duration="200"/>
<item
android:drawable="@drawable/progressbar_indeterminate3"
android:duration="200"/>
</animation-list>
Selector:A
controller for the selection of
SelectableChannel
objects.It
has different properties like focus,pressed which is used to describe
the current status of View.
<?xml
version="1.0"
encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/seekthumb_hover"
android:state_enabled="true"
android:state_focused="true"
android:state_pressed="false"/>
<item
android:drawable="@drawable/seekthumb_onpress"
android:state_enabled="true"
android:state_pressed="true"/>
<item
android:drawable="@drawable/seekthumb_active"
android:state_enabled="true"
android:state_focused="false"
android:state_pressed="false"/>
<item
android:drawable="@drawable/seekthumb_normal"
android:state_enabled="false"
android:state_focused="true"/>
<item
android:drawable="@drawable/seekthumb_normal"
android:state_enabled="false"
android:state_focused="false"/>
<item
android:drawable="@drawable/seekthumb_active"/>
</selector>
Now
you need following images for desinging SeekBar
1.seekbar_total.9.png
2.seekbar_buffer.9.png
3.seekbar_played.9.png
4.progressbar_indeterminate1.9.png
5.progressbar_indeterminate2.9.png
6.progressbar_indeterminate3.9.png
7.seekthumb_hover.9.png
8.seekthumb_onpress.9.png
9.seekthumb_active.9.png
10.seekthumb_normal.9.png
Now
create xml layout
seekbar.xml
<SeekBar
android:id="@+id/mediacontroller_progress"
style="@style/SeekBarHorizontal"
android:layout_width="0dip"
android:layout_height="62dip"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
/>
Create
styles.xml inside values folder.
<style
name="SeekBarHorizontal">
<item
name="android:indeterminateOnly">false</item>
<item
name="android:progressDrawable">@drawable/progress_horizontal</item>
<item
name="android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
<item
name="android:minHeight">62dip</item>
<item
name="android:maxHeight">62dip</item>
<item
name="android:thumb">@drawable/thumb_background</item>
<item
name="android:scaleType">fitCenter</item>
<item
name="android:layout_width">wrap_content</item>
<item
name="android:layout_height">wrap_content</item>
</style>
Comments
Post a Comment