Question

I need to represent the following diagram:

Each X will be an image button. I was thinking of making three tables with one column each and have each cell height be half the height of the table. The problem is that the table needs to be able to stretch or shrink because I am worried about getting everything on the screen and the tables are the only part that can change size and have the entire thing still look ok. The problem I am having is that the rows are only as big as the image buttons. While all the image buttons are the same size, the left and right table in particular, need to have some padding around the image buttons to make it alright. I would add margins to the buttons but that defeats the reshaping problem I am having…I think. Any suggestions?

Answer 1

There may be a better way, but below is one way to accomplish this. Do the buttons need to stretch to fit the cells? Or will they just be centered within? Assuming the latter, here’s a suggestion (I am not confident on this, but I believe it should work):

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="horizontal"
 >
 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:layout_weight="1"
  android:gravity="center"
  >
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable11"
   />
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable12"
   />
 </LinearLayout>

 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:layout_weight="1"
  android:gravity="center"
  >
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable21"
   />
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable22"
   />
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable23"
   />
 </LinearLayout>

 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:layout_weight="1"
  android:gravity="center"
  >
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable11"
   />
  <ImageButton
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"                           
   android:layout_weight="1"
   android:src="@drawable/drawable12"
   />
 </LinearLayout>
</LinearLayout>

I unfortunately don’t have Eclipse right now to test this, but this should be close to what you need. There’s probably a cleaner way using a RelativeLayout (using fewer nested views) but this is off the top of my head, gives you something to start with.