Android Progressbar进度条样式调整为圆角矩形,且改变颜色

美工设计的进度条是圆角矩形的，与Android默认的样式有所区别,可以通过样式progressDrawable属性来对进度条组件进行调整

纯色和圆角矩形

实现效果：

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_marginBottom="75dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        tools:progress="10"
        android:progressDrawable="@drawable/shape_bg_progressbar"
        android:layout_width="0dp"
        android:layout_height="9dp"/>

上面的只是个代码示例,具体宽高属性还需要自行调整...

shape_bg_progressbar.xml

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#363636" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#EA483F" />
                <corners android:radius="5dp" />
            </shape>
        </clip>
    </item>
</layer-list>

PS: 注意第二个的<clip>标签

渐变

实现效果

如果有渐变的且需要渐变刚好到现有进度(上图),可以用下面这个实现(外层需要使用个scale)

如果使用上面的那个clip,效果则是进度为满的时候才会显示渐变,而且进度尽头可能不是圆角矩形

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#363349" />
            <corners android:radius="17dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress">

        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle">
                <gradient
                    android:centerColor="#FF2B71FF"
                    android:endColor="#FFE641C4"
                    android:startColor="#FF04F0FE" />
                <corners android:radius="17dp" />
            </shape>
        </scale>

    </item>
</layer-list>