Question

I’ve got an example layout that I’m trying to create in android using xml. I am able to create similar layouts but I feel as if my approach might be wrong.

What I have been doing in these cases is nesting relative layouts to act as a “row”. The below image demonstrates what I would do.

How would you guys create a layout similar to this? I feel as if nesting relative layouts is overkill but I’m not sure how I can keep everything centred if I don’t.

When I didn’t nest the layouts I used

android:layout_toRightOf="..."
android:layout_below="@+id/t1"

on t5, t6 and t7 (from the image). The result looked incorrect. t1, t2, t3 and t4 wasn’t centred horizontally any more.

Is there a way to like tell the relative layout that everything after this point should appear on a new row? Or is relative layouts the wrong way to go for things like this? I don’t think a table layout would work correctly since each row doesn’t necessarily need to have the same amount of views and they need to be centred.

Any suggestions appreciated!

Answer 1

You could nest two horizontal LinearLayouts within a vertical LinearLayout. Maybe not so efficient as a RelativeLayout, but easier to get the centering behavior you want.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello" />
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C" />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="D" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="E" />
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="F" />
    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="G" />
</LinearLayout>
</LinearLayout>

Here’s another version of the same layout using RelativeLayout. I started with the nested LinearLayouts above, selected “Refactor > Android > Change Layout…“, selected RelativeLayout, and then tweaked the resulting layout until I got things centered.

I used a couple of tricks to get it right. I started by centering the middle button on the parent, then built out to the left and right. On the top row, where there is an even number of buttons and space in the center, I used a centered, 0-width TextView to anchor the buttons. That’s a bit hacky, I guess, but it gets the job done. 🙂

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
    android:id="@+id/TextView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="@string/hello" />
<TextView
    android:id="@+id/Dummy"
    android:layout_width="0dp"
    android:layout_height="48dp"
    android:layout_centerInParent="true"
    android:layout_below="@+id/TextView1" />
<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/Dummy"
    android:layout_toLeftOf="@+id/Dummy"
    android:text="B" />
<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button2"
    android:layout_alignTop="@+id/Dummy"
    android:layout_toLeftOf="@+id/button2"
    android:text="A" />
<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button2"
    android:layout_alignTop="@+id/Dummy"
    android:layout_toRightOf="@+id/Dummy"
    android:text="C" />
<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button2"
    android:layout_alignTop="@+id/Dummy"
    android:layout_toRightOf="@+id/button3"
    android:text="D" />
<Button
    android:id="@+id/button6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_below="@+id/Dummy"
    android:text="F" />
<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/button6"
    android:layout_alignBaseline="@+id/button6"
    android:layout_toLeftOf="@+id/button6"
    android:text="E" />
<Button
    android:id="@+id/button7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button6"
    android:layout_alignTop="@+id/button6"
    android:layout_toRightOf="@+id/button6"
    android:text="G" />
</RelativeLayout>