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

Answer 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.

Answer 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>

Answer 3

Just to extend userSeven7s' answer, you should return the RelativeLayout instead of ImageView, so that the GridView have RelativeLayout as it's direct child, instead of ImageView and RelativeLayout can have TextView and ImageView etc.
You can get the object of RelativeLayout by the following method:

RelativeLayout rel = (RelativeLayout)View.inflate(R.layout.YOUR_RELATIVE_LAYOUT_XML_HERE);