How to implement a loading screen to prevent a user from interacting with the interface while doing background processing

Question

In my new app I need to show a animation while doing some processing(e.g sending data to the server, reading data from a web service, etc).

Something like this:

This is what I used to do when I wanted to implement something similar:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >   

    <RelativeLayout
        android:id="@+id/sincronizarSpinnerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" >

        <ProgressBar
            android:id="@+id/pbHeaderProgress"
            style="@android:style/Widget.ProgressBar.Inverse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" >
        </ProgressBar>
    </RelativeLayout>


    <RelativeLayout>

      <!--Main content here-->

    </RelativeLayout>  

</LinearLayout>

As you can see I have two nested relative layouts. The first layout is invisible (android:visibility="gone") by default and I only make it visible when I start a Service, AsyncTask or asynchronous technique.

Although I have used this method in the past, now that my main layouts (the ones that should go inside the second relative layout) are more complicated, I'm not sure it'd be a good idea to make things even more complicated by adding another nesting level to my activity.

1. Is there any way I can avoid having to add another layout to all of my activities that need to display a spinner animation? Perhaps there's some kind of pattern or good practice I'm not aware of.

2. Do I really need to worry about adding another nesting level to my activity, knowing that I already have two or three levels?

Thanks.

Answer 1

You can simply use ProgressDialog and use setCanceledOnTouchOutside(false) so user cannot touch outside while your AsyncTask is working.

Here is my structure code that I use almost in my project that use AsyncTask. You can apply to your project:

public class DownloadTask extends AsyncTask<Void, Void, Void> {
    private ProgressDialog mProgressDialog;

    private Context mContext;

    public DownloadTask(Context context) {
        this.mContext = context;
    }

    @Override
    protected void onPreExecute() {
        super.onPreExecute();

        mProgressDialog = ProgressDialog.show(mContext, "Downloading", "Downloading Data ...");
        mProgressDialog.setCanceledOnTouchOutside(false); // main method that force user cannot click outside
        mProgressDialog.setCancelable(true);
        mProgressDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
            @Override
            public void onCancel(DialogInterface dlg) {
                DownloadTask.this.cancel(true);
            }
        });
    }

    @Override
    protected Void doInBackground(Void... params) {
        // do some background work here

    }

    @Override
    protected void onPostExecute(Void result) {
        if (this.isCancelled()) {
            result = null;
            return;
        }

        if (mProgressDialog != null) {
            mProgressDialog.dismiss();
        }

    }
}

Hope this help :)

Answer 2

I'd change your structure to this -

<frame layout>
<spinner center in parent/>
<realtive layout>
<main content/>
</realtive layout>
</frame layout>

Does that make sense? Its ok to wrap the main content in a frame layout to add the progress spinner

Also, you can use the <include> tag to keep the xml files cleaner. https://developer.android.com/training/improving-layouts/reusing-layouts.html

Answer 3

This all depends on your use case.

While displaying a loading indicator in the background is a good thing to do when loading a list, it might be irritating to hide everything and display a progress bar after clicking 'Submit' on a button.

So yes, one way is to use code like yours. You should although try optimizing your layouts, e.g. make use of FrameLayout where appropriate. But this is not the topic here.

Another way to block user interaction would be to display a progress dialog which can be further customized with a message:

// you can also set title / message
new ProgressDialog.Builder(this).setCancelable(false).show();

Also, you can just disable your UI elements. And enable them again after finishing your time consuming operations using

view.setEnabled(false); // disable view while doing work

Answer 4

Check this out. Android does it for you, all you need is to make it "indeterminate" so it spins in an infinite loop until you call it off.

<RelativeLayout
android:id="@+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true" />

</RelativeLayout>

Show it like so:

loadingPanel.setVisibility(View.VISIBLE);

and when done hide it:

loadingPanel.setVisibility(View.GONE);