Customizing seekbar in android

Question

I want to customize seekbar in android.

enter image description here

Can anybody guide me how it can be done? I am new to android.

Looks like a duplicate of http://stackoverflow.com/questions/3480456/seek-bar-change-path-color-from-yellow-to-white — Asahi, Jun 04 '11 at 12:17
Exactly what kind of customization are you looking for, can you clarify? — midhunhk, Aug 29 '12 at 13:40

βhargavḯ · Answer 1 · 2013-02-23T19:08:19.977

18

<SeekBar
                android:id="@+id/seekBar1"
                android:layout_width="match_parent"
                android:layout_height="34dip"
                android:progressDrawable="@drawable/strip"
                android:thumb="@drawable/icon_small"
                android:layout_weight="3.0" />

You can simply set progressDrawble,thumb and backgroung attribute and you will get all you want.

edited Feb 23 '13 at 19:08

answered May 07 '12 at 12:36

βhargavḯ

9,786
1
37
59

3

And this is an example on how it can be done: http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ – Ashok Goli Jun 06 '12 at 06:12

score 2 · Answer 2 · answered Mar 16 '12 at 06:17

// ------------ custom seekbar
 LayerDrawable layer = (LayerDrawable) verticalSeekBar_1
 .getProgressDrawable();

 Drawable draw1 = (Drawable) layer
 .findDrawableByLayerId(android.R.id.progress);

 Bitmap bitmap1 = BitmapFactory.decodeResource(getApplicationContext()
 .getResources(), R.drawable.scroll_on);

 draw1 = new ClipDrawable(new BitmapDrawable(bitmap1),
 Gravity.AXIS_PULL_BEFORE, ClipDrawable.HORIZONTAL);

 layer.setDrawableByLayerId(android.R.id.progress, draw1);

 Drawable draw2 = (Drawable) layer
 .findDrawableByLayerId(android.R.id.background);

 Bitmap bitmap2 = BitmapFactory.decodeResource(getApplicationContext()
 .getResources(), R.drawable.scroll_off);

 draw2 = new BitmapDrawable(bitmap2);
 layer.setDrawableByLayerId(android.R.id.background, draw2);

// --------------

Excellent. As the image may come from network. I have to know how to customize seekbar programatically but not in xml. — Yeung, Jan 23 '14 at 08:06

score 1 · Answer 3 · answered May 16 '13 at 11:54

XML code

 <SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/seek_bar"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:thumb="@drawable/thumbler_small"
    android:indeterminate="false" />

seek_bar.xml

 <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+android:id/SecondaryProgress"
        android:drawable="@drawable/first"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/second"/>
</layer-list>

first drawable is empty or shown not color full area.

second drawable is fill or color full area.

this link help your more.

Customizing seekbar in android

3 Answers3