Android Custom GridLayout with Text+Image

Question

In my application, I am trying to get the details of a set of users from a web-service. Then, I want to display the Image of each user along with their names in a GridLayout. I haven't used GridLayout before and hence tried to go through the tutorials available online, but most of them deal with just the Images. I need to display both the Image and the Text in the Grid.

How do I setup the custom GridLayout to display the Text along with the Images ?

Answer 1

Try this :

  public class GridActivity extends Activity implements AdapterView.OnItemClickListener {
/** Called when the activity is first created. */

Integer[] imageIDs = {
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,

  };

String[] titles = {
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",   
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",

 };
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
  GridView gridView = (GridView) findViewById(R.id.grid);
    gridView.setAdapter(new ImageAdapter(this));


}

public class ImageAdapter extends BaseAdapter 
{
    private Context context;

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

    //---returns the number of images---
    public int getCount() {
        return imageIDs.length;
    }

    //---returns the ID of an item--- 
    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    //---returns an ImageView view---
    public View getView(int position, View convertView, ViewGroup parent) 
    { 
        ImageView icon;
    icon = new ImageView(context);

    LayoutInflater inflater = (LayoutInflater)             context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View row=inflater.inflate(R.layout.row, parent, false);
    TextView label=(TextView)row.findViewById(R.id.image_name);
    label.setText(titles[position]);
    icon=(ImageView)row.findViewById(R.id.album_image);

    icon.setImageResource(imageIDs[position]);

    return row;
    }

}

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
        long arg3) {

    // TODO Auto-generated method stub

}
    }

Main.XMl

    <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >   

  <GridView
    android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/lay"
    android:columnWidth="100px"
    android:horizontalSpacing="5dip"
    android:numColumns="auto_fit"
    android:scrollbars="horizontal"

    android:stretchMode="columnWidth"
    android:verticalSpacing="35px" />
   </LinearLayout>

Row.xml

  <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >


  <ImageView
  android:id = "@+id/album_image"
  android:adjustViewBounds="true"
  android:layout_width = "fill_parent"             
  android:layout_height="wrap_content"
  />
  <TextView
  android:id = "@+id/image_name"
  android:layout_width = "fill_parent"             
  android:layout_height="wrap_content"
  android:gravity="center"
  />
  </LinearLayout>

Answer 2

Here is a very good example fo GridView with ImageView and TextView.

Simply create a xml file with ImageView and textView like this,

<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 then use a custom Adapter to populate it.

@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;
        }