How to add Loading dialog While fetching image from server in Android?

Question

I am trying to add Loading dialog in following code to fetch image from server and display it in Gallery view. it shows blank screen untill image comes. please help me how do i show Loading dialog while getting image from server.

Here is the code, pls help.

    public class ImagedisplaytestActivity extends Activity {
        private ImageView leftArrowImageView;
        private ImageView rightArrowImageView;
        private Gallery gallery;
        public int selectedImagePosition;
        private GalleryImageAdapter galImageAdapter;
        private String bitmapImg = "";
        Bitmap bitmap = null;
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            setupUI();
        }

        private void setupUI() {
            Intent i = getIntent();
            Bundle extras=i.getExtras();
            bitmapImg = extras.getString("BitmapImage");
            selectedImagePosition = extras.getInt("Pos");

            leftArrowImageView = (ImageView) findViewById(R.id.left_arrow_imageview);
            rightArrowImageView = (ImageView) findViewById(R.id.right_arrow_imageview);
            gallery = (Gallery) findViewById(R.id.gallery);
            leftArrowImageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (selectedImagePosition > 0) {
                        --selectedImagePosition;
                    }
                    gallery.setSelection(selectedImagePosition, false);
                }
            });

            rightArrowImageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (selectedImagePosition < DetailView.bitmapURL.size() - 1) {
                        ++selectedImagePosition;
                    }
                    gallery.setSelection(selectedImagePosition, false);
                }
            });

            gallery.setOnItemSelectedListener(new OnItemSelectedListener() {
                @Override
                public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
                    selectedImagePosition = pos;
                    if (selectedImagePosition > 0 && selectedImagePosition < DetailView.bitmapURL.size() - 1) {
                        leftArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_left_disabled));
                        rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_disabled));
                    } else if (selectedImagePosition == 0) {
                        leftArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_left_enabled));
                    } else if (selectedImagePosition == DetailView.bitmapURL.size() - 1) {
rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_enabled));
                    }
                }

                @Override
                public void onNothingSelected(AdapterView<?> arg0) {
                }
            });

            galImageAdapter = new GalleryImageAdapter(this, DetailView.bitmapURL);
            gallery.setAdapter(galImageAdapter);
            if (DetailView.bitmapURL.size() > 0) {
                gallery.setSelection(selectedImagePosition, false);
            }
            if (DetailView.bitmapURL.size() == 1) {
                rightArrowImageView.setImageDrawable(getResources().getDrawable(R.drawable.arrow_right_disabled));
            }

        }

        public class GalleryImageAdapter extends BaseAdapter {
            private Activity context;
            private  ImageView imageView;
            private List<String>  plotsImages;
            private ViewHolder holder;
            public GalleryImageAdapter(Activity context, List<String> plotsImages) {
                this.context = context;
                this.plotsImages = plotsImages;
            }

            @Override
            public int getCount() {
                return plotsImages.size();
            }

            @Override
            public Object getItem(int position) {
                return null;
            }

            @Override
            public long getItemId(int position) {
                return 0;
            }

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                if (convertView == null) {
                    holder = new ViewHolder();
                    imageView = new ImageView(this.context);
                    imageView.setPadding(3, 3, 3, 3);
                    convertView = imageView;
                    holder.imageView = imageView;
                    convertView.setTag(holder);
                } else {
                    holder = (ViewHolder) convertView.getTag();
                }
                holder.imageView.setLayoutParams(new Gallery.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
                holder.imageView.setScaleType(ImageView.ScaleType.FIT_XY);

                try {
                    bitmap = DownloadImage(plotsImages.get(position));
                    holder.imageView.setImageBitmap(bitmap);
                    bitmap = null;
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return imageView;
            }

            private class ViewHolder {
                ImageView imageView;
            }


             private Bitmap DownloadImage(String URL){
                    Bitmap bitmap = null;
                    try {
                        InputStream in = OpenHttpConnection(URL);
                        bitmap = BitmapFactory.decodeStream(in);
                        in.close();
                    } catch (IOException e1) {
                        e1.printStackTrace();
                    }
                    return bitmap;
                }

                private InputStream OpenHttpConnection(String urlString) throws IOException{
                    InputStream in = null;
                    int response = -1;
                    URL url = new URL(urlString);
                    URLConnection conn = url.openConnection();

                    if (!(conn instanceof HttpURLConnection)) {
     throw new IOException("Not an HTTP connection");
                    }
                    try{
                        HttpURLConnection httpConn = (HttpURLConnection) conn;
                        httpConn.setAllowUserInteraction(false);
                        httpConn.setInstanceFollowRedirects(true);
                        httpConn.setRequestMethod("GET");
                        httpConn.connect();
                        response = httpConn.getResponseCode();
                        if (response == HttpURLConnection.HTTP_OK) {
                            in = httpConn.getInputStream();
                        }
                    }
                    catch (Exception ex){
     throw new IOException("Error connecting");
                    }
                    return in;
                }
    }

        @Override
        public void onBackPressed() {
            DetailView.bundleID = DetailView.idList.get(selectedImagePosition);
                    super.onBackPressed();
        }
    }

Ronak there are so many QA already exists about **How to lazy load images in ListView** and also **to show progress bar while loading image from server**, do search and use it. — Paresh Mayani, Jan 03 '13 at 07:13
Paresh, I have tried a lot search and implement it but didnt get success. thats why i posted it in Stack. i need guidance. pls do help. thanks. — Peter, Jan 03 '13 at 07:16
i am sure your problem is to display progress bar while loading images from web, means that there must be 10 progress while loading 10 images from web. — Paresh Mayani, Jan 03 '13 at 07:30

score 0 · Answer 1 · edited Jan 03 '13 at 07:24

0

