Develop Reference

How to use grid layout in a card game

I'm developing the memory card game that has twelve cards, three rows made up of four cards.
To do this, the layout consists of three linear layouts that contain four textview each.
How can I do in another way using a grid layout?
This is my layout xml to create the cards rows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/iv_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_b"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_c"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_d"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
</LinearLayout>

You can use GridView for this situation. I put my very simplified codes here, so you can use them and change them as you need. This GridView has just 12 ImageViews.
Create an Adapter class for GridView:
MyGridViewAdapter.java
public class MyGridViewAdapter extends BaseAdapter {
private Context context;
private List<Integer> drawables;
MyGridViewAdapter(Context context) {
this.context = context;
}
void setDrawables(List<Integer> drawables)
{
this.drawables = drawables;
}
public int getCount() {
return drawables.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create new ImageViews for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
// main layout of each item of gridView:
RelativeLayout relativeLayout=new RelativeLayout(context);
relativeLayout.setLayoutParams(new GridView.LayoutParams((int)dpToPx(context, 100),
(int)dpToPx(context, 100)));
// images:
ImageView imageView = new ImageView(context);
imageView.setImageResource(R.drawable.ic_launcher_background);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT));
relativeLayout.addView(imageView);
return relativeLayout;
}
private float dpToPx(Context context, float dp) {
return dp * context.getResources().getDisplayMetrics().density;
}
}
Add GridView to your activity layout:
activity_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".TestActivity"
android:orientation="vertical">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gridView"
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:choiceMode="singleChoice"
android:drawSelectorOnTop="true"
android:focusable="true"
android:clickable="true"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:layout_margin="10dp"/>
</LinearLayout>
Use these codes in your activity:
TestActivity.java
public class TestActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// list of 12 images:
List<Integer> drawables=new ArrayList<>();
for(int i=0; i<12; i++)
{
drawables.add(R.drawable.ic_launcher_background);
}
// gridView adapter:
MyGridViewAdapter adapter = new MyGridViewAdapter(this);
adapter.setDrawables(drawables);
// gridView:
GridView gridView = findViewById(R.id.gridView);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// what happen when you click on each item
}
});
}
}
and the result:
Good luck!

<GridLayout 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"
android:columnCount="4"
android:rowCount="3" >
<ImageView
android:id="#+id/iv_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/card" />
.
.
.
</ GridLayout>
Read: https://medium.com/google-developer-experts/android-grid-layout-1faf0df8d6f2

Android GridView not showing any images

I have followed the example at https://developer.android.com/guide/topics/ui/layout/gridview.html and used other resources on SO to make it at least not crash given I'm using the grid view in a fragment.
I'm trying to just get a list of images to show in the grid view (for simplicity I've just put the same image twice in mThumbIds in ImageAdapter).
But when I run the app, no GridView at all is showing in the fragment. Other views in the fragment load fine, but it's like the gridview isn't even there. I'm not really sure how to debug this.
Any help is appreciated, thanks.
ImageAdapter.java:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
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(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.placeholder, R.drawable.placeholder
};
}
PlaceholderFragment:
public static class PlaceholderFragment extends Fragment
{
...
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View rootView = inflater.inflate(R.layout.fragment_items, container, false);
TextView textView = (TextView) rootView.findViewById(R.id.items_subheading);
textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
GridView allImages = (GridView) rootView.findViewById(R.id.items_all_images);
allImages.setAdapter(new ImageAdapter(rootView.getContext()));
allImages.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{
// empty
}
});
return rootView;
}
fragment_items.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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.myapp.ItemsActivity$PlaceholderFragment">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="top|left"
android:orientation="vertical">
<ImageView
android:id="#+id/items_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/placeholder"
android:scaleType="fitStart"
style="#style/ItemsImage" />
<GridView
android:id="#+id/items_all_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="20dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
android:background="#000000"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/items_border">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- About 10 text views -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit
Aiming for:
Edit 2
Solution: Figured it out! Needed android:adjustViewBounds="true" on the ImageView. Without that attribute it seemed to be taking unlimited space below its position.

I think that you have an issue with the LinearLayout who wraps the GridView your LinearLayout is a vertical linear layout so if you use weight the height of the GridView should be 0dp and in your code the height is wrap_content and the width is 0dp so please change the height to 0dp and the width to wrap_content or match_parent
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="top|left"
android:orientation="vertical">
<GridView
android:id="#+id/items_all_images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="20dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
/>
UPDATE
According to your mock i think this is what i would do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<!-- If the number of textviews is dynamic and not fixed then it's better to use ListView
with adapter
-->
<!--<ListView-->
<!--android:id="#android:id/list"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content" />-->
</LinearLayout>
<GridView
android:id="#+id/items_all_images"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:layout_marginTop="5dp"
android:columnWidth="20dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" />
</LinearLayout>
Please notice if your textviews are not fixed (can be 3 or more ...) then you will need to use ListView with adapter. So each line item in the ListView will be a TextView

Android. two imageViews that fits screen perfectly

