android 自定义Seekbar

先上效果图，最终实现的效果如下图:

第一步:自定义滑块，在res/drawable下新建thumb.xml文件,内容如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/white" />
    <size
        android:width="45dp"
        android:height="45dp" />

</shape>

第二步：自定义进度条,在res/drawable目录下新建seekbar_style.xml,内容如下

<?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="25dp" />
            <gradient
                android:angle="270"
                android:centerColor="#DCE4EC"
                android:centerY="0.75"
                android:endColor="#DCE4EC"
                android:startColor="#DCE4EC" />
        </shape>
    </item>
    <!--定义seekbar滑动条进度颜色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>

                <corners android:radius="25dp"/>
                <gradient android:type="linear" android:useLevel="true" android:startColor="#39ACE6" android:endColor="#39D7E6" />

            </shape>
        </clip>
    </item>
</layer-list>

第三步:自定义seerbar style来引用第一步和第二步中创建的xml文件,在style.xml中添加以下代码

  <!--自定义seekbarstyle-->
    <style name="CustomSeekbarStyle">
        <item name="android:maxHeight">45dp</item>
        <item name="android:splitTrack">false</item>
        <item name="android:indeterminateOnly">false</item>
        <item name="android:indeterminateDrawable">#FF0BB6D9</item>
        <item name="android:progressDrawable">@drawable/seekbar_style</item>
        <item name="background">@android:color/transparent</item>
        <item name="android:minHeight">45dp</item>
        <item name="android:thumbOffset">0dp</item>
        <item name="android:max">100</item>
        <item name="android:thumb">@drawable/thumb</item>
    </style>

第四步:在Seekbar控件中使用CustomSeekbarStyle

  <SeekBar
    style="@style/CustomSeekbarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="50" />

运行可以看到效果了。

其中需要注意android:maxHeight和android:minHeight两个属性，要指定下，这个是一个大坑。