How can I add a TextView into an ImageView in GridView Layout?

Question

I need a GridView, but in each grid, there will be an ImageView and TextView over/inside it.

It will be like an item image in each grid, and name of the item on the image.

I am tring:

    public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) { // if it's not recycled, initialize some
                                // attributes
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(300, 300));
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        imageView.setPadding(0, 0, 0, 0);
    } else {
        imageView = (ImageView) convertView;
    }

    imageView.setImageResource(mThumbIds[position]);

    TextView nameView = new TextView(mContext);
    nameView.setText("Name");
    nameView.setTextSize(20);

    parent.addView(nameView);

    return imageView;
}

in my grid view adapter. But I cannot add it here. Also I tried to add it in ImageView but since it is not a ViewGroup, I couldn't achieve.

UPDATE:

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

    LayoutInflater inflater = LayoutInflater.from(mContext);
    ViewHolder holder;

    if (convertView == null) { // if it's not recycled, initialize some
                                // attributes
        convertView = inflater.inflate(R.layout.gridviewitem, null, true);
        holder = new ViewHolder();
        holder.image = (ImageView) convertView
                .findViewById(R.id.gridViewItemImage);
        holder.name = (TextView) convertView
                .findViewById(R.id.gridViewItemName);
        holder.price = (TextView) convertView
                .findViewById(R.id.gridViewItemPrice);
        convertView.setTag(holder);

    } else {    
        holder = (ViewHolder) convertView.getTag();
    }

    holder.image.setImageResource(mThumbIds[position]);
    holder.name.setText("Item " + String.valueOf(position));
    holder.price.setText("$15");

    return convertView;
}

This solved my problem

Solution 1

Create a RelativeLayout that contains the ImageView and the TextView,with TextView's bottom edge aligned with the Imageview's bottom edge.

<RelativeLayout ...>
    <ImageView ...>
    <TextView ...
      android:layout_alignBottom="id of the imageview"> // or to top
</RelativeLayout>

Inflate this layout in getView method of your adapter.

Solution 2

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

    <ImageView
        android:id="@+id/grid_outer_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/image_border" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" >

        <TextView
            android:id="@+id/grid_inner_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="some text" />
    </RelativeLayout>

</RelativeLayout>

Comments

[Burak]

R.layout.layout_name or R.id.layout_id?

[Burak]

After inflating the layout, what should I return?

[0xC0DED00D]

Sorry it must be layout not id. After that the Name of your XML file should come, if you are using it, or else you can dynamically create RelativeLayout and put views in it, but that'd be quite a hassle.

[Ron]

Relativelayouts will be the items of your gridview. So return the relativelayout reference.