Android: Show loading symbol in Network ImageView

Question

I am using NetworkImageView from Volley library to load images.

But while the image takes time load from a URL I want to show a spinning/moving loading symbol in the image container.

I tried using the setDefaultImageResId() function to set a loader.gif image. But I think gif format is not supported in Android natively.

Please advice. Thanks.

score 9 · Answer 1 · answered Jul 17 '14 at 11:57

9

You Just need to put the NetworkImageView and the ProgressBar inside a FrameLayout or a RelativeLayout,something like this

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

     <ProgressBar
            style="?android:attr/progressBarStyle"
            android:layout_width="..."
            android:layout_height="..." />

    <com.android.volley.toolbox.NetworkImageView
        android:layout_width="..."
        android:layout_height="..."
         />

</FrameLayout>

be aware that the ORDER COUNTS, make sure you put the NetworkImageView after the ProgressBar so that the NetworkImageView stays on top of the ProgressBar after loading the image.

Hope it helps!

answered Jul 17 '14 at 11:57

manuelvsc

495
7
11

But progress bar is not visible when I am inflating this framelayout. Please let me know the complete code. – Abhishek Mittal Oct 24 '15 at 18:57
What do you mean by not being visible? See if you have defined **width** and **height** correctly, if you have **wrap_content** in both **ProgressBar** and **NetworkImageView** that sould be the reason. – manuelvsc Oct 26 '15 at 11:24
The issue was that in getView method I was returning only NetworkImageView in the convertview. Issue is resolved now. Thanks :) – Abhishek Mittal Oct 28 '15 at 17:47

score 3 · Answer 2 · answered Apr 10 '14 at 07:35

3

You are correct. Animated gifs are not really supported in Android. But the good news is that you can use the built in progress bar/wheel. Read about it here.

You'll have to switch the NetworkImageView you've been using with a regular ImageView and load your image using the ImageLoader. That way you can implement a listener to switch out the progress wheel. This means you'll need to create a RequestQueue and an ImageLoader. I advise you to create one of each and share them via a singleton class with whoever needs it in your code.

The image loading should look something along the lines of:

// ** code in init the progress wheel **

imageLoader.get(url, new ImageListener() {
    @Override
    public void onResponse(ImageContainer response, boolean isImmediate) {
        if (response != null) {
            Bitmap bitmap = response.getBitmap();
            if (bitmap != null) {
                // ** code to turn off the progress wheel **
                // ** code to use the bitmap in your imageview **
            }

    @Override
    public void onErrorResponse(VolleyError error) {
        // ** code to handle errors **
    }
});

answered Apr 10 '14 at 07:35

Itai Hanski

7,922
4
39
62

Thanks a lot. I appreciate your answer and help. But Volley helps to manage Image loading more effectively. I have also seen loading symbol coming using Volley itself, but unable to recall where. It would be great if it can be done, because otherwise I will have to rework on the whole code. I hope u understand. Can't we use spinner wheel with NetworkImageView too. – Dragon Apr 10 '14 at 09:57
Take a look at the source code. `NetworkImageView` is a simple `ImageView` that uses an `ImageLoader` provided by you, to load the image from a URL you give. It's syntactic sugar for what I suggested , but you can't control the listener. You can either do it the way I suggested or by editing the source and adding your logic to the listener over there. Either way, you need a hook into the `ImageListener`, no other way about it. – Itai Hanski Apr 10 '14 at 13:08
So, I tried using a progress bar at the same location in the layout.xml and above getting the image rendered so that once image is rendered, it hides the progress bar. It is working fine. Thanks. – Dragon Apr 12 '14 at 07:58
How to turn off spinner for the specific view? – portfoliobuilder Aug 31 '16 at 01:00

score 1 · Answer 3 · answered Apr 15 '16 at 10:05

I have done this using animation drawable. Here are the steps:

Animate drawable ic_sync_drawable.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/selected"
    android:oneshot="false">
    <item
        android:drawable="@drawable/ic_popup_sync_1"
        android:duration="50" />
    <item
        android:drawable="@drawable/ic_popup_sync_2"
        android:duration="50" />
    <item
        android:drawable="@drawable/ic_popup_sync_3"
        android:duration="50" />
    <item
        android:drawable="@drawable/ic_popup_sync_4"
        android:duration="50" />
    <item
        android:drawable="@drawable/ic_popup_sync_5"
        android:duration="50" />
    <item
        android:drawable="@drawable/ic_popup_sync_6"
        android:duration="50" />
</animation-list>

Now in java code I am using ImageView:

Drawable drawable = getContext().getResources().getDrawable(R.drawable.ic_sync_drawable);
ImageView imageView = new ImageView(getContext());
imageView.setImageDrawable(drawable);
imageLoader.get(imageurl, ImageLoader.getImageListener(imageView, 0, 0));
ViewFlipper.addView(imageView);
//start animation
 AnimationDrawable frameAnimation = (AnimationDrawable) drawable;
frameAnimation.start();

Android: Show loading symbol in Network ImageView

3 Answers3