Barra de progreso Android Studio.

En este tutorial se explica cómo agregar una barra de progreso en Android Studio. Es muy útil al momento de mostrar que nuestra app está cargando alguna sección.

La barra de progreso en Android Studio, ayuda a mostrarle al usuario que nuestra App está cargando. Esto se muestra mediante un símbolo animado.

Barra de progreso.

Android Studio tiene un objeto en XML llamado Progress bar, el cual es una barra de progreso que muestra una animación de cargando y se puede usar como cualquier otro elemento, por ejemplo Botones, Text View, etc.

La diferencia es que Progress bar, al correr la app va a mostrar un icono animado, que simula que nuestra app está cargando, puedes elegir diversos tipos de iconos que tiene Android.

Para usarla, simplemente se debe mostrar y esconder la barra de progreso, mientras algo esté cargando mostramos la progress bar, y cundo deja de cargar ocultamos la progress bar.

Como crear una barra de progreso (progress bar) en Android Studio.

  1. Primero agregamos el elemento Progressbar en la UI.
  2. Segundo, acomodamos la progressbar en la UI en la zona donde queremos que se muestre que esta cegando. Y le damos una ID (id_progress).
  3. Hasta aquí si probamos la App veremos cómo carga la barra de progreso. Lo que se hará enseguida es mostrar y ocultar la barra de progreso en código Java o Kotlin.
  4. Se recomienda que al abrir la app la barra de progreso no sea visible. Se puede usar una visibilidad en XML así android:visibility = “gone” O bien en el método onCreate en java se usa bProgreso.setVisibility(View.GONE). para que no sea visible al inicio.
  5. Luego en Java, primero relacionamos la Barra de progreso de XLM con una variable tipo ProgressBar usando la ID. Por ejemplo: bProgreso = findviewbyid(R.id.id_progress);.
  6. Después solo es cuestión de usar el comando bProgreso.setVisibility(View.VISIBLE) para mostrar la barra de progreso cuando ocurra alguna acción.
  7. Y por último cuando termine dicha acción, ocultamos la barra de progreso, con el comando bProgreso.setVisibility(View.GONE).

Ejemplo de barra de progreso en Android Studio.

En este ejemplo haremos que aparezca la barra de progreso cuando se presione un botón. Y cuando se presione de nuevo la barra de progreso va a desaparecer.

Primero creamos la UI.  Donde solo tendremos un botón y una barra de progreso. Usaremos un Constraint Layout, donde el botón estará abajo y la barra de progreso arriba. La UI quedaría de la siguiente manera.

Barra de progreso Android Studio

Recomendamos dar una visibilidad de no visible a la barra de progreso al inicio de la actividad. Para que al iniciar la app no se muestre la barra.

Lo podemos hacer en XML usando el comando:

android:visibility="gone"

Esto también se puede hacer en el método onCreate en Java, con el comando:

bProgreso.setVisibility(View.GONE);

En código XML para a barra de progreso es el siguiente:

<ProgressBar
    android:id="@+id/id_progress"
    style="?android:attr/progressBarStyle"
    android:visibility="gone"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="112dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

La ID de la barra de progreso es: “id_progreso

Ocultar y mostrar la barra de progreso.

Ahora solo es cuestión de mostrar y ocultar la barra de progreso en Java. Para esto primero necesitamos relacionar el Botón y la Barra de progreso de XML con variables en Java.

En nuestro caso creamos un método llamado relacionarXML(), este es solo para dar orden al código, pero se puede omitir y escribir todo en el método onCreate.

Lo siguiente es ejecutar una acción cuando el usuario presione el botón, para esto creamos otro método llamado darClic(), donde irá todo lo relacionado con interacciones con el usuario. También se puede omitir y escribir el código dentro de onCreate.

NOTA: Creamos una variable tipo Boleana llamada cargando, es para alternar entre visible y no visible cuando se presione el botón.

El código dentro de la actividad queda de la siguiente manera::

button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(cargando) {
bProgreso.setVisibility(View.GONE);
}
else {
bProgreso.setVisibility(View.VISIBLE);
}
cargando = !cargando;
}
});

Por último agregamos la visibilidad a la barra de progreso, cuando el usuario presione al botón.

De esta manera si se presiona el botón por primera vez, se mostrará la barra de progreso. Si se presiona de nuevo el botón, ya no se verá la barra de progreso.

El c{odigo en Java es:

private ProgressBar bProgreso;
private Button button;
private Boolean cargando;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity__pruebas);

relacionarXml();
darClic();

bProgreso.setVisibility(View.GONE);
}


private void relacionarXml()
{
bProgreso = findViewById(R.id.id_progress);
button = findViewById(R.id.button2);
}

private void darClic()
{
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(cargando) {
bProgreso.setVisibility(View.GONE);
}
else {
bProgreso.setVisibility(View.VISIBLE);
}
cargando = !cargando;
}
});
}

Para más tutoriales de Android Studio, ve la sección de Android Studio.

Puedes ver también la documentación oficial aquí.