Crea un indicador de progreso

Los indicadores de progreso muestran visualmente el estado de una operación. Usan el movimiento para llamar la atención del usuario sobre qué tan cerca está de completarse el proceso, como cargar o procesar datos. También pueden indicar que se está realizando el procesamiento, sin hacer referencia a qué tan cerca está de completarse.

Considera estos tres casos de uso en los que podrías usar un indicador de progreso:

  • Carga de contenido: Mientras se recupera contenido de una red, como la carga de una imagen o datos para un perfil de usuario.
  • Carga de archivos: Proporciona comentarios al usuario sobre cuánto tiempo podría tardar la carga.
  • Procesamiento prolongado: Mientras una app procesa una gran cantidad de datos, infórmale al usuario cuánto del total se completó.

En Material Design, hay dos tipos de indicadores de progreso:

  • Determinado: Muestra exactamente cuánto progreso se realizó.
  • Indeterminate: Se anima de forma continua sin tener en cuenta el progreso.

Del mismo modo, un indicador de progreso puede tener una de las siguientes formas:

  • Lineal: Es una barra horizontal que se completa de izquierda a derecha.
  • Circular: Es un círculo cuyo trazo crece en longitud hasta abarcar toda la circunferencia del círculo.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Crea indicadores determinados

Un indicador determinado refleja exactamente qué tan completa es una acción. Usa los elementos componibles LinearProgressIndicator o CircularProgressIndicator y pasa un valor para el parámetro progress.

En el siguiente fragmento, se proporciona un ejemplo relativamente detallado. Cuando el usuario presiona el botón, la app muestra el indicador de progreso y, además, inicia una corrutina que aumenta gradualmente el valor de progress. Esto hace que el indicador de progreso itere hacia arriba a su vez.

Resultados

Cuando la carga está parcialmente completa, el indicador lineal del ejemplo anterior aparece de la siguiente manera:

Del mismo modo, el indicador circular aparece de la siguiente manera:

Crea indicadores indeterminados

Un indicador indeterminado no refleja qué tan cerca está de completarse una operación. En cambio, usa el movimiento para indicarle al usuario que el procesamiento está en curso, aunque sin especificar ningún grado de finalización.

Para crear un indicador de progreso indeterminado, usa el elemento componible LinearProgressIndicator o CircularProgressIndicator, pero no pases un valor para progress. En el siguiente ejemplo, se muestra cómo puedes activar o desactivar un indicador indeterminado con la presión de un botón.

Resultados

El siguiente es un ejemplo de esta implementación cuando el indicador está activo:

El siguiente es un ejemplo de la misma implementación, pero con LinearProgressIndicator en lugar de CircularProgressIndicator.

Puntos clave

Si bien hay varios elementos componibles que puedes usar para crear indicadores de progreso coherentes con Material Design, sus parámetros no difieren mucho. Entre los parámetros clave que debes tener en cuenta, se incluyen los siguientes:

  • progress: Es el progreso actual que muestra el indicador. Pasa un Float entre 0.0 y 1.0.
  • color: Es el color del indicador, es decir, la parte del componente que refleja el progreso y que lo abarca por completo cuando se completa.
  • trackColor: Es el color del segmento sobre el que se dibuja el indicador.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de consumir para los usuarios.

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.