A grid layout of icon/text buttons

Question

I am attempting to create a 3 x 3 grid of items. Each Item consists of an ImageView on top of a TextView. Unfortunately, I am having issues getting everything to play nicely.

Here is my attempt to get 2 such items side by side. The text views don't even show, and the icons are squished together (instead of evenly spaced)

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" android:gravity="center"
    android:paddingLeft="40px" android:paddingRight="40px" >
<TableRow>
    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
        <ImageView 
           android:id="@+id/usertoolsimage"
           android:src="@drawable/ftnicon"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           />
        <TextView
        android:text="User Accounts"
        android:gravity="right"
        android:padding="3dip" android:textColor="#ffffff" />
    </LinearLayout>


   <LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
        <ImageView 
           android:id="@+id/queueimage"
           android:src="@drawable/ftnicon"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           />
        <TextView
        android:text="Queue Management"
        android:gravity="right"
        android:padding="3dip" android:textColor="#ffffff" />
    </LinearLayout>
</TableRow>

<TableRow>
    <TextView
        android:text="test 3"
        android:padding="3dip" android:textColor="#ffffff" />
    <TextView
        android:text="test 4"
        android:gravity="right"
        android:padding="3dip" android:textColor="#ffffff" />
</TableRow>
</TableLayout>

My goal in the end is to have a grid of clickable items where the item is an image and text for a main menu. Can anyone guide me on what layouts I should use to achieve this?

Answer 1

Your best bet in my opinion would be to use the gridView that way it supports scrolling and spacing and you can be very dynamic in what each items layout and events are. Another option is to just create a lay out the images with a combination of Relative/Linear Layouts.

GridView layout:

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/myGrid"
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:padding="10dp"
android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"
android:numColumns="3"
android:columnWidth="60dp"
android:stretchMode="columnWidth"

android:gravity="center"
/>

and then in your activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    mGame.status = GameStatus.PLAYING;

    setContentView(R.layout.gridLayout);
    GridView grid = (GridView) findViewById(R.id.myGrid);
    grid.setAdapter(new customAdapter());

    grid.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            //do some stuff here on click
        }
    });
}

public class customAdapter extends BaseAdapter {

    public View getView(int position, View convertView, ViewGroup parent) {
//create a basic imageview here or inflate a complex layout with
//getLayoutInflator().inflate(R.layout...)
        ImageView i = new ImageView(this);

        i.setImageResource(mFams.get(position).imageId);
        i.setScaleType(ImageView.ScaleType.FIT_CENTER);
        final int w = (int) (36 * getResources().getDisplayMetrics().density + 0.5f);
        i.setLayoutParams(new GridView.LayoutParams(w * 2, w * 2));
        return i;
    }

    public final int getCount() {
        return 9;
    }

    public final Family getItem(int position) {
        return mFams.get(position);
    }

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

Or the basic layout using linear layouts:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout android:id="@+id/linearLayout1" 
android:layout_height="fill_parent" 
android:layout_weight="1"
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent"
android:orientation="horizontal">

    <ImageView>...</ImageView>
    <ImageView>...</ImageView>
    <ImageView>...</ImageView>

</LinearLayout>

<LinearLayout android:id="@+id/linearLayout2" 
android:layout_height="fill_parent" 
android:layout_weight="1"
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent"
android:orientation="horizontal">

    <ImageView>...</ImageView>
    <ImageView>...</ImageView>
    <ImageView>...</ImageView>

</LinearLayout>

<LinearLayout android:id="@+id/linearLayout3" 
android:layout_height="fill_parent""
android:layout_weight="1"
android:layout_alignParentLeft="true" 
android:layout_width="fill_parent"
android:orientation="horizontal">

    <ImageView>...</ImageView>
    <ImageView>...</ImageView>
    <ImageView>...</ImageView>

</LinearLayout>

Answer 2

You should really use a GridView to do grids, and not TableRows. Have you seen Android's tutorial for GridView's? To be able to achieve what you want with an image overlayed with text, you would need to utilize the FrameLayout as shown in Android's FrameLayout example. The tricky part here though, is that you need to apply this layout to each item that is going to be in the Gridview.

So for example, lets say you create a layout file called image_text_view.xml which looks like this:

    <FrameLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:id="@+id/gridImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="false">
</ImageView>
<CheckedTextView
android:id="@+id/imageTick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000000"
android:layout_gravity="center_horizontal|bottom"
android:checkMark="@drawable/icon"
android:checked="false"
android:visibility="invisible"
>
</CheckedTextView>
</FrameLayout>

You need to apply this layout in each of your GridView item. To do this (editing Android's GridView example) You would need to redefine the getView in the ImageAdapter as follows:

public View getView(int position, View convertView, ViewGroup parent) {
View v;
    if(convertView==null){
        v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null);
        v.setLayoutParams(new GridView.LayoutParams(100,100));

        ImageView imageView = (ImageView)v.findViewById(R.id.image);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(8, 8, 8, 8);
        imageView.setImageResource(mThumbsIds[position]);

                    CheckedTextView checkedTextView = (TextView) v.findViewById(R.id.imageTick);
                    checkedTextView.setEnabled(true);
                    checkedTextView.setVisibility(View.VISIBLE);

    }
    else
    {
        v = convertView;
    }


    return v;

Using this, for example, you will have whatever you set (whether its text or icons) overlaying the images for each item in the grid. You may need to do minor tweaks to this example to meet your exact needs, but this is the strategy i would go with.