Android 自定義SeekBar顯示效果

xml中

<SeekBar
                android:id="@+id/seekBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:paddingStart="9dp"
                android:paddingEnd="9dp"
                style="@style/CustomSeekbarStyle"
                android:progress="0" />
複製代碼

style

<style name="CustomSeekbarStyle" >
        <item name="android:maxHeight">4dp</item>
        <item name="android:indeterminateOnly">false</item>
        <item name="android:thumb">@drawable/thumb_image</item>
        <item name="android:progressDrawable">@drawable/seekbar_progress_drawable</item>
        <item name="android:minHeight">4dp</item>
    </style>
複製代碼

自定義drawable的進度條

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--定義seekbar滑動條條的底色-->
    <item android:id="@android:id/background">
            <shape>
                <corners android:radius="4dp"/>
                <solid android:color="#E6EEF4"/>
            </shape>
    </item>
    <!--定義seekbar滑動進度顏色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="4dp" />
                <gradient
                        android:angle="0"
                        android:endColor="#1ABABB"
                        android:startColor="#35D8AD" />
            </shape>
        </clip>
    </item>
</layer-list>
複製代碼

自定義滑塊樣式drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <size
                    android:height="15dp"
                    android:width="15dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:drawable="@drawable/preview_progress_icon"/>
</layer-list>
複製代碼

滑塊圖片

效果圖