I am trying to create an android layout that uses about 1/3 of the screen for a App Title. And then for the other 2/3 it has 6 evenly spaced out buttons in rows of 2, in 3 columns. In each button will contain text and an image that could potentially vary in size. I have been reading a lot and have yet to come up with a perfect way to to this. I have an example that mostly works except a few of my buttons are different sizes and so this does not work (buttons are different sizes). Plus i have no idea if it will work with phones of different sizes. Anyway, if anyone could take a look at this xml layout and maybe suggest a better way. Thanks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget30"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/green6"
android:orientation="vertical"
android:padding="5dp" >
<RelativeLayout
android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/border"
android:padding="5dp" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/widget31"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="Title Will Go Here"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@color/green6"
android:textSize="35sp"
android:textStyle="bold"
android:shadowColor="@color/black"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="1"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp" >
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="5dp" >
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/custom_button"
android:drawableTop="@drawable/search"
android:text="Search by Food"
android:textColor="@color/green6"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingLeft="5dp"
android:paddingRight="10dp" >
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/custom_button"
android:drawableTop="@drawable/search2"
android:text="Search by Substitute"
android:textColor="@color/green6"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingBottom="4dp" >
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="5dp" >
<Button
android:id="@+id/button3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/custom_button"
android:drawableTop="@drawable/browse"
android:text="Browse by Category"
android:textColor="@color/green6"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingLeft="5dp"
android:paddingRight="10dp" >
<Button
android:id="@+id/button4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/custom_button"
android:drawableTop="@drawable/award"
android:text="Most Popular"
android:textColor="@color/green6"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="5dp" >
<Button
android:id="@+id/button5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/custom_button"
android:drawableTop="@drawable/share"
android:text="Sync with Online Database"
android:textColor="@color/green6"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingLeft="5dp"
android:paddingRight="10dp" >
<Button
android:id="@+id/button6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/custom_button"
android:drawableTop="@drawable/plus"
android:text="Submit New Food Substitute"
android:textColor="@color/green6"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I would use a top-level LinearLayout and specify layout_weight of 1 for the app title. Then I’d use a DashboardLayout with a layout_weight of 2 for the 2×3 grid of ImageButtons.
DashboardLayout was used in the Google I/O 2011 app, aka IOSched, available at http://code.google.com/p/iosched/ . I’d recommend downloading and browsing that code for some examples of how that layout works. Note that you’ll have to copy that one DashboardLayout.java file to your project.
You could make this even simpler if you’re using an ActionBar – just specify the title for your Activity in the AndroidManifest.xml and then set the DashboardLayout at the root of your layout. The app title won’t be anywhere near 1/3rd, but it will probably fit in better with Honeycomb/ICS apps.