Im working on a ListView and each row has two square imageViews. The drawable is given dynamically by url. The problem is that the picture does not fit screen.
the image from url is already square but i want the image to scale up or down to fit the screen.
right now it looks like first screenshot but i want them to look like the second one.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<ImageView
android:id="#+id/list_item_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageView
android:id="#+id/list_item_image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</LinearLayout>
this is Adapter
public class ListAdapter extends ArrayAdapter<ListItem>{
private ArrayList<ListItem> items;
private Activity context;
private static LayoutInflater inflater = null;
public ImageLoader imageLoader;
public ListAdapter(Activity context, int textViewResourceId, ArrayList<ListItem> items)
{
super(context, textViewResourceId, items);
this.items = items;
this.context = context;
inflater = (LayoutInflater)context.getLayoutInflater();
imageLoader = new ImageLoader(context);
}
public static class ViewHolder{
public ImageView image1;
public ImageView image2;
}
#Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
View rowView = convertView;
ViewHolder holder;
if (rowView == null) {
rowView = inflater.inflate(R.layout.list_item, null);
holder = new ViewHolder();
holder.image1 = (ImageView)rowView.findViewById(R.id.list_item_image1);
holder.image2 = (ImageView)rowView.findViewById(R.id.list_item_image2);
rowView.setTag(holder);
}
else
holder = (ViewHolder)rowView.getTag();
imageLoader.DisplayImage("http://dev.ts.hs.kr/jjhoon713/images/1400023976194990.jpg", holder.image1);
imageLoader.DisplayImage("http://dev.ts.hs.kr/jjhoon713/images/1400023976194990.jpg", holder.image2);
return rowView;
}
}

try like this,
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/list_item_image1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="1"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/list_item_image2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="1"
android:scaleType="fitXY"
/>
</LinearLayout>

Try with below code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="5dp"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2"
>
<ImageView
android:id="#+id/list_item_image1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
/>
<ImageView
android:id="#+id/list_item_image2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"
/>
</LinearLayout>

take a linear layout with weightsum=2 and assign 1 weight to each imageview like below:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" // you can hardcode height if your view
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/imageview1"
android:layout_width="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:layout_height="wrap_content" // can change to fill parent if you hardcode the height of your view
android:src= ""// your image if static, else set dynamically
android:scaleType="fitxy"/>
<ImageView
android:id="#+id/imageview2"
android:layout_height=""// can change to fill parent if you hardcode the height of your view
android:layout_width="0dp"
android:adjustViewBounds="true"
android:layout_weight="1"
android:src="wrap_content" // your image if static, else set dynamically
android:scaleType="fitxy"/>
</LinearLayout>

my problem was that layout width of list_view.xml was wrap content.
since parent of list items are list_view so weight didnt work.
i changed them to fill_parent and now it works well

Android ListView creates the views but doesn't display them

I am having problems with ListView on android. I have an Activity with an EditText view and a button. The idea is user should enter some info in the EditText field, touch the Search button which retrieves a list from a web service that it is displayed in the same activity below the EditText and the Button. Everything fine, I got the data from Internet but items weren't displaying. I was using the notifyDataSetChanged(). After a couple of hours with no success, I decided trying to put some items manually and it turns out that again nothing was displayed, hence I think I am doing something wrong when I am trying to set the listview and the adapter. So here is the code..
the xml of the activity activity_search.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp">
<EditText
android:id="#+id/edit_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:inputType="text"
android:hint="Enter info"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:drawable/ic_menu_search"
android:contentDescription="Search"
android:ems="10" />
</LinearLayout>
<ListView
android:id="#+id/listview_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false" />
The XML of the item row.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="5dp">
<TextView
android:id="#+id/row_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Common_TextContent"
android:textAppearance="#android:style/TextAppearance.Holo.Medium" />
<TextView
android:id="#+id/row_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/Common_TextContent"
android:textAppearance="#android:style/TextAppearance.Holo.Small" /></LinearLayout>
the custom Adapter:
public class ItemsListAdapter extends ArrayAdapter<ItemsList> {
private int[] colors = new int[] { 0x30ffffff, 0x30808080 };
public AssetListAdapter(Context context,
List<ItemsList> itemsList) {
super(context, 0, itemsList);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, null);
}
convertView.setBackgroundColor(colors[position % colors.length]);
TextView code = (TextView) convertView.findViewById(R.id.row_code);
code.setText(getItem(position).getCode());
TextView name = (TextView) convertView.findViewById(R.id.row_name);
name.setText(getItem(position).getName());
return convertView;
}
and the onCreate method on the Activity
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search);
_listView = (ListView) findViewById(R.id.listview_items);
_listItems = new ArrayList<ItemsList>();
_listItems.add(new ItemsList ("cosa1", "cosa1", "cosa1", "cosa1"));
_listItems.add(new ItemsList ("cosa2", "cosa2", "cosa2", "cosa2"));
_listItems.add(new ItemsList ("cosa3", "cosa3", "cosa3", "cosa3"));
_adapter = new ItemsListAdapter(this, _listItems);
_listView.setAdapter(_adapter);
}
The ItemsList is just an Object with 4 strings with all the getters implemented.
When I debug in the getView method of the Adapter, the view (convertView) is created and it has the right information. It is just that is not showing those in the screen. What am I doing wrong?
Thanks...

Your second LinearLayout has a height of match_parent. Try wrap_content instead.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">

A grid layout of icon/text buttons

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?

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>

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.