Android自定义ProgressBar样式:渐变圆角水平进度条

简介: Android自定义ProgressBar样式:渐变圆角水平进度条关键是android:progressDrawable的设置,设置一个android:progressDrawable资源,但是android:progressDrawable需要是一个layer-list。
Android自定义ProgressBar样式:渐变圆角水平进度条


关键是android:progressDrawable的设置,设置一个android:progressDrawable资源,但是android:progressDrawable需要是一个layer-list。

先看运行效果:



实现的xml布局代码文件:
<?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:orientation="vertical"
    android:padding="10dp">

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:max="100"
        android:progress="80"
        android:progressDrawable="@drawable/progress_red" />

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginTop="15dp"
        android:max="100"
        android:progress="60"
        android:progressDrawable="@drawable/progress_yellow" />

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginTop="15dp"
        android:max="100"
        android:progress="40"
        android:progressDrawable="@drawable/progress_gray" />
</LinearLayout>

红黄灰三种progressDrawable分别需要三套res/drawable下面的资源文件。
第一套,红色系:

红色渐变res/drawable/progress_red.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">
        <shape>
            <corners android:radius="50dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/round_red"
            android:scaleWidth="100%" />
    </item>
</layer-list>

红色渐变引用的圆角渐变res/drawable/round_red.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="50dp" />

    <gradient
        android:angle="0"
        android:endColor="#FA6666"
        android:startColor="#F44336"
        android:type="linear" />
</shape>

第二套,黄色系:

黄色渐变res/drawable/progress_yellow.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">
        <shape>
            <corners android:radius="50dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/round_yellow"
            android:scaleWidth="100%" />
    </item>
</layer-list>

黄色渐变引用的圆角渐变res/drawable/round_yellow.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="50dp" />

    <gradient
        android:angle="0"
        android:endColor="#FFDC9E "
        android:startColor="#D9983B"
        android:type="linear" />
</shape>



第三套,灰色系:
灰色渐变res/drawable/progress_gray.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">
        <shape>
            <corners android:radius="50dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/round_gray"
            android:scaleWidth="100%" />
    </item>
</layer-list>

灰色渐变引用的圆角渐变res/drawable/round_gray.xml:

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

    <corners android:radius="50dp" />

    <gradient
        android:angle="0"
        android:endColor="#E5E5E7"
        android:startColor="#BDBDBD "
        android:type="linear" />
</shape>
相关文章
|
10天前
|
Java API 调度
Android系统 自定义开机广播,禁止后台服务,运行手动安装应用接收开机广播
Android系统 自定义开机广播,禁止后台服务,运行手动安装应用接收开机广播
37 0
|
10天前
|
存储 Java Linux
Android Mstar增加IR 自定义遥控头码完整调试过程
Android Mstar增加IR 自定义遥控头码完整调试过程
24 1
|
10天前
|
Android开发 芯片
Android源代码定制:移除无用lunch|新建lunch|自定义customize.mk
Android源代码定制:移除无用lunch|新建lunch|自定义customize.mk
25 3
|
10天前
|
移动开发 Java Unix
Android系统 自动加载自定义JAR文件
Android系统 自动加载自定义JAR文件
33 1
|
10天前
|
Shell Android开发 开发者
Android系统 自定义动态修改init.custom.rc
Android系统 自定义动态修改init.custom.rc
26 0
|
10天前
|
存储 安全 Android开发
Android系统 自定义系统和应用权限
Android系统 自定义系统和应用权限
23 0
|
20天前
|
XML 数据可视化 Android开发
深入探究Android中的自定义View组件开发
【4月更文挑战第12天】在安卓应用开发中,创建具有独特交互和视觉表现的自定义View组件是增强用户体验的重要手段。本文将详细阐述如何从头开始构建一个Android自定义View,包括理解View的工作原理、处理绘制流程、事件分发机制以及属性的自定义与管理。通过具体案例分析,我们将一步步实现一个可定制的动态进度条,不仅具备基础功能,还能根据业务需求进行扩展,体现高度的产品个性化。
|
Android开发
Android Studio 自定义设置注释模板
Android Studio 自定义设置注释模板
373 0
Android Studio 自定义设置注释模板
|
10天前
|
消息中间件 网络协议 Java
Android 开发中实现数据传递:广播和Handler
Android 开发中实现数据传递:广播和Handler
14 1
|
11天前
|
Linux 编译器 Android开发
FFmpeg开发笔记(九)Linux交叉编译Android的x265库
在Linux环境下,本文指导如何交叉编译x265的so库以适应Android。首先,需安装cmake和下载android-ndk-r21e。接着,下载x265源码,修改crosscompile.cmake的编译器设置。配置x265源码,使用指定的NDK路径,并在配置界面修改相关选项。随后,修改编译规则,编译并安装x265,调整pc描述文件并更新PKG_CONFIG_PATH。最后,修改FFmpeg配置脚本启用x265支持,编译安装FFmpeg,将生成的so文件导入Android工程,调整gradle配置以确保顺利运行。
36 1
FFmpeg开发笔记(九)Linux交叉编译Android的x265库