[android] How to center buttons on screen horizontally and vertically plus equidistant apart?

Question

I've been racking my brain (android newbie here, so not hard to do) for awhile trying to figure out how to accomplish this: Desired Layout using a RelativeLayout or something other than AbsoluteLayout which is what this was created with. I'm coming from a Windows programming background where the device adjusts the 'absolute' positioning for you and GUI layout was a non-issue.

The first layout works great in the emulator, but doesn't format for my Nexus One or any other screen that differs from the emulator size. I expected this because it's absolutely positioned, but haven't found a solution that will format correctly for different screen sizes. My goal is to have the layout work for different screen sizes and in portrait / landscape.

Here's the Code that I'm currently using: [main.xml]

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
  <Button
    android:id="@+id/Button01"
    android:layout_width="188px"
    android:layout_height="100px"
    android:text="A"
    android:layout_y="50px" android:layout_x="65px" android:textSize="48sp"/>

<Button
    android:id="@+id/Button02"
    android:layout_width="188px"
    android:layout_height="100px"
    android:text="B"
    android:layout_y="175px" android:layout_x="65px" android:textSize="48sp"/>

<Button
    android:id="@+id/Button03"
    android:layout_width="188px"
    android:layout_height="100px"
    android:text="C"
    android:layout_y="300px" android:layout_x="65px" android:textSize="48sp"/>
</AbsoluteLayout>

Using tidbits from other questions here, I came up with this, it’s closer, but not there yet.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
android:gravity="center"
android:id="@+id/widget49"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<Button
    android:id="@+id/Button01"
    android:layout_width="0dip"
    android:layout_weight="1"
    android:text="A"
    android:textSize="48sp"/>

<Button
    android:id="@+id/Button02"
    android:layout_width="0dip"        
    android:layout_weight="1"
    android:text="B"
    android:textSize="48sp"/>

<Button
    android:id="@+id/Button03"
    android:layout_width="0dip"      
    android:layout_weight="1"
    android:text="C"
    android:textSize="48sp"/>
</TableLayout>

Here’s a picture of the TableLayout:

Another Attempt

Any help / guidance would be greatly appreciated.

Answer 1

Use a RelativeLayout. Button B has android:layout_centerInParent="true". Button A has android:layout_centerHorizontal="true", android:layout_above="@id/Button02", and some android:layout_marginBottom to establish whatever whitespace gap you want. Button C has android:layout_centerHorizontal="true", android:layout_below="@id/Button02", and some android:layout_marginTop to establish whatever whitespace gap you want.

Do not use AbsoluteLayout, period.

Answer 2

Using the recommendations from both of you worked perfectly! Thank you so much for your help and now I can study this and apply what I learned.

For those interested, here's the final main.xml code in RelativeLayout format that matched what I was trying to do with the AbsoluteLayout..

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

  <Button
    android:id="@+id/Button02"
    android:layout_width="188dip"
    android:layout_height="100dip"
    android:text="B"
    android:layout_centerInParent="true"
    android:textSize="48sp" android:textStyle="bold" />

  <Button
    android:id="@+id/Button01"
    android:layout_width="188dip"
    android:layout_height="100dip"
    android:text="A"
    android:layout_centerHorizontal="true"
    android:layout_above="@id/Button02"
    android:layout_marginBottom="30dip"
    android:textSize="48sp" android:textStyle="bold" />

  <Button
    android:id="@+id/Button03"
    android:layout_width="188dip"
    android:layout_height="100dip"
    android:text="C"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/Button02"
    android:layout_marginTop="30dip"
    android:textSize="48sp" android:textStyle="bold" />

</RelativeLayout>

Also, on an interesting note that may help someone in the future. When I modified the first code I posted with these recommendations I received this error when trying to compile: "\res\layout\main.xml:9: error: Error: No resource found that matches the given name (at 'layout_above' with value '@id/Button02').

With a little Googling on what could be the cause, I discovered that since the reference to Button02 (via the Button01 code) occurred before Button02 was actually created, this generated the error. So note in the final code Button02 is declared FIRST. Hope this helps someone.