Estoy tratando de crear una barra de progreso redondeada. Esto es lo que quiero lograr
Hay un anillo de fondo de color gris. Además de eso, aparece una barra de progreso de color azul que se mueve en una ruta circular de 0 a 360 en 60 o cualquier cantidad de segundos.
Aquí está mi código de ejemplo.
<ProgressBar
android:id="@+id/ProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="?android:attr/progressBarStyleLarge"
android:indeterminateDrawable="@drawable/progressBarBG"
android:progress="50"
/>
Para hacer esto, en el dibujo "progressBarBG", estoy creando una lista de capas y dentro de esa lista de capas estoy dando dos elementos como se muestra.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape
android:shape="ring"
android:innerRadius="64dp"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@color/grey" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape
android:shape="ring"
android:innerRadius="64dp"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@color/blue" />
</shape>
</clip>
</item>
Ahora, el primer anillo gris se genera bien. Sin embargo, el anillo azul comienza desde la izquierda del dibujo y se dirige hacia la derecha, tal como funciona una barra de progreso lineal. Así es como se muestra al 50% de progreso con la flecha de color rojo que muestra la dirección.
Quiero mover la barra de progreso azul en ruta circular como se esperaba.
fuente
Respuestas:
Aquí están mis dos soluciones.
Respuesta corta:
En lugar de crear un
layer-list
, lo separé en dos archivos. Uno paraProgressBar
y otro para su fondo.Este es el
ProgressDrawable
archivo (carpeta @drawable): circular_progress_bar.xmlY esto es por su
background
(carpeta @drawable): circle_shape.xmlY al final, dentro del diseño que estás trabajando:
Aquí está el resultado:
Respuesta larga:
Utilice una vista personalizada que herede el
android.view.View
Aquí está el proyecto completo en github
fuente
setProgress
método y luego pasar el valor. google.com/…android:fromDegrees="270" android:toDegrees="270"
resolví! ¡Muchas gracias!Lo he hecho de manera fácil:
Por favor, compruebe la captura de pantalla para el mismo.
CustomProgressBarActivity.java :
activity_custom_progressbar.xml :
custom_progressbar_drawable.xml :
Espero que esto te ayudará.
fuente
He escrito un ejemplo detallado en la barra de progreso circular en Android aquí en mi blog demonuts.com . También puede encontrar el código fuente completo y la explicación allí.
Así es como hice una barra de progreso circular con porcentaje dentro del círculo en código puro sin ninguna biblioteca.
primero crea un archivo dibujable llamado
circular.xml
Ahora en su
activity_main.xml
complemento siguiente:En
activity_main.xml
He usado una imagen circular con fondo blanco para mostrar el fondo blanco alrededor del porcentaje. Aquí está la imagen:Puede cambiar el color de esta imagen para establecer un color personalizado alrededor del porcentaje de texto.
Ahora finalmente agregue el siguiente código a
MainActivity.java
:Si desea hacer una barra de progreso horizontal, siga este enlace, tiene muchos ejemplos valiosos con código fuente:
http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar
fuente
Me di cuenta de una biblioteca de código abierto en GitHub CircularProgressBar que hace exactamente lo que quieres de la manera más simple posible:
USO
Para hacer un ProgressBar circular, agregue CircularProgressBar en su diseño XML y agregue la biblioteca CircularProgressBar en su proyector o también puede tomarlo a través de Gradle:
XML
Debe usar las siguientes propiedades en su XML para cambiar su CircularProgressBar.
Propiedades:
app:progress
(entero) >> predeterminado 0app:progressbar_color
(color) >> predeterminado NEGROapp:background_progressbar_color
(color) >> GRIS predeterminadoapp:progressbar_width
(dimensión) >> 7dp predeterminadoapp:background_progressbar_width
(dimensión) >> 3dp predeterminadoJAVA
Bifurque o descargue esta biblioteca aquí >> https://github.com/lopspower/CircularProgressBar
fuente
Aquí hay una vista personalizada simple para mostrar el progreso del círculo. Puede modificar y optimizar más para adaptarlo a su proyecto.
Ejemplo usando
xml
Kotlin
Resultado
fuente
Soy nuevo, así que no puedo comentar, pero pensé en compartir la solución perezosa. También uso el enfoque original de Pedram, y me encontré con el mismo problema de Lollipop. Pero alanv en otra publicación tenía una solución de una línea. Es algún tipo de error o descuido en API21. Literalmente solo agregue
android:useLevel="true"
a su círculo progreso xml. El nuevo enfoque de Pedram sigue siendo la solución adecuada, pero pensé que también compartiría la solución perezosa.fuente
pruebe este método para crear un mapa de bits y establecerlo en vista de imagen.
fuente
https://github.com/passsy/android-HoloCircularProgressBar es un ejemplo de una biblioteca que hace esto. Como dijo Tenfour04, tendrá que ser algo personalizado, ya que esto no se admite directamente desde el primer momento. Si esta biblioteca no se comporta como lo desea, puede bifurcarla y modificar los detalles para que funcione a su gusto. Si implementa algo que otros pueden reutilizar, ¡incluso podría enviar una solicitud de extracción para volver a fusionarla!
fuente
@Pedram, su solución anterior también funciona bien en lollipop (y mejor que la nueva, ya que se puede usar en todas partes, incluidas las vistas remotas) simplemente cambie su
circular_progress_bar.xml
código a esto:fuente
fuente
Con la Biblioteca de componentes de material puede usar
ProgressIndicator
con unWidget.MaterialComponents.ProgressIndicator.Circular.Determinate
estilo.Algo como:
Puedes usar estos atributos:
circularRadius
: define el radio del indicador de progreso circulartrackColor
: el color utilizado para la pista de progreso. Si no se define, se establecerá en elindicatorColor
y se aplicaráandroid:disabledAlpha
desde el tema.indicatorColor
: el color único utilizado para el indicador en modo determinado / indeterminado. Por defecto usa el color primario del temaUse
progressIndicator.setProgressCompat((int) value, true);
para actualizar el valor en el indicador.Nota: requiere al menos la versión
1.3.0-alpha01
.fuente
1.3.0-alpha01
.Cambio
a
para el segundo sahpe con
id="@android:id/progress
espero que funcione
fuente