Displaying composite items in Android Gridview

Question

I am trying to display a grid of elements, each one composed by a RelativeLayout containing an ImageView on top of a TextView.

I have already seen someone else asking the same question, and I was already adopting the proposed solution; anyway, in this solution, the getView() function returns an ImageView item only, not the TextView. I tried to return a custom item, which extends RelativeLayout, but I am unable to see the elements in the Gridview. If I click on them, I still get the Toast message (see my listener code below), but only the (grey) background of the Gridview is visible on screen.

If I pass the ImageView or the TextView only, as suggested in the solution above, I can still see the single item. So my issue is how to manage getView to return two items inside a custom View.

Here is my code so far:

Activity class:

List<String> mItemsImage;
List<String> mItemsText;

@Override
public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.mylayout);

    mItemsImage = new ArrayList<String>();
    mItemsText = new ArrayList<String>();

    mGridView = (GridView) findViewById(R.id.mygridview);

    fillArraylists();

    mGridView.setAdapter(new CustomItemAdapter(this, mItemsImage, mItemsText));

    mGridView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            Toast.makeText(MyActivity.this, "text is + "mItemsText.get(position), Toast.LENGTH_SHORT).show();
        }
    });
}

Adapter class:

class CustomItemAdapter extends BaseAdapter{
    private Context mContext;
    private List<String> mImageList;
    private List<String> mTextList;

    public CustomItemAdapter(Context c, List<String> imageList, List<String> textList) {
        mContext = c;
        mImageList = imageList;
        mTextList = textList;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        CustomItem item;

        if (convertView == null) {  // if it's not recycled, initialize some attributes
            item = new CustomItem(mContext, mImageList.get(position), mTextList.get(position));
            item.findViewById(R.id.grid_item);//Tried to add this line in a second moment, but it didn't work anyway
            item.setLayoutParams(new GridView.LayoutParams(parent.getWidth() >> 2, parent.getHeight() >> 2));
        } else {
            item = (CustomItem) convertView;
        }
        return item;
        //if I do 'return item.image' or 'return item.text' I can see the View on screen normally
    }
}

CustomItem class:

class CustomItem extends RelativeLayout{
    public ImageView image;
    public TextView text;

    public CustomItem(Context ctx, String imagepath, String description){
        super(ctx);

        image = new ImageView(ctx);
        image.findViewById(R.id.grid_item_image);
        image.setScaleType(ImageView.ScaleType.CENTER_CROP);
        image.setPadding(8, 8, 8, 8);
        image.setImageBitmap(BitmapFactory.decodeFile(imagepath));

        text = new TextView(ctx);
        text.findViewById(R.id.grid_item_text);
        text.setPadding(8, 0, 8, 0);
        text.setText(description);
    }
}

mylayout.xml:

...

<GridView
    android:id="@+id/mygridview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_lightgrey_rect"
    android:gravity="center"
    android:numColumns="2"
    android:stretchMode="columnWidth" >
</GridView>

grid_item.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"
    android:id="@+id/grid_item" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/default_image"
        android:contentDescription="@string/image_not_found" />

    <TextView
        android:id="@+id/grid_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/grid_item_image"
        android:layout_centerHorizontal="true"
        android:text="@string/image_not_found"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

Use Hierarchy View to determine what is going wrong. – CommonsWare Apr 12 '13 at 12:49 — CommonsWare, Apr 12 '13 at 12:49

score 2 · Accepted Answer · edited May 23 '17 at 12:18

Ok, I found - part of - the solution.

Basing on this, I edited the getView method as follows:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    RelativeLayout item;

    if (convertView == null) {  // if it's not recycled, initialize some attributes
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        item = (RelativeLayout) inflater.inflate(R.layout.grid_item, null, true);
        ImageView image = (ImageView) item.findViewById(R.id.grid_item_image);
        image.setScaleType(ImageView.ScaleType.CENTER_CROP);
        image.setImageBitmap(BitmapFactory.decodeFile(mImageList.get(position)));

        TextView text = (TextView) item.findViewById(R.id.grid_item_text);
        text.setText(mTextList.get(position));
        item.setLayoutParams(new GridView.LayoutParams(parent.getWidth() >> 2, parent.getHeight() >> 2));

    } else {
        item = (RelativeLayout) convertView;
    }

    return item;
}

And I no longer need a CustomItem class.

grid_item.xml now is:

<ImageView
    android:id="@+id/grid_item_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/grid_item_text"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/image_not_found"
    android:src="@drawable/default_image" />

<TextView
    android:id="@+id/grid_item_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:text="@string/image_not_found"
    android:textAppearance="?android:attr/textAppearanceLarge" />

(I still have some visualization problems with the gridView, though. The first element is missing, and I can scroll way past above the second element)

Displaying composite items in Android Gridview

1 Answers1