gridview with image and text android

Question

I successfully created a gridview populated with images. Now, what I want to do is put a text below the image.

This is the screenshot of my app so far.

http://i203.photobucket.com/albums/aa266/paulocarabuena_bucket/screen-2.png

Here is my getView method in my imageadapter class..

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

if (convertView == null) {
    imageView = new ImageView(this.context);
    imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setPadding(8, 8, 8, 8);
} else {
    imageView = (ImageView) convertView;
}

imageView.setImageResource(this.thumbs[position]);
return imageView;
}

Here is the onCreate method of my main activity

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.launchFullScreen();
    this.setContentView(R.layout.main);

    this.grids = (GridView) this.findViewById(R.id.elements);

    ImageAdapter adapter = new ImageAdapter(this);

    this.grids.setAdapter(adapter);

    this.grids.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {

        }
    });
}

Thanks in advance. :)

Answer 1

You can do it using an XML, that defines the GridView cell:

image.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:gravity="center_horizontal"
    >
    <ImageView
        android:id="@+id/image"
        android:layout_marginBottom = "10dp"
        android:src="@drawable/cell_sfondo"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
    </ImageView>

<TextView
        android:id="@+id/title" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

Then in your getView():

if(convertView == null) {
            view = inflater.inflate(R.layout.image, null);
        }
        else
            view = convertView;
ImageView image = (ImageView)view.findViewById(R.id.image);
image.setImageResource(this.thumbs[position]);

Answer 2

Instead of Directly using Image View , you should inflate a view as below :

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/widget44"android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:layout_x="201px"
 android:layout_y="165px"
 android:gravity="center_horizontal">
<ImageView
   android:id="@+id/icon_image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
</ImageView>
<TextView
   android:id="@+id/icon_text"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="TextView"
   android:gravity="center_horizontal"
   android:textColorHighlight="#656565">
</TextView>
</LinearLayout>

And your Adapter should be like this :

public class ImageAdapter extends BaseAdapter{
    Context mContext;
    public static final int ACTIVITY_CREATE = 10;
    public ImageAdapter(Context c){
        mContext = c;
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return 5;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View v;
        if(convertView==null){
            LayoutInflater li = getLayoutInflater();
            v = li.inflate(R.layout.icon, null);
            TextView tv = (TextView)v.findViewById(R.id.icon_text);
            tv.setText("Profile "+position);
            ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
            iv.setImageResource(R.drawable.icon);

        }
        else
        {
            v = convertView;
        }
        return v;
    }
}

Answer 3

Paresh Mayani have a really good and simple example. This helped me a lot.

http://www.technotalkative.com/android-gridview-example/

Answer 4

You can create a layout for your image and text in each cell of the grid layout. And I suggest inflating the layout from an xml. You can try to do something like this:

//Use a viewHolder to optimize the list
ViewHolder holder = null;

if (convertView == null) {
   //Create a new view holder to optimize the loading of elements in list
   holder = new ViewHolder();

   convertView = LayoutInflater.from(this.context).inflate(R.layout.my_custom_xml,null) ;
   holder.imageView = (ImageView)convertView.findViewByID(R.id.my_image_view);
   holder.textView = (TextView)convertView.findViewByID(R.id.my_text_view);

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

//Bind data to the row

//Set the position in holder
holder.position = position;
//Set the image for each row
holder.imageView ...
//Set the text for each row
holder.textView.setText()...


//And the viewholder looks like this

private class ViewHolder{
//The position of this row in list
private int position;

//The image view for each row
private ImageView imageView;

//The textView for each row
private TextView textView;
}

And now you can simply create my_custom_xml which contain the text and image view:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "fill_parent"
    android:layout_height = "wrap_content"
    android:orientation= "vertical">
       <ImageView
           android:id = "@+id/my_image_view"
           android:layout_width =  ....
           android:layout_height = ...
       />
      <TextView
          android:id = "@+id/my_text_view"
          android:layout_width = ....
          android:layout_height = ....
       />
</LinearLayout>

Answer 5

Instead of taking dynamic imageview,you can inflate layout having textview under imageview in adapter as:

if(convertView==null){
            inflater=(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            holder=new Holder();
            convertView=inflater.inflate(R.layout.gridinflater, null);
            holder.imageView=(ImageView) convertView.findViewById(R.id.img);

            holder.textView=(TextView) convertView.findViewById(R.id.txt);

            convertView.setTag(holder);
        }
        else {
            holder = (Holder) convertView.getTag();
        }

where gridInflater is layout having textview under imageview in Relative Layout as parent.

public static class Holder {
        public ImageViewProgress imageView;
        public TextView textView;
    }