Which layout to use for a 2x2 image-based menu?

Question

I am trying to create a screen (in portrait mode) that shows 4 images (same size, intended to scale down to fit screen), taking up the entire screen, breaking up the screen into quadrants (a tall, 2x2 grid). This will act as a main menu type of activity and each image should be clickable, in order to take the user to a different activity.

I have tried using a GridView inside a LinerLayout (using a lot from Google's GridView tutorial) but cannot get the images to all scale properly to fill the entire screen. I get extra margins around the images and/or scrolling of the entire screen.

I have also tried using a TableLayout, placing 2 images in each of the 2 rows. Visually, that worked perfectly. Unfortunately when using that, I cannot seem to reference the ImageView items in the TableLayout in my activity code (findViewById always returns null).

I feel like a TableLayout is really not the "right thing to do" but I would like to hear what others have to say. Either way, what should be done to accomplish my desired functionality?

Thanks.

Edit 1.1: The relative layout works much better for getting things lined up. Now I'm just left with the issue where findViewById always returns null. Here is my code so far:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="@color/homescreen_bgcolor"
        >
    <ImageView id="@+id/one"
               android:layout_alignParentTop="true"
               android:layout_alignParentLeft="true"
               android:src="@drawable/item1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <ImageView id="@+id/two"
               android:layout_alignParentTop="true"
               android:layout_alignParentRight="true"
               android:src="@drawable/item2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <ImageView id="@+id/three"
               android:layout_alignParentBottom="true"
               android:layout_alignParentLeft="true"
               android:src="@drawable/item3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    <ImageView id="@+id/four"
               android:layout_alignParentBottom="true"
               android:layout_alignParentRight="true"
               android:src="@drawable/item4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"/>
    </RelativeLayout>

public class HomeScreenActivity2 extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.homescreen2);

    ImageView imageView = (ImageView) findViewById(R.id.one);


    imageView.setClickable(true);
    imageView.setOnClickListener(new View.OnClickListener() {
      public void onClick(View view) {
        Log.i("Test", "test");
      }
    });
  }
}

Answer 1

Here is a sample layout showing how you can achieve a 2 X 2 grid that covers the entire screen using just a RelativeLayout.

<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" >

<View
    android:id="@+id/centerVerticalShim"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_centerVertical="true"
    android:visibility="invisible" />

<View
    android:id="@+id/centerHorizontalShim"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:visibility="invisible" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/centerVerticalShim"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/centerHorizontalShim"
    android:background="#42A5F5"
    android:gravity="center"
    android:text="@string/one"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/centerVerticalShim"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/centerHorizontalShim"
    android:background="#EF5350"
    android:gravity="center"
    android:text="@string/two"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/centerVerticalShim"
    android:layout_toLeftOf="@+id/centerHorizontalShim"
    android:background="#66BB6A"
    android:gravity="center"
    android:text="@string/three"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/centerVerticalShim"
    android:layout_toRightOf="@+id/centerHorizontalShim"
    android:background="#5C6BC0"
    android:gravity="center"
    android:text="@string/four"
    android:textColor="#FFFFFF" >
</TextView></RelativeLayout>

The above layout results in this:

Answer 2

I think a TableLayout could work for you, but I'd recommend trying out RelativeLayout as well. You can basically pin your images to the four quadrants by using combinations of

android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`

on your images.

I'm doing something similar in my app where I have multiple buttons on a homepage that can launch corresponding activities. RelativeLayout works fine, and it avoids nested Layout objects, which can hamper performance during render and layout procedures (if it gets out of hand).