loading progressbar while loading images in each imageview

Question

I am trying to write a simple app for android. I am trying to loaded 7 jpg images . How to show animated circular progressbar while loading images in each image view.I use two progress bar to do this.I have tried the code given below.

            if (mainImageURl.startsWith("http://")) {
                //resultp   =   arraylist.get(0);
                //Picasso.with(getActivity()).load(mainImageURl).into(mainImageView);
            //imageLoader.DisplayImage((mainImageURl), mainImageView);
            Picasso.with(getActivity())
            .load(mainImageURl)
           .into(mainImageViewnew Callback() {

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

                    @Override
                    public void onError() {
                        // TODO Auto-generated method stub

                    }
                });

            }
            else if (stage1ImageURL.startsWith("http://")) {
                //resultp   =   arraylist.get(0);
                //Picasso.with(getActivity()).load(mainImageURl).into(mainImageView);
            //imageLoader.DisplayImage((mainImageURl), mainImageView);
            Picasso.with(getActivity())
            .load(mainImageURl)
            .into(mainImageViewCallback() {

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

                    @Override
                    public void onError() {
                        // TODO Auto-generated method stub

                    }
                });

            }

Answer 1

i've created an asynctask "ImageLoading".which will load the "loadingimg" gif on pre method..and try to fetch the image on background method from web-service (build in php). as the image background returns it will make loading gif invisible and load the image if return true.

make sure xampp server ( apache as well as mysql ) is started

1. xampp->mysql

2. xampp->[inside htdocs->imgloading folder]

   "showLoading.php"

   <?php
   $id=$_GET["id"];
   
   $con=mysqli_connect("localhost","root","","imgloading");
   $query_result=mysqli_query($con,"select img from img where id=1");
   //since id=1 contain the loading gif image...which shows until original image loaded
   while($row=mysqli_fetch_row($query_result))
   {
      $img=$row[0];
   }
   echo '<img src="data:image/*;base64,'.base64_encode($img).'" width="32" heigth="32"/>';?>
   

   "getImage.php"

   <?php
   $id=$_GET["id"];
   
   $con=mysqli_connect("localhost","root","","imgloading");
   $query_result=mysqli_query($con,"select img from img where id=".$id);
   while($row=mysqli_fetch_row($query_result))
   {
      $img=$row[0];
   }
   echo $img;
   ?>
   

   3. MainActivity.java

   public class MainActivity extends ActionBarActivity {

   private WebView loadingImg; private ImageView img; private Bitmap bitmap;

       @Override
       protected void onCreate(Bundle savedInstanceState) 
       {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           loadingImg=(WebView)findViewById(R.id.imageView1);
           img=(ImageView)findViewById(R.id.imageView2);
   
           loadingImg.setVisibility(View.VISIBLE);
           img.setVisibility(View.GONE);
   
           ImageLoading imgLoading=new ImageLoading();
           imgLoading.execute();
       }
   
       private class ImageLoading extends AsyncTask<Void, Void, Boolean>
       {
           @Override
           protected void onPreExecute() 
           {
               super.onPreExecute();
               loadingImg.getSettings().setJavaScriptEnabled(true);
               loadingImg.loadUrl("http://10.0.2.2/imgloading/showLoading.php");
               Log.i("img","pre");
           }
   
           @Override
           protected Boolean doInBackground(Void... params) 
           {
               Log.i("img","background");
               try
               {
                   HttpClient client=new DefaultHttpClient();
                   HttpGet request=new HttpGet("http://10.0.2.2/imgloading/getImage.php?id=2");
                   HttpResponse response=client.execute(request);
   
                   HttpEntity responseEntity=response.getEntity();
                   final byte[] imgByteArray=EntityUtils.toByteArray(responseEntity);
                   bitmap=BitmapFactory.decodeByteArray(imgByteArray, 0, imgByteArray.length);
   
                   responseEntity.consumeContent();
                   Log.i("img","inside try");
   
                   return true;
               }
               catch(Exception e)
               {
                   e.printStackTrace();
                   Log.i("img","inside catch");
                   Log.i("img", e.toString());
                   return false;
               }
           }
   
           @Override
           protected void onPostExecute(Boolean result) 
           {
               super.onPostExecute(result);
   
               Log.i("img","post");
               if(result==true)
               {
                   img.setVisibility(View.GONE);img.setVisibility(View.VISIBLE);
                   Log.i("img","result true");
                   img.setImageBitmap(bitmap);
               }
               else
               {
                   img.setVisibility(View.GONE);img.setVisibility(View.GONE);
                   Log.i("img","result false");
               }
           }
       }
   }
   

   4. activity_main.xml

   <WebView
       android:id="@+id/imageView1"
       android:layout_width="40dp"
       android:layout_height="40dp"
       android:layout_centerInParent="true"
       android:background="#f4f4f4" />
   
   <ImageView
       android:id="@+id/imageView2"
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:layout_centerInParent="true"
       android:visibility="invisible" />