show progressbar while loadig images in each image view in Picasso

Question

how to show progressbar while loading image in each imageview. I have tried the code given below

     if (stage1ImageURL.startsWith("http://")) {

                //Picasso.with(getActivity()).load(stage1ImageURL).into(stage1ImageView);
                //imageLoader.DisplayImage((stage1ImageURL), stage1ImageView);
                Picasso.with(getActivity())
                .load(stage1ImageURL)
                .into(stage1ImageView , new Callback() {

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

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

                    }
                });
            }

Refer this link for complete code http://stackoverflow.com/a/25226999/3843374 — Paritosh, Sep 09 '14 at 11:04

score 2 · Answer 1 · answered Sep 09 '14 at 09:11

You can overlap the two views by wrapping with Framelayout. Just wrap your progress bar and ImageView like below. Then switch View.VISIBLEand View.GONE on onSuccess()

<Framelayout
    android:id="@+id/myContainer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"/>

    <ImageView
        android:id="@+id/stage1ImageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:paddingLeft="60dp"
        android:scaleType="centerCrop"/>

</Framelayout>

score 0 · Answer 2 · answered Sep 09 '14 at 09:11

Your layout should have something like this

<FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ProgressBar
                android:id="@+id/progressBar1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="50dp"
                style="@android:style/Widget.ProgressBar.Small"
                android:indeterminate="false"
                android:visibility="visible"
                android:progress="1" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp">

    </ImageView>

   </FrameLayout>

And your code in java file looks good. First get the reference of ProgessBar with findViewById

progressBar = (ProgressBar) findViewById(R.id.progressBar1);

Then make use of progressBar.setVisibility(View.GONE)

show progressbar while loadig images in each image view in Picasso

2 Answers2