Android seekbar style

Question

I'm trying to create a custom seekbar for my Android application. I found many solutions but all of them are using "custom" drawing code for background. My seekbar is simple - i have an image (only one) for the background, and an image for the thumb. The problem i have is scaling: i want both "thumb" and "background" image to scale according to the size of the seekbar control. How to do that? It's a bit funny that, when using images (drawables) as background / thumb Android won't scale them by default but leaves them in original size :)

Answer 1

You can make the foreground, background and the slider of the thumb.

This is an alright tutorial:

Tutorial 2

And here is how you make custom 9.png images:

nine-patch

Answer 2

1 You can use an xml (progress.xml) to define the look and feel of ProgressBar & place it inside the res directory.

2 The thumb can be defined inside the layout where the ProgressBar is declared.

3 The thumb can be an image (imgthumb.png) yet, I have noticed 2 best practices

1. The best thumb height is 2.5 times the height of the ProgressBar.
2. It is best rendered when the height & width of the thumb image are exactly the same as the diameter of the thumb (i.e. for circular thumb) & finally, place different sizes of the thumb in each bucket for different pixel densities.

Here are the sources

1 progress.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" >
        <corners android:radius="5dp" />

        <gradient
            android:angle="270"
            android:endColor="#cccccc"
            android:startColor="#d3d3d3" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="0dp" />

            <gradient
                android:angle="270"
                android:endColor="#ff0000"
                android:startColor="#ff0000" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="270"
                android:endColor="#1dc0ff"
                android:startColor="#1dc0ff" />
        </shape>
    </clip>
</item>

2 Defining the Seekbar in the layout with a custom thumb

<SeekBar
        android:id="@+id/song_seekbar"
        android:layout_width="0dp"
        android:layout_weight=".84"

        android:minHeight="8dip"
        android:maxHeight="8dip"

        android:layout_height="wrap_content"

        android:layout_centerVertical="true"
        android:layout_centerInParent="true"

        android:progressDrawable="@drawable/progressbar"
        android:thumb="@drawable/imgthumb" />

Hope this helps you!