¿Cómo crear ProgressBar circular en Android? [cerrado]


152

¿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.

ingrese la descripción de la imagen aquí


77
De hecho, he hecho algo como esto recientemente. Este podría ser un punto de partida útil. github.com/daentech/CircularDemo
daentech

@daentech ¡Genial! gracias
Mohamed

1
¿Alguien recibió una respuesta donde los bordes de la parte de carga se redondean como en el ejemplo?
Siebe

1
@Siebe puede usar la biblioteca que mencioné en mi respuesta. Se puede personalizar para cargar la pieza como desee.
WannaBeGeek

2
tal vez esto pueda guiarte
gmemario

Respuestas:


128

Puedes probar esta biblioteca Circle Progress

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

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

cómo están mostrando valores en progreso al intentar setProgress en void protegido onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); } pero no está funcionando
Erum

@ Top Cat, ¿cómo puedo agregar animaciones como acercar el progreso del círculo o mikinw.blogspot.com/2013/03/glow-effect.html
User3233280

29
mayor licencia
radu122

19
Licencia de WTF. Jaja.
z21

1
error de prefijo sin consolidar
Animesh Mangla

338

Es fácil crear esto tú mismo

En su diseño, incluya lo siguiente ProgressBarcon 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 innerRadiuslugar 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 ObjectAnimatorpara animar el campo de progreso ProgessBarde 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.


66
los pasos están ahí, si sigues esto, 99% seguro de que obtienes el resultado.
Murtaza Khursheed Hussain

55
Funciona de maravilla. Ojalá pueda votar esto más de una vez
Mushtaq Jameel

2
No funciona para mí, la vista no es visible
JMRboosties

9
No sé lo que está haciendo, la vista no es visible, no es una descripción completa del problema
Murtaza Khursheed Hussain

66
Parece que su respuesta puede funcionar mucho ... pero una imagen = 1000 palabras ... así que si agrega su salida como captura de pantalla, puede ser útil para futuros usuarios - En mi humilde opinión
Ranjith Kumar
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.