Android: What is best layout to use when trying to get 2x2 image buttons, and more?

Question

I am trying to make my layout look like so. I have tried gridviews, table layouts, and more but cant get it to look right. I want something like this.

ImageButton ImageButton2

ImageButton3 ImageButton4

    ImageView1

ImageButton5 ImageButton6

ImageButton6 ImageButton7 ImageButton8 (these are smaller icons)

   ImageButton9 (small donate button)

I just cant seem to figure out how to get the layout to work with imagebuttons. What layout should I use? And could you post example code of the xml layout if possible?

Answer 1

you could do something like this, though there may be another way to do it:

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

  <LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageButton android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    <ImageButton android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
  </LinearLayout>

  <ImageView android:layout_width="wrap_content" android:src="@drawable/icon"
    android:layout_height="wrap_content" android:layout_gravity="center"/>

  <LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageButton  android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    <ImageButton  android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
  </LinearLayout>

  <LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageButton  android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    <ImageButton  android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    <ImageButton  android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
  </LinearLayout>

  <ImageView android:layout_gravity="center"  android:src="@drawable/icon" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

here is the result. I threw together an android project and just used the image that is defaulted for the icon.

Answer 2

Maybe this can help you out:

DroidDraw - User Interface (UI) designer/editor for programming with Android

You can use the graphical editor to make your layout, and generate the XML.