How to display a ProgressBar on a View while doing some work?

Question

I have a view with EditText, Button and ListView. Button's onClick() parses some site (this part works OK), but it takes some time to display the parsed info in ListView, so I want to display small ProgressBar on the place, where the ListView should take place after a while.

So, I add this to my layout (I write important part here):

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layout1"
        android:weightSum="1.0">

        <EditText
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight=".86" />

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0px"
            android:layout_weight=".14" />

    </LinearLayout>

    <RelativeLayout 
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_below="@id/layout1"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:id="@+id/progressbar" >

        <ProgressBar 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            style="@android:style/Widget.ProgressBar.Small" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/layout1">

        <ListView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

    </RelativeLayout>

</RelativeLayout>

In source code:

progressBar = (RelativeLayout) findViewById(R.id.progressbar);

And everytime I want to show the ProgressBar, I do this:

progressBar.setVisibility(View.VISIBLE);

for disabling:

progressBar.setVisibility(View.INVISIBLE);

But this doesn't work.

How can I work this out?

Solution 1

There's no need to manipulate your ProgressBar's visibility. ListView has a feature called "empty view" which is shown only if your ListView is empty. Here's what you need to do to use it:

1. If your activity extends ListActivity, use android:id="@android:id/list" for your ListView and android:id="@android:id/empty" for your ProgressBar.
2. If you don't extend ListActivity, there's a setEmptyView() method of your ListView, which lets you do the same thing.

The above method fits best if you don't need to empty your ListView (e.g. data is loaded only once, at the activity startup). If you need to set data after that, it is better to use ViewSwitcher, which also has great advantage - it lets you apply transition animation. For details on ViewSwitcher, take a look at this.

Solution 2

Try using an async task like mentioned above.

/**
 * this class performs all the work, shows dialog before the work and dismiss it after
 */
 public class ProgressTask extends AsyncTask<String, Void, Boolean> {

public ProgressTask(ListActivity activity) {
    this.activity = activity;
    dialog = new ProgressDialog(context);
}

/** progress dialog to show user that the backup is processing. */
private ProgressDialog dialog;
/** application context. */
private ListActivity activity;

protected void onPreExecute() {
    this.dialog.setMessage("Progress start");
    this.dialog.show();
}

    @Override
protected void onPostExecute(final Boolean success) {
    if (dialog.isShowing()) {
        dialog.dismiss();
    }


    //do whatever with your data
}

protected Boolean doInBackground(final String... args) {
   try{    
      //parsing of your website here...

      return true;
   } catch (Exception e)
      Log.e("tag", "error", e);
      return false;
   }
  }
}

Solution 3

The RelativeLayout with the ListView is hiding your ProgressBar.Modify the layout like this and see how it goes:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layout1"
        android:weightSum="1.0">

        <EditText
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:layout_weight=".86" />

        <ImageButton
            android:layout_height="match_parent"
            android:layout_width="0px"
            android:layout_weight=".14" />

    </LinearLayout>

    <ListView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:layout_below="@id/layout1"/>

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

        <ProgressBar 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            style="@android:style/Widget.ProgressBar.Small" />

    </RelativeLayout>   


</RelativeLayout>

Also have a look at one of my answers, for a somewhat similar problem.

Solution 4

You don't need to nest your ProgressBar in another RelativeLayout. Just center it in your main layout and put it at last so it remains at the top.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   // the rest  

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />   

</RelativeLayout>

View more solutions