¿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.
¿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.
Respuestas:
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"/>
Es fácil crear esto tú mismo
En su diseño, incluya lo 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 dibujable en sus recursos con la siguiente forma. Juega con el radio (puedes usar en 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
Luego, en su código, use un ObjectAnimator
para animar el campo de progreso 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 animación
progressBar.clearAnimation();
PD: a diferencia de los ejemplos anteriores, ofrece una animación suave.