web-dev-qa-db-fra.com

Comment mettre en œuvre une barre de progression circulaire de conception de matériau dans android

Je souhaite créer une barre de progression de conception matérielle similaire à celle de la boîte de réception de Gmail Android app. Comment y parvenir (dans les appareils pré-Lollipop)?

J'essaie d'obtenir un effet similaire comme celui-ci. barre de progression circulaire de la conception matérielle de la boîte de réception Gmail

androidmaterial-design
58
cozeJ4

Voici une excellente implémentation de la barre de progression intermédiaire de la conception du matériau circulaire https://Gist.github.com/castorflex/4e46a9dc2c3a4245a28e . La mise en œuvre ne manque que la possibilité d'ajouter diverses couleurs, comme dans la boîte de réception de Android app, mais cela fait un très bon travail.

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

L'effet ressemble à ceci:

img

33
Lollo

Belle implémentation pour la barre de progression de la conception matérielle (à partir de 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

26
Fahim

J'ai rétroporté les trois éléments tirables de la progression de Material Design vers Android 4.0, qui peut être utilisé comme remplacement instantané pour ProgressBar normal, avec exactement le même aspect.

Ces dessinables ont également rétroporté les API de teinte (et le support RTL), et utilisent ?colorControlActivated comme teinte par défaut. Un widget MaterialProgressBar qui étend ProgressBar a également été introduit pour des raisons pratiques.

DreaminginCodeZH/MaterialProgressBar

Ce projet a également été adopté par afollestad/material-dialogs pour le dialogue de progression.

Sur Android 4.4.4:

Android 4.4.4

Sur Android 5.1.1:

Android 5.1.1

23
Hai Zhang

En plus de la réponse de cozeJ4 , voici version mise à jour de ce Gist

Le premier original manquait d'importations et contenait des erreurs. Celui-ci est prêt à être utilisé.

9
Dmide

La plate-forme utilise un vecteur dessinable, vous ne pouvez donc pas le réutiliser comme dans les versions antérieures.
Cependant, le support lib v4 contient un backport de ce dessin: http://androidxref.com/5.1.0_r1/xref/frameworks/support/v4/Java/Android/support/v4/ widget/MaterialProgressDrawable.Java Il possède une annotation @hide (c'est ici pour SwipeRefreshLayout), mais rien ne vous empêche de copier cette classe dans votre base de code.

6
Teovald

Je cherchais un moyen de faire cela en utilisant un simple xml, mais je ne trouvais pas de réponses utiles, alors nous avons eu ceci.

Cela fonctionne également sur les versions antérieures à Lollipop et est assez proche de la barre de progression de la conception du matériau. Vous devez simplement utiliser cette drawable comme indeterminate drawable dans la présentation 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>

définissez ce qui est dessinée dans ProgressBar comme suit:

  Android:indeterminatedrawable="@drawable/above_drawable"
4
user2520215