Volley's NetworkImageView not showing up in Spinner

Question

I want to display an image loaded from the network (using google volley) next to the spinner's text, but for some reason it's not displayed. In fact, the adapter's getView method is called over and over again, with convertView equal to null, by some measuring method inside the Android SDK.

Here is how my adapter looks like:

public class CategoriesSpinnerAdapter extends ArrayAdapter<Category> {
private LayoutInflater mLayoutInflater;

public CategoriesSpinnerAdapter(Context context, List<Category> objects) {
    super(context, 0, objects);
    mLayoutInflater = LayoutInflater.from(context);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if(convertView == null) {
        convertView = mLayoutInflater.inflate(R.layout.item_spinner_category, parent, false);
    }

    final TextView categoryTitle = (TextView) convertView.findViewById(R.id.scategory_title);
    categoryTitle.setText(getItem(position).getName());

    final NetworkImageView categoryImage = (NetworkImageView) convertView.findViewById(R.id.scategory_image);
    ImageUtils.load(categoryImage, getItem(position).getIcon());

    return convertView;
}

@Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
    if(convertView == null) {
        convertView = mLayoutInflater.inflate(R.layout.simple_spinner_category, parent, false);
    }

    final TextView categoryTitle = (TextView) convertView.findViewById(R.id.spinner_item_title);
    categoryTitle.setText(getItem(position).getName());

    final NetworkImageView categoryImage = (NetworkImageView)  convertView.findViewById(R.id.spinner_item_image);
    ImageUtils.load(categoryImage, getItem(position).getIcon());

    return convertView;
}
}

item_spinner_category.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:background="@drawable/top_bar_select_icon" />

<TextView
    android:id="@+id/scategory_title"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_centerInParent="true"
    android:textColor="@android:color/white" />


<com.android.volley.toolbox.NetworkImageView
    android:id="@+id/scategory_image"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentRight="true"
    android:layout_marginRight="3dp"
    android:layout_centerVertical="true"
    android:src="@drawable/spinner_games_icon"/>

</RelativeLayout>

simple_spinner_category.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/spinner_item_title"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:textSize="14sp"
    android:gravity="center"
    android:textColor="@android:color/white"
    android:background="@drawable/bottom_button_selector"/>

<com.android.volley.toolbox.NetworkImageView
    android:id="@+id/spinner_item_image"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentRight="true"
    android:layout_marginRight="3dp"
    android:layout_centerVertical="true" />

</RelativeLayout>

The static image of R.id.scategory_image is shown for a short period of time, probably until Volley downloads the network image. The getDropDownView behaves well, images are shown next to the text in the dropdown views, but this doesn't seem to happen for the main view.

Any idea what might happen here?

Answer 1

Today I was struggling with the same problem. Since there is no answer, I'd like to share mine, hoping that would be helpful for someone.

Checking out the NetworkImageView source code, I found out that the "problem" was here:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    loadImageIfNecessary(true);
}

So, just because I didn't want touch this awesome framework, I created a SpinnerNetworkImageView (copy and paste from the original NewtworkImageView) customizing this method:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    loadImageIfNecessary(false); // <-- look @ 'false' 
}

Now everything works fine.

Another way will be to use a normal ImageView and performing an ImageRequest in your adapter:

Response.ErrorListener errorListener = ...

Response.Listener<Bitmap> listener = new Response.Listener<Bitmap>() {
    @Override
public void onResponse(Bitmap bitmap) {
    holder.picture.setImageBitmap(bitmap);
    }
};

ImageRequest req = new ImageRequest(
    url, listener, width, height, Config.ARGB_8888, errorListener);

requestQueue.add(request);

but I choosed the first solution.

Answer 2

I do not understand why do you use ImageUtils.load. I am using volley for loading images this way:

NetworkImageView imageViewIcon = (NetworkImageView) itemView.findViewById(R.id.imageViewIcon);

    if (imageViewIcon != null && get(position).getPhotos() != null && get(position).getPhotos().length > 0) {
        imageViewIcon.setImageUrl(get(position).getPhotos()[0], Application.get().getImageLoader());
    }

and imageLoader is in Application

public void onCreate() {
    super.onCreate();
    sInstance = this;

    RequestQueue queue = Volley.newRequestQueue(this);
    mApi = new Test_Api(queue);

    ImageLoader.ImageCache imageCache = new ImageLoader.ImageCache() {
        @Override
        public void putBitmap(String key, Bitmap value) {
            mImageCache.put(key, value);
        }

        @Override
        public Bitmap getBitmap(String key) {
            return mImageCache.get(key);
        }
    };

    mImageLoader = new ImageLoader(queue, imageCache);

}