Android Progress Bar Kotlin (Barra de progreso)

En este tutorial se explica Android progress bar en Kotlin (barra de progreso). Explicamos que es y cómo se usa, desde cómo crearlo en XML hasta como programarlo en Kotlin, haciendo que aparezca y desaparezca.

Un Porgress Bar en Android es un elemento de la interfaz de usuario que muestra visualmente el progreso de una tarea o proceso en curso. Gracias a la barra de progreso el usuario entenderá que la aplicación está efectuando una tarea que demora tiempo.

Es útil para informar a los usuarios sobre el estado de una operación, como la descarga de archivos, la carga de datos o cualquier operación que pueda llevar tiempo. Es una herramienta útil para mejorar la experiencia del usuario, al proporcionar visualmente una indicación clara del progreso de una tarea.

1.- Agregar una barra de progreso en el diseño XML.

El primer paso es agregar la barra de progreso al xml. Es algo muy sencillo, la ProgressBar tiene predeterminada una animación, por lo que solo es ubicarla en la vista.

Asi de sencillo es el código de un progress bar en XML.

En este caso crearemos una barra de progreso que ocupe toda la pantalla, con un fondo gris trasparente. Asi que tendremos que colocar la Barra de progreso dentro de un linear layout.

En la imagen anterior vemos que tenemos un linear layout ocupando toda la pantalla con fondo transparente y suponiendo que está dentro de un Constraintlayout.

Tiene una barra de progreso centrada y debajo un texto que dice “Cargando”.

Este layout tiene como visibilidad gone, asi que no se mostrará hasta que lo hagamos visible, eso será en Kotlin.

2.- Referenciar la ProgressBar en el archivo Kotlin.

Una vez que tenemos la barra de progreso en la UI, ahora vamos a referenciarla en Kotlin para poder mostrarla y ocultarla cuando sea necesario.

En este caso haremos la referencia a todo el linear layout y no a la barra de progreso.

Primero creamos una variable tipo linear layout, usamos lateinit para incialziarla después.

private lateinit var pbProgreso: LinearLayout

Luego en el método OnCreate inicializamos la variable, usando la id que pusimos en XML.

pbProgreso = findViewById(R.id.barraProgreso)

Con esto ya podemos trabajar con la progress bar en Kotlin.

3.- Mostrar y ocultar progress bar kotlin.

El siguiente paso es mostrar y ocultar la barra de progreso cuando sea necesario.

Puede ser cuando comencemos a descargar una imagen pongamos la visibilidad de la barra en visible, y cuando termine de descargar la pongamos en gone. Y listo.

Así cambiamos la visibilidad en Kotlin.

pbProgreso.visibility = View.VISIBLE

pbProgreso.visibility = View.INVISIBLE

pbProgreso.visibility = View.GONE

Los podemos usar cuando los necesitemos.

4.- Bloquear botones.

Algo extra que podemos hacer es bloquear el uso de los botones mientras la app este cargando.

Ya que podría estar descargando algún documento y el usuario podría presionar varias veces el botón de descarga provocando más descargas.

O bien realizar alguna acción no deseada mientras está cargando.

Para evitar que los botones o algún elemento de la interfaz funcione se usa el comando isEnabled, como se muestra a continuación, con un botón llamado btnDescargar:

btnDescargar.isEnabled = true

btnDescargar.isEnabled = false

Entonces, tendremos que deshabilitar el botón cuando comience a cargar la App, y habilitarlo cuando termine de cargar. Ese comando también funciona para otros elementos como EditText.

5.- Datos extra sobre la Progress bar kotlin

Podemos personalizar la ProgressBar utilizando atributos XML o programáticamente en Kotlin.

Una de las propiedades más comunes es:

android:progressDrawable

Que es útil para cambiar el aspecto de la barra.

Otro es:

android:indeterminate

Para hacerla indeterminada.

Además podemos establecer el progreso en Kotlin con el siguiente comando:

progressBar.progress = 50

Pero lo podemos omitir si no lo necesitamos.

Para más tutoriales de Kotlin ve a este enlace.

Algunos temas que pueden ser de su interés: