Working with relative layout in android XML

Question

I am trying to create a layout in XML something along of the lines of http://i.stack.imgur.com/aPoeU.png but I am little confused as to how to position the buttons in that format. I have created the buttons and tried different things like alignParentBottom, alignParentRight etc but I can't seem to get it the way I want it to be. Can someone please help me out?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:text="Button" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/button1"
    android:text="Button" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/button2"
    android:text="Button" />

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/button3"
    android:text="Button" />

Answer 1

We can manage it in all screen and in all resolution by weight_sum

Paste below code in your xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     android:background="#000"
    android:weightSum="1" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

     android:background="#bebebe"
        android:layout_weight="0.30"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="2dp"
        android:layout_weight="0.20"
        android:background="#bebebe"
        android:text="Button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="2dp"
        android:layout_weight="0.20"
        android:background="#bebebe"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="2dp"
        android:layout_weight="0.30"
        android:background="#bebebe"
        android:text="Button4" />

</LinearLayout>

Answer 2

Paste it in your XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2258A2"
android:gravity="center"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    android:orientation="vertical"
    android:weightSum="1" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.40"
        android:background="#bebebe"
        android:text="Button1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="1dp"
        android:layout_weight="0.20"
        android:orientation="horizontal"
        android:weightSum="1" >

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="1dp"
            android:layout_weight="0.50"
            android:background="#bebebe"
            android:text="Button2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.50"
            android:background="#bebebe"
            android:text="Button3" />
    </LinearLayout>

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="1dp"
        android:layout_weight="0.40"
        android:background="#bebebe"
        android:text="Button4" />
</LinearLayout>

Answer 3

Well, in RelativeLayout, as the name suggests, the elements are positioned relative to something else, like the parent view, or another widget in the layout. So you can align the widget in many many ways, like apending it to the right of a view, to the left, above, below, and so on.

Please refer to this link and this other link for more information.

So, if you want to make your buttons look exactly like your example image, try this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<Button
    android:id="@+id/button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:text="Button 1" />

<Button
    android:id="@+id/button2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/button1"
    android:text="Button 2" />

<Button
    android:id="@+id/button3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/button2"
    android:text="Button 3" />

<Button
    android:id="@+id/button4"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/button3"
    android:text="Button 4" />

You can simply make the button width to fill_parent instead of align left and right. And the height, you can define the measures you'd like to use.

Btw, I used alignParentLeft and alignParentStart because I don't know which API level you're using, so I've used both parameters, old and new. But the effect is the same, your buttons will always start to the left of the parent view.

EDIT: As the user hasternet suggested, you could also use LinearLayout and get similar results.

EDIT 2: And if you like to change the look of your buttons, try to change the style (Take a look here to know what I mean).

Answer 4

Your code seems correct, but if you want to replicate the size of the buttons then you can't set the height as wrap_content . This will make it as tall as the text, change that to some given value:

android:layout_height="50dp"

Answer 5

Since you need to set the height of the buttons differently and also it depends on different screen size, you cannot achieve this with Relative Layout.

So go for LinearLayout and weightsum attribute. This way screen big or small, you can achieve your expected UI. Mentioned code below modified.

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:Orientation="vertical"
    android:weightsum="8" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button" 
        android:layout_weight="1"
/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1"
        android:text="Button"
        android:layout_weight="3"
 />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button2"
        android:text="Button" 
        android:layout_weight="3"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button3"
        android:text="Button" 
        android:layout_weight="1"/>
</LinearLayout>