Android：自定义 ProgressBar、Switch 颜色

一、效果图

二、代码实现

1. 圆形进度条颜色设置方法1

xml中通过indeterminateTint设置圆形进度条颜色，此方法不兼容Android21以下的版本，若需要兼容Android21以下的版本，使用方法2即可

<ProgressBar
    android:indeterminateTint="#803F51B5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

2. 圆形进度条颜色设置方法2

代码中设置：

ProgressBar circleProgress = findViewById(R.id.circle_progress);
circleProgress.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.colorPrimaryDark), PorterDuff.Mode.SRC_ATOP);

3. 水平进度条颜色设置方法1

xml中通过backgroundTint、progressTint、secondaryProgressTint设置，此方法不兼容Android21以下的版本，若需要兼容Android21以下的版本，使用方法2即可

<ProgressBar
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    android:backgroundTint="@android:color/darker_gray"
    android:progressTint="@color/colorPrimary"
    android:secondaryProgressTint="#803F51B5"
    android:progress="25"
    android:secondaryProgress="50"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

4. 水平进度条颜色设置方法2

使用progressDrawable设置，新建bg_horizontal_progress.xml，放在drawable文件夹下：

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

    <!--3个层的顺序即为显示时的叠加顺序-->
    <!--背景色-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />

            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>

    <!--二级进度条的颜色-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="#803F51B5" />
            </shape>
        </clip>
    </item>

    <!--一级进度条的颜色，也可以直接替换成图片-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="@color/colorPrimaryDark" />
            </shape>
        </clip>
    </item>

</layer-list>

如果只需要一级进度条颜色，把二级进度条去掉即可，即：

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

    <!--2个层的顺序即为显示时的叠加顺序-->
    <!--背景色-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />

            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
    
    <!--一级进度条的颜色，也可以直接替换成图片-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="@color/colorPrimaryDark" />
            </shape>
        </clip>
    </item>

</layer-list>

在布局中使用bg_horizontal_progress.xml：

<ProgressBar
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    android:progressDrawable="@drawable/bg_horizontal_progress"
    android:progress="25"
    android:secondaryProgress="50"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

三、效果图完整代码

布局完整代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical">
    <TextView
        android:text="1.通过indeterminateTint设置："
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ProgressBar
        android:indeterminateTint="#803F51B5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="2.通过circleProgress.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.colorPrimaryDark), PorterDuff.Mode.SRC_ATOP)设置："
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ProgressBar
        android:id="@+id/circle_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="3.通过backgroundTint、progressTint、secondaryProgressTint设置："
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ProgressBar
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:backgroundTint="@android:color/darker_gray"
        android:progressTint="@color/colorPrimary"
        android:secondaryProgressTint="#803F51B5"
        android:progress="25"
        android:secondaryProgress="50"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:text="4.通过progressDrawable设置："
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ProgressBar
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:progressDrawable="@drawable/bg_horizontal_progress"
        android:progress="25"
        android:secondaryProgress="50"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

资源文件bg_horizontal_progress.xml

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

    <!--3个层的顺序即为显示时的叠加顺序-->
    <!--背景色-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />

            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>

    <!--二级进度条的颜色-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="#803F51B5" />
            </shape>
        </clip>
    </item>

    <!--一级进度条的颜色，也可以直接替换成图片-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />

                <solid android:color="@color/colorPrimaryDark" />
            </shape>
        </clip>
    </item>

</layer-list>

MainActivity完整代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ProgressBar circleProgress = findViewById(R.id.circle_progress);
        circleProgress.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.colorPrimaryDark), PorterDuff.Mode.SRC_ATOP);
    }
}

四、自定义 Switch 颜色

自定义 Style：

<style name="switch_style" parent="Theme.AppCompat.Light">
    <!--switch 打开时拇指按钮颜色-->
    <item name="colorControlActivated">@color/blue</item>
    <!--switch 关闭时拇指按钮颜色-->
    <item name="colorSwitchThumbNormal">@color/gray</item>
    <!--switch 关闭时轨迹的颜色，Switch 会将其设置成 30% 这个颜色-->
    <item name="android:colorForeground">@color/gray</item>
</style>

应用到 SwitchCompat 上：

android:theme="@style/switch_style"