Как реализовать круговую полосу прогресса дизайна материала в android

Question

Я хочу сделать круговой индикатор выполнения материала, как тот, который находится в Inbox от приложения Gmail android. Как мне это достичь (в устройствах с предварительным леллипопом)?

Я пытаюсь добиться подобного эффекта. Inbox by Gmail material design circular progress bar

Answer 1

Вот удивительная реализация кругового промежуточного шага прогресса материала https://gist.github.com/castorflex/4e46a9dc2c3a4245a28e. В реализации только отсутствует возможность добавлять различные цвета, например, в папку «Входящие» с помощью приложения для Android, но это делает отличную работу.

Answer 2

В дополнение к ответ cozeJ4, вот это updated version of that gist

Оригинал один недоставало импорта и содержит некоторые ошибки. Этот готовый к использованию.

Answer 3

Хорошей реализация для материала дизайна кругового индикатора выполнения (от 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 4

Платформа использует вектор вытяжку, так что вы не можете использовать его как в в более ранних версиях.
Однако поддержка Lib v4 содержит Backport этого Drawable: http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/java/android/support/v4/widget/MaterialProgressDrawable.java Он имеет @hide аннотацию (это здесь SwipeRefreshLayout), но ничто не мешает вам скопировать этот класс в вашем коде.

Answer 5

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

Я портированном три материала Дизайн прогресс в Android вводимого коэффициента 4.0, который может быть использован в качестве дроп-ин для замены регулярных ProgressBar, с точно таким же внешним видом.

Эти чертежи также отображали тонирующие API (и поддержку RTL) и использовали ?colorControlActivated в качестве значения по умолчанию. A MaterialProgressBar виджет, который распространяется ProgressBar также был введен для удобства.

DreaminginCodeZH/MaterialProgressBar

Этот проект также был принят afollestad/material-dialogs для диалога прогресса.

На Android 4.4.4:

На Android 5.1.1:

Answer 7

искал способ сделать это с помощью простой 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 следующим образом:

android:indeterminatedrawable="@drawable/above_drawable"