Indicador de progreso de componentes de diseño de materiales en Android

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en sus aplicaciones de Android. Desarrollados por un equipo central de ingenieros y diseñadores de UX en Google, estos componentes permiten un flujo de trabajo de desarrollo confiable para crear aplicaciones de Android atractivas y funcionales. El diseño de materiales en Android es una de las características clave que atrae y atrae al cliente hacia la aplicación. Este es un tipo especial de diseño, que está guiado por Google. Entonces, en este artículo, se ha demostrado cómo usar los Indicadores de Progreso, sus tipos y anatomía.

Crear un proyecto de actividad vacío

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Agregar dependencia requerida

Incluya la dependencia de componentes de diseño de materiales de Google en el archivo build.gradle . Después de agregar las dependencias, no olvide hacer clic en el botón «Sincronizar ahora» presente en la esquina superior derecha.

implementación ‘com.google.android.material:material:1.4.0’

Tenga en cuenta que mientras sincroniza su proyecto, debe estar conectado a la red y asegurarse de agregar la dependencia al archivo Gradle de nivel de aplicación como se muestra a continuación.

¿Qué son los indicadores de progreso?

Los indicadores de progreso se utilizan en Android para informar al usuario sobre los procesos en curso, por ejemplo, cargar aplicaciones, llamadas de red, descargar o cargar archivos. Estos comunican el estado de la aplicación e informan al usuario si puede salir de la sesión actual de la aplicación.

Tipos de indicadores de progreso

Hay principalmente dos tipos de indicadores de progreso, uno es un indicador lineal y otro es un indicador circular . Echa un vistazo a la siguiente imagen para ver la diferencia. Estos indicadores de progreso pueden ser Determinados o Indeterminados. 

• Los indicadores determinados informan al usuario sobre el proceso definido, estos solo deben usarse cuando se puede detectar la velocidad del proceso.
• Los indicadores indeterminados informan al usuario sobre el proceso indefinido, lo que significa que el proceso actual puede tardar un tiempo indefinido en completarse.

El indicador de progreso lineal consta de dos componentes principales:

• Pista: el componente que tiene un ancho fijo, que establece los límites para que el indicador se desplace.
• Indicador: el componente que se anima a lo largo de la pista.

Pasos para implementar el indicador de progreso en el proyecto Android

Trabajar con el archivo activity_main.xml

El diseño principal de la aplicación consta de dos indicadores de progreso. Uno es un indicador de progreso lineal y otro es un indicador de progreso circular. Tenga en cuenta que el atributo indeterminado en cada uno de ellos debe ser verdadero; de lo contrario, no se animará cuando la aplicación se ejecute en un emulador. Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/linearProgressIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:indeterminate="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:indeterminate="true"
        app:layout_constraintEnd_toEndOf="@+id/linearProgressIndicator"
        app:layout_constraintStart_toStartOf="@+id/linearProgressIndicator"
        app:layout_constraintTop_toBottomOf="@+id/linearProgressIndicator" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

Personalización del indicador de progreso lineal:

Para cambiar el grosor de la pista, el color de la pista y el color del indicador, los atributos son:

aplicación: trackThickness = «colorValue»

aplicación: trackColor = «colorValor»

aplicación:indicatorColor=”colorValor”

El siguiente es un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:id="@+id/linearProgressIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:indeterminate="true"
        app:indicatorColor="@color/green_500"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:trackColor="@color/purple_500"
        app:trackThickness="8dp" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

Aumentar el tamaño del grosor de la pista, el color de la pista y el tamaño del indicador para el indicador de progreso circular:

Para cambiar el color de la pista, el color del indicador, el grosor de la pista y el tamaño del indicador, los atributos son:

aplicación: trackThickness = «colorValue»

aplicación: trackColor = «colorValor»

aplicación:indicatorColor=”colorValor”

app:indicatorSize=”valueInDp”

El siguiente es un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:indeterminate="true"
        app:indicatorColor="@color/green_500"
        app:indicatorSize="64dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:trackColor="@color/purple_500"
        app:trackThickness="8dp" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Producción:

Algunos atributos comunes de los indicadores lineales y circulares son:

Atributos específicos para el indicador de progreso lineal:

Estos atributos son específicos para los indicadores de Progreso Lineal.

Atributos específicos para el indicador de progreso circular:

Estos atributos son específicos para los indicadores de Progreso Circular.