Question

我想制作一个材料设计循环进度条，就像收件箱中的Gmail安卓程序一样。我如何实现这一点（在棒棒糖前设备中）？

我试图达到类似的效果。 Inbox by Gmail material design circular progress bar

Answer 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" />

效果如下：

Answer 2

材料设计循环进度条的良好实施（来自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"/>

enter image description here

Answer 3

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

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

DreaminginCodeZH/MaterialProgressBar

afollestad/material-dialogs已采用此项目进行进度对话。

在Android 4.4.4上：

在Android 5.1.1上：

Answer 4

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

Answer 5

除 cozeJ4的回答外，这里还有updated version of that gist

原始版本缺少导入并包含一些错误。这个就可以使用了。

Answer 6

平台使用矢量绘图，因此您无法像旧版本那样重复使用它但是，支持lib v4包含此drawable的backport： http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java 它有一个sudo apt-get install ruby-dev注释（它在这里用于SwipeRefreshLayout），但没有什么可以阻止你在代码库中复制这个类。

Answer 7

通过材料组件库，您可以使用 CircularProgressIndicator ：

类似的东西：

<com.google.android.material.progressindicator.CircularProgressIndicator
      android:indeterminate="true"          
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:indicatorColor="@array/progress_colors"
      app:circularRadius="xxdp"
      app:growMode="incoming"/>

其中array/progress_colors是具有以下颜色的数组：

  <integer-array name="progress_colors">
    <item>@color/yellow_500</item>
    <item>@color/blue_700</item>
    <item>@color/red_500</item>
  </integer-array>

注意：它至少需要版本1.3.0-alpha04

Answer 8

正在寻找使用简单xml执行此操作的方法，但找不到任何有用的答案，所以想出了这个。

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

<?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>

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

  android:indeterminatedrawable="@drawable/above_drawable"

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

8 个答案: