Android Material Design 进度条 自定义进度条样式

来源:互联网 发布:做demo的软件 编辑:程序博客网 时间:2024/05/20 00:17

Material Design 进度条

圆形进度条

创建

设置主题为 Theme.AppCompat.Light.NoActionBar
或 @android:style/Theme.Material.Light

修改颜色

添加indeterminateTint属性为颜色
设置indeterminateTintMode属性 为 src_atop

    <ProgressBar            android:indeterminateTint="#FFFF0000"            android:indeterminateTintMode="src_atop"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />

横向进度条

<android.support.v4.widget.ContentLoadingProgressBar    android:indeterminate="false"    android:id="@+id/pb5_progress_hololight"    style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal"    android:layout_width="match_parent"    android:layout_height="wrap_content"/>

进度指示模式

    android:indeterminate="false"

未知进度模式

    android:indeterminate="true"

样式

标准,黄色进度条

style="@android:style/Widget.ProgressBar.Horizontal"

Holo进度条,支持4.0

style="@android:style/Widget.Holo.ProgressBar.Horizontal"

Material进度条,5.0以上

style="@android:style/Widget.Material.ProgressBar.Horizontal"

自定义样式

    <ProgressBar           android:id="@+id/progressbar"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:indeterminateDrawable="@drawable/progressbar"          />
progressbar.xml
<?xml version="1.0" encoding="utf-8"?>  <animated-rotate          xmlns:android="http://schemas.android.com/apk/res/android"           android:pivotX="50%" android:pivotY="50%"               android:fromDegrees="0"             android:toDegrees="360">          <shape               android:shape="ring"               android:innerRadiusRatio="3"                android:thicknessRatio="8"               android:useLevel="false">                <gradient                   android:type="sweep"                   android:useLevel="false"                    android:startColor="#6BD3FF"                           android:centerColor="#FF7121"                    android:centerY="0.50"                   android:endColor="#FFFF00" />            </shape>    </animated-rotate>  
0 0