use assynctask, in that assynctask method you can write your getting images from server in doinbackground(), in that time you can display alert dialogue using preexectue(), after loading from server just dismiss the alert dialogue in postexectue().

edited Jan 03 '13 at 07:24

onkar

4,427
10
52
89

answered Jan 03 '13 at 07:16

Mohan

651
4
13

pls read his question properly, yes your answer can be helpful but he wants to put progress bar while loading images in listview. – Paresh Mayani Jan 03 '13 at 07:21

score 0 · Answer 2 · edited Jan 03 '13 at 07:24

0

This code work for me

private class LoadGlobalDataSearch extends AsyncTask<String, Void, Void>
    {

        @Override
        protected void onPostExecute(Void result)
        {
            super.onPostExecute(result);

            progressdialog.dismiss();


        }


        @Override
        protected Void doInBackground(String... params)
        {

            //Load your images this task
                        setupUI();
            return null;
        }

        @Override
        protected void onPreExecute() 
        {
            super.onPreExecute();
            progressdialog = ProgressDialog.show(MainActivity.this, "",getString(R.string.inprogress));
        }
    }

call this class in your oncreate method

new loadImages().execute(0);

edited Jan 03 '13 at 07:24

Jeetu

686
2
10
20

answered Jan 03 '13 at 07:17

V.P.

592
8
20

pls read his question properly, yes your answer can be helpful but he wants to put progress bar while loading images in listview. – Paresh Mayani Jan 03 '13 at 07:20
@PareshMayani:-you can use onprogessUpdate method in AsynTask and call in doinbackground publishprogress(); – V.P. Jan 03 '13 at 07:25
Jeetu & V.P , I have implemented your code but LoadGlobalDataSearch loadImg = new LoadGlobalDataSearch(); loadImg.execute(params); but which Params i should pass?? – Peter Jan 03 '13 at 09:05
@RonakPandya:loadImg.execute(); – V.P. Jan 03 '13 at 09:13
@V.P i have tried your code it shows me forceclose after loading complete image. Image shows till loading, after completion of loading it shows forceclose. pls help. i want to show loading while getting image. Thanks for the help brother. – Peter Jan 03 '13 at 09:26
@RonakPandya:show me the error and what to do in doingbackground methos – V.P. Jan 03 '13 at 09:33
@V.P. it shows Error occured while executing doInBackground() at AsyncTask, setupUI(ImagedisplaytestActivity.java) which is gallery.setSelection(selectedImagePosition, false); and doInbackground setupUI(); where we are calling this method. – Peter Jan 03 '13 at 09:57
@RonakPandya:1)doInbackground method:--DetailView.bitmapURL only add the data or your url in this list 2)onPostExecute() method work:-- galImageAdapter = new GalleryImageAdapter(this, DetailView.bitmapURL); gallery.setAdapter(galImageAdapter); – V.P. Jan 03 '13 at 10:15
@V.P. Sorry for late reply, but doInbackground method:--DetailView.bitmapURL only add the data or your url in this list?? means? I have implemented 2nd step but dont knw 1st step. and what about setupUI() where do i call it? – Peter Jan 04 '13 at 06:26
@RonakPandya:-hello ronak doInbackround is only add your data which you want to set the listview or any adapter. and not yous and UI component in doInbackground method – V.P. Jan 04 '13 at 06:47

Chinmoy Debnath · Answer 3 · 2013-01-03T07:27:12.880

0

You can use a progress dialoge until the image is downloaded then remove the dialog.

In OpenHttpConnection add this --

dialog = ProgressDialog.show(DutyRotaActivity.this, "",
                "Please wait for few seconds...", true);

in DownloadImage dissmiss the dialog.

dialog.dismiss();

Or you can use asynchronous task too. cause network operation should always do on other thread not in the main thread. In that case in preExecute add the dialog and in postExecute dissmiss the dialog. And in doinbackground call your downloadimage function that will also do the tricks.

Edit

Here is a complete source code and a library to load image lazily in the listView. I think its also can help you to solve your issue.Thanks

https://github.com/nostra13/Android-Universal-Image-Loader

edited Jan 03 '13 at 07:27

answered Jan 03 '13 at 07:17

Chinmoy Debnath

2,814
16
20

2

pls read his question properly, yes your answer can be helpful but he wants to put progress bar while loading images in listview. – Paresh Mayani Jan 03 '13 at 07:21
thanks Mayani, hi Pankaj you can use this library to load your image lazily in listview https://github.com/nostra13/Android-Universal-Image-Loader – Chinmoy Debnath Jan 03 '13 at 07:24
@ChinmoyDebnath yes he can use this or any library, but his question exactly is about to display progress bar while loading images. So there must be 100 progress bar while loading 100 images. – Paresh Mayani Jan 03 '13 at 07:29
@ChinmoyDebnath I didn't asked this question. And yes you are in some confusion, you should read and re read the question. – Pankaj Kumar Jan 03 '13 at 07:31
@ChinmoyDebnath i have tried your code but it shows me Blank screen only. implemented in OpenHttpConnection and dismiss in DownloadImage. – Peter Jan 03 '13 at 09:59
@Ronak can you please visit the link i have provided, you can get three types example there one for listview, 2nd gridview and another viewpager and that lazy loader is implemented with the adapter class so it will solve your problem if you please read the documentation of that libs. thanks – Chinmoy Debnath Jan 03 '13 at 11:56

score 0 · Answer 4 · edited May 23 '17 at 12:18

0

You should use AsyncTask! See this also! & in Vogella Example will clear your doubt . see this for the lazy image Loading DEMO! on github.

edited May 23 '17 at 12:18

Community

1
1

answered Jan 03 '13 at 07:22

Deepanker Chaudhary

1,694
3
15
35

How to add Loading dialog While fetching image from server in Android?

4 Answers4

Edit