如何在android中实现一个材质设计循环进度条

I want to make a material design circular progress bar like the one in Inbox by Gmail android app. How do I achieve this (in pre-lollipop devices)?

我想制作一个像Inbox by Gmail安卓应用程序中的材料设计循环进度条。我如何实现这一点（在棒棒糖前设备中）？

Am trying to achieve a similar effect like this. Inbox by Gmail material design circular progress bar

我试图达到类似的效果。收件箱通过Gmail材料设计循环进度条

7 个解决方案

#1

<ProgressBar
android:id="@+id/loading_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/your_customized_color"
android:layout_gravity="center" />

The effect looks like this:

效果如下：

#2

Nice implementation for material design circular progress bar (from rahatarmanahmed/CircularProgressView),

材料设计循环进度条的实现很好（来自rahatarmanahmed / CircularProgressView），

<com.github.rahatarmanahmed.cpv.CircularProgressView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/progress_view"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:cpv_indeterminate="true"/>

#3

I've backported the three Material Design progress drawables to Android 4.0, which can be used as a drop-in replacement for regular ProgressBar, with exactly the same appearance.

我已将三个Material Design进度绘图向后移植到Android 4.0，它可以用作常规ProgressBar的替代品，具有完全相同的外观。

These drawables also backported the tinting APIs (and RTL support), and uses ?colorControlActivated as the default tint. A MaterialProgressBar widget which extends ProgressBar has also been introduced for convenience.

这些drawable还向后移植了着色API（和RTL支持），并使用？colorControlActivated作为默认色调。为方便起见，还引入了扩展ProgressBar的MaterialProgressBar小部件。

DreaminginCodeZH/MaterialProgressBar

DreaminginCodeZH / MaterialProgressBar

This project has also been adopted by afollestad/material-dialogs for progress dialog.

该项目也被afollestad /材料对话框用于进度对话。

On Android 4.4.4:

在Android 4.4.4上：

On Android 5.1.1:

在Android 5.1.1上：

#4

Here is an awesome implementation of the material design circular intermediate progress bar https://gist.github.com/castorflex/4e46a9dc2c3a4245a28e. The implementation only lacks the ability add various colors like in inbox by android app but this does a pretty great job.

这是一个很棒的材料设计循环中间进度条实现https://gist.github.com/castorflex/4e46a9dc2c3a4245a28e。实现只缺乏添加各种颜色的能力，如Android应用程序的收件箱，但这是一个非常好的工作。

#5

In addition to cozeJ4's answer, here's updated version of that gist

除了cozeJ4的答案，这里还有该要点的更新版本

Original one lacked imports and contained some errors. This one is ready to use.

原始的一个缺乏进口，并包含一些错误。这个就可以使用了。

#6

The platform uses a vector drawable, so you can't reuse it as in in older versions.
However, the support lib v4 contains a backport of this drawable : http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java It has a @hide annotation (it is here for the SwipeRefreshLayout), but nothing prevents you from copying this class in your codebase.

该平台使用矢量drawable，因此您不能像旧版本那样重复使用它。但是，支持lib v4包含这个drawable的后端：http：//androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java它有一个@隐藏注释（这里是SwipeRefreshLayout），但没有什么能阻止你在代码库中复制这个类。

#7

Was looking for a way to do this using simple xml, but couldn't find any helpful answers, so came up with this.

正在寻找一种方法来使用简单的xml，但找不到任何有用的答案，所以想出了这个。

This works on pre-lollipop versions too, and is pretty close to the material design progress bar. You just need to use this drawable as the indeterminate drawable in the ProgressBar layout.

这也适用于棒棒糖前版本，并且非常接近材料设计进度条。您只需要将此drawable用作ProgressBar布局中的不确定drawable。

<?xml version="1.0" encoding="utf-8"?><!--<layer-list>-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360">
    <layer-list>
        <item>
            <rotate xmlns:android="http://schemas.android.com/apk/res/android"
                android:fromDegrees="-90"
                android:toDegrees="-90">
                <shape
                    android:innerRadiusRatio="2.5"
                    android:shape="ring"
                    android:thickness="2dp"
                    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

                    <gradient
                        android:angle="0"
                        android:endColor="#007DD6"
                        android:startColor="#007DD6"
                        android:type="sweep"
                        android:useLevel="false" />
                </shape>
            </rotate>
        </item>
        <item>
            <rotate xmlns:android="http://schemas.android.com/apk/res/android"
                android:fromDegrees="0"
                android:toDegrees="270">
                <shape
                    android:innerRadiusRatio="2.6"
                    android:shape="ring"
                    android:thickness="4dp"
                    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
                    <gradient
                        android:angle="0"
                        android:centerColor="#FFF"
                        android:endColor="#FFF"
                        android:startColor="#FFF"
                        android:useLevel="false" />
                </shape>
            </rotate>
        </item>
    </layer-list>
</rotate>

set the above drawable in ProgressBar as follows:

在ProgressBar中设置上面的drawable，如下所示：

  android:indeterminatedrawable="@drawable/above_drawable"