How To Add A Caption To A GridView Cell

Question

Hi All I am Using a GridView Tool From The Android To Display The Image As A menu

I am Using this Code in A class I Name It ImageAdapter extends BaseAdapter

I've Use This Code Bellow

package com.example.gridviewtest;

import com.example.gridviewtest.R;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter; 
import android.content.Context;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public Integer[] mThumbIds = 
        {
            R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
            R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
            R.drawable.pic7, R.drawable.pic8, R.drawable.pic9
        };

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

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
        return imageView;
    }
}

I try to use a

imageView.setText("Something");

but it doesn't Works With Me the require is to add a caption under a picture in a cell

Can You Help Me On This ...

Best Regards ...

Answer 1

You could use a custom adapter (as for a listView):

public class CustomAdapter extends ArrayAdapter<Integer> {
     Activity context;   
     ArrayList<Integer> objects;

     public CustomAdapter(Activity context,  ArrayList<Integer> objects) {
      super(context, R.layout.row, objects);
      this.context = context;
      this.objects = objects;
     }

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

      if (convertView == null) {
       LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
       convertView = inflater.inflate(R.layout.row, parent, false);


      } 

      ImageView i = (ImageView) convertView.findViewById(R.id.icon);
      i.setBackgroundResource(objects.get(position));

      TextView t = (TextView) convertView.findViewById(R.id.title);
      t.setText("title");

      return convertView;

     }

    }

And of course you will set this it as an adapter for the gridView.

EDIT: Of course instead of ArrayAdapter<Integer> you could be extending ArrayAdapter<YourHolder>.

class YourHolder {
  public int ID;
  public String title;
}

EDIT 2: Adding a functional piece of code.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <GridView 
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="3"
        android:gravity="center_horizontal"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:padding="10dp"
        android:background="#600000ff"     
        />

</RelativeLayout>

grid_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#6000ff00"
    android:padding="4dp">

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="label"
        android:layout_gravity="center_horizontal"/>
    <FrameLayout 
        android:id="@+id/holder"
        android:layout_width="100dp"
        android:layout_height="100dp">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"/>
    </FrameLayout>    

</LinearLayout>

CustomAdapter.class

public class CustomAdapter extends ArrayAdapter<Integer> {

    private Activity context;
    private ArrayList<Integer> objects;

    public CustomAdapter(Activity context, ArrayList<Integer> objects) {
        super(context, R.layout.grid_item_layout, objects);
        this.context = context;
        this.objects = objects;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if(convertView == null){
            LayoutInflater i = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = (View) i.inflate(R.layout.grid_item_layout, parent, false);
        }

        TextView t = (TextView) convertView.findViewById(R.id.label);
        ImageView i = (ImageView) convertView.findViewById(R.id.image);

        t.setText("label " + position);
        i.setImageResource(objects.get(position));

        return convertView;
}

MainActivity

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView g = (GridView) findViewById(R.id.grid_view);
        CustomAdapter adapter = new CustomAdapter(this, getData());
        g.setAdapter(adapter);
    }

    public ArrayList<Integer> getData(){
        ArrayList<Integer> list = new ArrayList<Integer>();
        list.add(R.drawable.pic1);
        // add 2 - 11
        list.add(R.drawable.pic12);

        return list;
    }

}

Final look:

Note: From my experience when there are a lot of pictures in the gridView scrolling becomes slow and laggy, however it's not the topic of your question, so in case it's also a problem, please see Lazy load of images in ListView