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

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>