Usando el ProgressBar en Android para indicar procesos de carga

07-11-2017 - Andrés Cruz

Usando el ProgressBar en Android para indicar procesos de carga In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

En esta entrada hablaremos sobre otro método de para indicar el progreso de carga de una operación que puede sustituir al ya desactualizado (deprecated) por las nuevas versiones de Android ProgressDialog ; lo que significa que en futuras versiones de Android dejaría de existir este componente de software.

El elemento de interfaz de usuario en cuestión luce de la siguiente forma:

progressBar Youtube

Y se conoce como ProgressBar; como puedes ver es una especie de barra lateral animada la cual ya ha estado presente en sitios web como YouTube o en la misma aplicación para Android de Youtube entre otras aplicaciones.

Formas de uso de la ProgressBar

Las ProgressBar pueden ser empleadas para indicar el progreso de una tarea en porcentajes (0% a 100%) o de manera indeterminada como la mostrada en la anterior imagen.

Simplemente hay que indicar que se encuentre visible en tiempos de carga y ocultarla (invisible) cuando ya esté el contenido listo; como podemos darnos cuenta, este elemento de interfaz de usuario tiene el inconveniente que no permite bloquear toda la actividad o fragment que lo ejecute y de esta forma evitar que el usuario interactúe con la interfaz, pero como buena práctica dicho bloqueo debería ser realizado de manera manual ocultando o deshabilitando los elementos de la interfaz que consideremos .

 

Ahora veamos las opciones que tenemos para emplear la ProgressBar:

1. ProgressBar determinada

Para mostrar el progreso de la ProgressBar en forma de porcentajes podemos emplear el atributo android:progress, también podemos variar los niveles de porcentajes para definir una cota mínima y máxima con los atributos android:min y android:max respectivamente:

 <ProgressBar
      android:id="@+id/determinateBar"
      style="@android:style/Widget.ProgressBar.Horizontal"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:progress="25"/ >

El código anterior muestra cómo crear una ProgressBar con progreso determinado con un valor establecido por defecto de 25% que por supuesto podemos variar de manera programática con el método setProgress(int).

Por supuesto, también existen método programáticos para definir la cuota mínima y máxima:

setMax(int max) setMin(int min)

2. ProgressBar indeterminada

Para la ProgressBar simplemente debemos de emplear la misma sin los atributos vistos anteriormente; es decir, sin android:progress, android:min y android:max; quedando el código de la siguiente manera:

<ProgressBar
      android:id="@+id/indeterminateBar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      />

Puedes consultar la documentación completa en el siguiente enlace: Android Developer ProgressBar.

Caso práctico

En cualquiera de los dos casos anteriores que explicamos, la idea es que al terminar el procesamiento, obtención o cualquier otro proceso que prescinde de mostrar un elemento de carga, ocultar la ProgressBar; él sigue ejemplo práctico muestra un caso práctico empleando la librería de Retrofit que ya es tema de una entrada posterior; en general, mostramos la ProgressBar cuando estamos obteniendo los datos del servidor y la ocultamos una vez que el servidor nos dé una respuesta:

public class FeeActivity extends AppCompatActivity {
    private ActionBarDrawerToggle mDrawerToggle;

    private static final String TAG = FeeActivity.class.getSimpleName();
    private RecyclerView rvNotificaciones;
    private RelativeLayout rlSinFees;
    private ProgressBar progressBar;
    private ArrayList<Fee> fees;
    private int loanId;

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

        loanId = getIntent().getExtras().getInt("loan_id");
        progressBar = (ProgressBar) findViewById(R.id.progressbar);

        rvNotificaciones = (RecyclerView) findViewById(R.id.rv_fees);
        rlSinFees = (RelativeLayout) findViewById(R.id.rl_sin_fees);

        init();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    public void init() {
        fees = new ArrayList<>();

        generarGridLayout();
        cargarCuota();
    }

    public void generarGridLayout() {
        LinearLayoutManager llm = new LinearLayoutManager(this);
        rvNotificaciones.setLayoutManager(llm);
        rvNotificaciones.setNestedScrollingEnabled(false);
    }

    public void initAdapter(CuotaAdapter cuotaAdapter) {
        rvNotificaciones.setAdapter(cuotaAdapter);
    }

    public void cargarCuota() {

        RestApiAdapter restApiAdapter = new RestApiAdapter();

            Gson gson = restApiAdapter.convierteGsonDesearilizadorCuotas();
            EndpointsApi endpointsApi = restApiAdapter.establecerConexionRestApi(gson);
            Call<FeeResponse> responseCall = endpointsApi.getCuotasDia(UserPreferences.getUsuarioId(FeeActivity.this));

            responseCall.enqueue(new Callback<FeeResponse>() {
                @Override
                public void onResponse(Call<FeeResponse> call, Response<FeeResponse> response) {
                    FeeResponse feeResponse = response.body();

                    if (feeResponse != NULL) {
                        fees = feeResponse.getFees();
                    }

                    if (fees.size() == 0) {
                        rvNotificaciones.setVisibility(View.GONE);
                        rlSinFees.setVisibility(View.VISIBLE);
                    }

                    initAdapter(new CuotaAdapter(fees, FeeActivity.this));
                    progressBar.setVisibility(View.INVISIBLE);

                }

                @Override
                public void onFailure(Call<FeeResponse> call, Throwable t) {
                    Log.e("Error", t.toString());
                    Toast.makeText(FeeActivity.this, getResources().getString(R.string.error_login_local_titulo), Toast.LENGTH_LONG).show();
                    progressBar.setVisibility(View.INVISIBLE);
                }
            });
    }
}

Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!