Android Gallery's getView() returning incorrect position

Question

Thanks for reading!

I am using the Android Gallery with both LayoutParams as MATCH_PARENT to show one full screen image at a time.

Here's my code:

layout.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">
    <Gallery
        android:id="@+id/gallery" android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </Gallery>
    <TextView android:id="@+id/tvShowText" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true" />
</RelativeLayout>

HelloGallery.java

package com.android.sagar;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class HelloGallery extends Activity {

    TextView tvShowText = null;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        tvShowText = (TextView)findViewById(R.id.tvShowText);

        Gallery g = (Gallery) findViewById(R.id.gallery);
        g.setAdapter(new ImageAdapter(this));

        g.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView parent, View v, int position, long id) {
                Toast.makeText(HelloGallery.this, "" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }

    public class ImageAdapter extends BaseAdapter {
        int mGalleryItemBackground;
        private Context mContext;

        private Integer[] mImageIds = {
                R.drawable.pic1,
                R.drawable.pic2,
                R.drawable.pic3
        };

        public ImageAdapter(Context c) {
            mContext = c;
        }

        public int getCount() {
            return mImageIds.length;
        }

        public Object getItem(int position) {
            return position;
        }

        public long getItemId(int position) {
            return position;
        }

        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView i = new ImageView(mContext);

            tvShowText.setText("ImageCaption for Image No.: "+position);

            i.setImageResource(mImageIds[position]);
            i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            i.setScaleType(ImageView.ScaleType.FIT_XY);
            i.setBackgroundResource(mGalleryItemBackground);

            return i;
        }
    }
}

The images show correctly but the caption that I print is off by one or sometimes totally different. :(

I debugged and found that when I swipe once, the getView() gets called multiple times - around 2 to 3 times...and they are all different positions but the image appears to be moving one at a time. :( Please help!

Answer 1

In order to update your caption correctly you need to override the Gallery's OnItemSelectedListener. Sujit is correct in his comment that getView is called in order to render (or pre-render, or post-render in some cases) each image in the Gallery. It shouldn't be depended on to identify which image is selected. Instead, override OnItemSelectedListener in your HelloGallery onCreate() method:

    g.setOnItemSelectedListener(new OnItemSelectedListener() 
    {
       @Override
       public void onItemSelected(AdapterView<?> parent, View view, int position, long id) 
       {
          tvShowText.setText("ImageCaption for Image No.: "+position);
       }
       @Override
       public void onNothingSelected(AdapterView<?> arg0) 
       {
          tvShowText.setText("No image selected");
       }
    });            

Answer 2

main.xml

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

gallery_image_item.xml

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

<ImageView android:id="@+id/gallery_item_liner_image"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:layout_marginTop="7dip" android:layout_centerInParent="true">
</ImageView>

public class SolvedApplication extends Activity {

TextView tvShowText = null;

private Integer[] mImageIds = { R.drawable.icon, R.drawable.icon,
        R.drawable.icon };

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    tvShowText = (TextView) findViewById(R.id.tvShowText);

    Gallery g = (Gallery) findViewById(R.id.gallery);
    g.setAdapter(new ImageAdapter(this));

    g.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView parent, View v, int position,
                long id) {
            Toast.makeText(SolvedApplication.this, "" + position,
                    Toast.LENGTH_SHORT).show();
        }
    });
}

public class ImageAdapter extends BaseAdapter {
    int mGalleryItemBackground;
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mImageIds.length;
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        final ViewHolder holder;
        tvShowText.setText("ImageCaption for Image No.: " + position);

        View rowView = convertView;

        if (rowView == null) {
            holder = new ViewHolder();

            LayoutInflater inflater = (LayoutInflater) getApplicationContext()
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            rowView = inflater.inflate(R.layout.gallery_image_item, null);

            holder.mainImage = (ImageView) rowView
                    .findViewById(R.id.gallery_item_liner_image);

            rowView.setTag(holder);

        } else {
            holder = (ViewHolder) rowView.getTag();
        }
        holder.mainImage.setImageResource(mImageIds[position]);

        return rowView;
    }
}

// Class used for gallery view
static class ViewHolder {
    private ImageView mainImage, selectionImage;
}

}

Answer 3

Here's code you require from Change border style in Gallery to get a 20 pixel black border around your images. This seemed like the best place to post it. Please bump a vote to me either here or there.

    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView i = new ImageView(mContext);

        i.setImageResource(mImageIds[position]);
        i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        i.setScaleType(ImageView.ScaleType.FIT_XY);
        i.setBackgroundResource(mGalleryItemBackground);

        RelativeLayout borderImg = new RelativeLayout(mContext);
        borderImg.setPadding(20,20,20,20);
        borderImg.setBackgroundColor(0xff000000);
        borderImg.addView(i);

        return borderImg;
    }