Using the ProgressBar in Android to indicate loading processes

In this entry we will talk about another method to indicate the loading progress of an operation that can replace the already outdated (deprecated) by the new versions of Android ProgressDialog; which means that in future versions of Android this software component would cease to exist.

The UI element in question looks like this:

And it is known as ProgressBar; as you can see, it is a kind of animated sidebar which has already been present on websites like YouTube or in the YouTube Android application itself, among other applications.

Ways of using the ProgressBar

The ProgressBar can be used to indicate the progress of a task in percentages (0% to 100%) or in an indeterminate way as shown in the previous image.

You simply have to indicate that it is visible at load times and hide it (invisible) when the content is ready; as we can see, this user interface element has the drawback that it does not allow blocking all the activity or fragment that runs it and thus prevents the user from interacting with the interface, but as a good practice, said blocking should be done in a manner manual hiding or disabling the elements of the interface that we consider.

Now let's see the options we have to use the ProgressBar:

1. ProgressBar determined

To show the progress of the ProgressBar in the form of percentages we can use the android:progress attribute, we can also vary the percentage levels to define a minimum and maximum level with the android:min and android:max attributes respectively:

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

The above code shows how to create a ProgressBar with progress determined with a default value of 25% which we can of course programmatically vary with the setProgress(int) method.

Of course, there are also programmatic methods to define the minimum and maximum quota:

setMax(int max) setMin(int min)

2. ProgressBar indeterminada

For the ProgressBar we simply have to use it without the attributes seen above; that is, without android:progress, android:min, and android:max; leaving the code as follows:

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

You can consult the complete documentation in the following link: Android Developer ProgressBar.

Case study

In any of the two previous cases that we explained, the idea is that when the processing, obtaining or any other process that does not show a load element ends, hide the ProgressBar; he follows practical example shows a practical case using the Retrofit library that is already the subject of a later post; In general, we show the ProgressBar when we are getting the data from the server and hide it once the server gives us a response:

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);
                }
            });
    }
}

Android

Dialog

Loader

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy