How to add number scale inside android seekbar?

Question

I'm trying with the custom seekbar inside have number scale, But is not working. This seekbar must support all screen resolutions. how can i make like this. Please give your valuable idea.

My custom_seekbar.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"
    android:drawable="@drawable/unselect"/>
<item
    android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/select">
</item>
<item
    android:id="@android:id/progress"
    android:drawable="@drawable/select">
</item>

activity_main.xml

<LinearLayout 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:background="@color/default_screen_bg"
android:orientation="vertical"
tools:context=".MainActivity" >



<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:indeterminate="false"
    android:max="10"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:progressDrawable="@drawable/custom_seekbar" />

 </LinearLayout>

Unselesct.png

select.png

myresult screen like this

I'm expecting like this

Answer 1

There's number to solutions to the problem:

• Use 9patch image for backgorund (which is basically should be used as background for seekbar). Like the following:

(name should be unselect_patch.9.png) and slightly modify custom_seekbar.xml to look like the following:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/unselect_patch"/>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
                android:src="@drawable/select"
                android:tileMode="disabled" />
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
                android:src="@drawable/select"
                android:tileMode="disabled" />
        </clip>
    </item>

</layer-list>

• Just provide exact size of the image in layout (e.g. layout_width="@dimen/select_image_width");

To support all resolutions - provide images for different resolutions, as described in Supporting Multiple Screens. The same images will not work fine for all resolutions and here's better just follow best practices described in detail at the link above.