personalizar - ¿Cómo crear ProgressBar circular en Android?

progressbar android circle

Question

¿Tienes alguna idea de cómo hacer una barra de progreso circular como la de la aplicación Google Fit? Me gusta la imagen de abajo.

Answer 1

Puedes probar esta biblioteca Circle Progress

Nota: utilice siempre el mismo ancho y alto para las vistas de progreso

DonutProgress:

 <com.github.lzyzsd.circleprogress.DonutProgress
        android:id="@+id/donut_progress"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:circle_progress="20"/>

CircleProgress:

  <com.github.lzyzsd.circleprogress.CircleProgress
        android:id="@+id/circle_progress"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:circle_progress="20"/>

ArcProgress:

<com.github.lzyzsd.circleprogress.ArcProgress
        android:id="@+id/arc_progress"
        android:background="#214193"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:arc_progress="55"
        custom:arc_bottom_text="MEMORY"/>

Answer 2

Es fácil crear esto usted mismo

En su diseño, incluya la siguiente ProgressBar con un dibujo específico ( tenga en cuenta que debe obtener el ancho de las dimensiones ). El valor máximo es importante aquí:

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:max="500"
    android:progress="0"
    android:progressDrawable="@drawable/circular" />

Ahora cree el dibujo en sus recursos con la siguiente forma. Juega con el radio (puedes usar innerRadius lugar de innerRadiusRatio ) y los valores de grosor.

circular (Pre Lollipop O Nivel API <21)

   <shape
        android:innerRadiusRatio="2.3"
        android:shape="ring"
        android:thickness="3.8sp" >
        <solid android:color="@color/yourColor" />
   </shape>

circular (> = Lollipop O Nivel API> = 21)

    <shape
        android:useLevel="true"
        android:innerRadiusRatio="2.3"
        android:shape="ring"
        android:thickness="3.8sp" >
        <solid android:color="@color/yourColor" />
     </shape>

useLevel es "falso" de forma predeterminada en el nivel 21 de API (Lollipop).

Iniciar animación

A continuación, en su código, use un ObjectAnimator para animar el campo de progreso de ProgessBar de su diseño.

ProgressBar progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", 0, 500); // see this max value coming back here, we animate towards that value
animation.setDuration(5000); // in milliseconds
animation.setInterpolator(new DecelerateInterpolator());
animation.start();

Detener la animación

progressBar.clearAnimation();

PD: a diferencia de los ejemplos anteriores, ofrece una animación suave.