Search code examples
androiduser-interfaceseekbarandroid-seekbar

Android custom Seekbar from drawable

Could you please help me to draw custom Seekbar like shown in this picture -

enter image description here

Here is my code:

<android.support.v7.widget.AppCompatSeekBar
            android:id="@+id/volume_seekbar"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:progressDrawable="@drawable/seekbar_drawable"/>

seekbar_drawable.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/seekbar_background" />
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/seekbar_progress" />
</layer-list>

seekbar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <gradient
                android:layout_height="20dp"
                android:centerY="0.5"/>
        </shape>
    </item>
    <item>
        <clip>
            <bitmap
                android:layout_height="10dp"
                android:src="@drawable/volume_empty"
                android:tileMode="repeat" />
        </clip>
    </item>
</layer-list>

seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
            <shape>
                <gradient
                    android:centerY="0.5"
                    android:endColor="@color/colorWhite"
                    android:startColor="@color/colorWhite" />
            </shape>
        </clip>
    </item>
    <item>
        <bitmap
            android:src="@drawable/volume_empty"
            android:tileMode="repeat" />
    </item>
</layer-list>

where @drawable/volume_empty is volume_empty.png

Solution

  • I have found solution.

    seekbar_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <gradient
                android:centerY="0.5"/>
        </shape>
    </item>
    <item>
        <clip>
            <bitmap
                android:src="@drawable/ic_volume_empty"
                android:tileMode="repeat" />
        </clip>
    </item>
</layer-list>

    seekbar_progress.xml:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
            <bitmap
                android:src="@drawable/ic_volume_full"
                android:tileMode="repeat" />
        </clip>
    </item>
    <item>
        <bitmap
            android:src="@drawable/ic_volume_empty"
            android:tileMode="repeat" />
    </item>
</layer-list>

    I've added similar transparent padding in both images, like ic_volume_empty - ic_volume_empty and ic_volume_full - ic_volume_full