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

Question

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

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

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

Answer 3

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

这些drawable还向后移植了着色API(和RTL支持),并?colorControlActivated用作默认色调.为方便起见,还引入了MaterialProgressBar扩展的小部件ProgressBar.

DreaminginCodeZH/MaterialProgressBar

此项目还被afollestad /材料对话框用于进度对话.

在Android 4.4.4上:

在Android 5.1.1上:

Answer 4

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

Answer 5

通过Material Components 库，您可以使用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:indicatorSize="xxdp"
      app:indeterminateAnimationType="contiguous"/>

哪里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

Answer 6

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

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

Answer 7

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

Answer 8

正在寻找一种使用 simple 来做到这一点的方法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"