Improper alignment of buttons in RelativeLayout

Question

I used several RelativeLayouts within one LinearLayout. And the RelativeLayout used for buttons caused improper appearance as seen below:

enter image description here

This is my .xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/wood"
    android:orientation="vertical"
    android:padding="25dp" >

<RelativeLayout
       android:id="@+id/relative"
       android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/button1"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/button2"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

</RelativeLayout>

 <RelativeLayout
       android:id="@+id/relative2"
       android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <Button
        android:id="@+id/btn5"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    <Button
        android:id="@+id/btn8"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    <Button
        android:id="@+id/btn7"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn8"
        android:text="Button" />

    <Button
        android:id="@+id/btn6"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn7"
        android:text="Button" />

</RelativeLayout>

</LinearLayout>

How can I align my buttons properly and nicely without using Grid View since it requires additional library and API 14 and above? Thank you.

Hi, Umitk! Sorry for disturbing! Do you mind reopening the [4-years-old question](https://stackoverflow.com/q/20869067/3290339). There are few alternative answers the question is lacking of. Those answers are worth to be relieved and might be especially helpful for AOSP starters. Thanks in advance! — Onik, Sep 14 '18 at 20:55

score 2 · Accepted Answer · answered May 20 '14 at 02:45

Instead of RelativeLayouts use LinearLayouts horizontally oriented:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/wood"
    android:orientation="vertical"
    android:padding="25dp" >

<LinearLayout
   android:id="@+id/relative"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">

<Button
    android:id="@+id/button1"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

<Button
    android:id="@+id/button2"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

<Button
    android:id="@+id/button3"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

<Button
    android:id="@+id/button4"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

</LinearLayout>

<LinearLayout
   android:id="@+id/relative2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">

<Button
    android:id="@+id/btn5"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

<Button
    android:id="@+id/btn8"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

<Button
    android:id="@+id/btn7"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

<Button
    android:id="@+id/btn6"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

</LinearLayout>
</LinearLayout>

…and it's a bad idea. Probably irrelevant, but you're using 1 level of nesting that is not needed. — Martin Marconcini, Feb 17 '17 at 21:18

Improper alignment of buttons in RelativeLayout

1 Answers1