Spinner or progress bar while images are loaded, not blocking UI

I have an async task that loads images. How could i display a spinner just inside of the gallery where the images will be loaded to display that some work is being done? Or progress bar? But i want to be able to开发者_如何学运维 do this without blocking up the whole UI.

How would i go about doing this?

---

More common pattern is to put the indicator into activity title bar to show that some background work is in progress.

To do that you should request window feature

requestFeature(FEATURE_INDETERMINATE_PROGRESS);

and later use

setProgressBarIndeterminateVisibility(true|false)

to show/hide the progress

---

You can inflate custom layout in getView() method in your ImageAdapter (check example on official Google website http://developer.android.com/resources/tutorials/views/hello-gallery.html) e.g.:

public class ImageAdapter extends BaseAdapter {

    private ProgressBar mProgressBar;
    private ImageView mImageView;
    private String[] mUrls = {
        "http://apod.nasa.gov/apod/fap/image/0011/arcadenov9_trace.jpg",
        "http://apod.nasa.gov/apod/fap/image/0011/earthlights_dmsp_big.jpx",
        "http://apod.nasa.gov/apod/fap/image/0011/earthlights2_dmsp_big.jpx"
    }
    private boolean[] flags = new boolean[3]; // 3 images example
    private LayoutInflater mInflater;

    public ImageAdapter(Context c) {
        mInflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public int getCount() {
        return 3;
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = mInflater.inflate(R.layout.gallery_item, null);
        if (!flags[position]) {
            image = convertView.findViewById(R.id.idImage);
            progressBar = convertView.findViewById(R.id.idProgressBar);
            new DownloadTask(image, progressBar, mUrls[position]).execute();
            flags[position]=true;
        }
        convertView.setLayoutParams(new Gallery.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        return convertView;
    }

Where gallery_item.xml looks like this:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:gravity="center" >

        <ProgressBar
            android:id="@+id/idProgressBar"
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

        <ImageView
            android:id="@+id/idImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

    </LinearLayout>

In getView() method you can pass ProgressBar and ImageView instances to DownloadTask (class that extends AsyncTask) e.g.

new DownloadTask(image, progressBar, mUrls[position]).execute();

In doInBackground() you should download (and/or somehow cache/persist) image (URL is in mUrls[position]) and in onPostExecute() (that is run in UI thread) you should:

progressBar.setVisibility(View.GONE); // hide progress
imageView.setImageBitmap(bitmap); // set image

As a show case you can use one Activity only with main.xml layout:

    <?xml version="1.0" encoding="utf-8"?>
    <Gallery xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/idGallery"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

---

You can put a ProgressBar under the Gallery in your layout XML which can either just contain a spinner (with bar style Widget.ProgressBar.Large.Inverse or Widget.ProgressBar.Small.Inverse) You can set it to always spinning by setting the xml attribute android:indeterminateOnly="true".

More info here: http://developer.android.com/reference/android/widget/ProgressBar.html

You can have an Async Task that loads your images into your gallery (or however you are doing it), and when the Async Task is done you can set the visibility of the ProgressBar to View.Gone.

EDIT: Here's some code example for the xml

    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">
        <Gallery XML here>
        <ProgressBar
          android:id="@+id/progress"
          style="?android:attr/progressBarStyleSmallInverse"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:layout_gravity="center"
          android:indeterminateOnly="true" />
   </LinearLayout>

I'm not too sure how your gallery loads your images, but basically you need a mechanism to tell you when the images finish loading (generally I say you wouldn't need a spinner as images should seem to load almost instantly, but maybe you are loading something that requires a lot of time). When your images finish loading just call setVisibility(View.GONE). If you want a TextView saying loading or something feel free to put it in the XML as well.

---

try this code

private void showProgrssBar(){
pLayout.setVisibility(View.VISIBLE);
final StringBuffer s=new StringBuffer();
final Thread progressThread=new Thread(){
    @Override
    public void run(){


            while(CreateVideoService.processingFrame>1) {
                 inc=100-((CreateVideoService.processingFrame*100)/(CreateVideoService.numberofRecordedFrames));
                 if(s.length()>0)
                 s.delete(0, s.length());
                 s.append("Processing... ").append(inc).append("%");
                 progressBarHandler.post(new Runnable() {

                    @Override
                    public void run() {
                        // TODO Auto-generated method stub
                        progressBar.setProgress(inc);
                        textProgrs.setText(s); 
                    }
                });
                 //progressBar.setProgress(100-inc);
                 try {
                     // Sleep for 5 seconds
                     Thread.sleep(200);
                 } catch (InterruptedException e) {
                     //Log.d("TAG", "sleep failure");
                 }
            }
            layoutHandler.post(new Runnable() {

                @Override
                public void run() {
                    // TODO Auto-generated method stub
                    pLayout.setVisibility(View.GONE);
                }
            });

    }
};
progressThread.start();

}

---

Use a ProgressDialog in onPreExecute method of your AsyncTask

    private String message;    
    private ProgressDialog dialog1 = new ProgressDialog(YourActivityClass.this);

         protected void onPreExecute()
         {

            message="Loading images.\n Please wait...";
             dialog1 = ProgressDialog.show(YourActivityClass.this, "", 
                     message, true);

         }

And cancel the dialog in onPostExecute() method