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>
相关文章
|
4天前
|
Android开发
How to change android indeterminate ProgressBar co
How to change android indeterminate ProgressBar co
13 4
|
2天前
|
存储 消息中间件 缓存
Android应用开发:实现自定义View的高效绘制
【5月更文挑战第12天】 在Android开发中,创建高性能的自定义视图是一项挑战,它要求开发者深入理解Android的绘图机制以及UI渲染过程。本文将探讨如何优化自定义View的绘制流程,减少不必要的重绘和布局计算,以提升应用的响应速度和流畅度。我们将介绍几种关键策略,包括利用硬件加速、缓存绘制内容和使用高效的数据结构来存储视图状态。通过实例分析和性能对比,读者将学会如何在自己的应用中运用这些技巧,从而打造出更加流畅和响应迅速的用户界面。
|
4天前
|
XML Android开发 数据格式
Android下自定义Button样式
Android下自定义Button样式
10 3
|
4天前
|
XML Java Android开发
如何美化android程序:自定义ListView背景
如何美化android程序:自定义ListView背景
|
4天前
|
搜索推荐 Android开发
自定义Android标题栏TitleBar布局
自定义Android标题栏TitleBar布局
|
21天前
|
Android开发 芯片
Android源代码定制:移除无用lunch|新建lunch|自定义customize.mk
Android源代码定制:移除无用lunch|新建lunch|自定义customize.mk
26 3
|
21天前
|
移动开发 Java Unix
Android系统 自动加载自定义JAR文件
Android系统 自动加载自定义JAR文件
44 1
|
Android开发
Android Studio 自定义设置注释模板
Android Studio 自定义设置注释模板
381 0
Android Studio 自定义设置注释模板
|
11天前
|
存储 安全 Android开发
安卓应用开发:构建一个高效的用户登录系统
【5月更文挑战第3天】在移动应用开发中,用户登录系统的设计与实现是至关重要的一环。对于安卓平台而言,一个高效、安全且用户体验友好的登录系统能够显著提升应用的用户留存率和市场竞争力。本文将探讨在安卓平台上实现用户登录系统的最佳实践,包括对最新身份验证技术的应用、安全性考量以及性能优化策略。
|
13天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比