Should I use LinearLayout or RelativeLayout to have 4 objects fill a screen?

Question

I am learning about the difference between LinearLayout and RelativeLayout and am confused about the best way to solve my specific problem. I want to have 4 buttons fill a screen, each with some different action. After having trouble with RelativeLayout, I was recommended to switch to LinearLayout by this SO thread. Using a nested LinearLayout and the android:weight value, I got a solution that does work properly. However, now I get the warning: "Nested weights are bad for performance." I propmtly looked that up on SO and found this article, telling me to switch back to RelativeLayout.

What's the right answer? Is there a good way to have objects fill an area like this in RelativeLayout?

This is my current code. Excuse the extra stuff, not sure what to leave in and what to just take out.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/motherStack"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<LinearLayout 
    android:id="@+id/rowOne"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:layout_weight="1">


    <Button
        android:id="@+id/redButton"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/red_button_text"
        android:textColor="@color/RED" />

    <Button
        android:id="@+id/blueButton"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/blue_button_text"
        android:textColor="@color/BLUE" /> 
</LinearLayout>

<LinearLayout 
    android:id="@+id/rowTwo"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:layout_weight="1">
    <Button
        android:id="@+id/greenButton"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/green_button_text"
        android:textColor="@color/GREEN" />

    <Button
        android:id="@+id/yellowButton"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/yellow_button_text"
        android:textColor="@color/YELLOW" /> 
</LinearLayout>

I would post an image but I just joined and have no reputation. :(

how do you want the buttons to fill the screen? Vertically/Horizontally? One after the other or in a grid like layout? — Tanuj Wadhwa, Mar 26 '14 at 04:13
I can't post an image because I don't have enough reputation. — LivefromHollywood, Mar 26 '14 at 15:09

MetaldroiD · Answer 1 · 2014-03-26T11:25:14.697

Keep root element android:orientation as vertical and then horizontal accordingly.

Try this :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/motherStack"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:orientation="vertical"

tools:context=".MainActivity" >

<LinearLayout 
android:id="@+id/rowOne"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1">


<Button
    android:id="@+id/redButton"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"/>

<Button
    android:id="@+id/blueButton"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"/> 
    </LinearLayout>
    <LinearLayout 
android:id="@+id/rowTwo"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<Button
    android:id="@+id/Button3"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"/> 
<Button
    android:id="@+id/Button4"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"/> 
</LinearLayout>
</LinearLayout>

Hope this helps.

I'm really not sure what you mean with this. Isn't that what I already have? — LivefromHollywood, Mar 27 '14 at 03:00
Well this solves your problem "have 4 buttons fill a screen" and also uses the `Linear Layout`. You can probably try this out. — MetaldroiD, Mar 27 '14 at 05:33

score 0 · Answer 2 · answered Mar 26 '14 at 04:14

0

For that you could use a TableLayout as a root element (remove all nested LinearLayouts).

This will provide the effect you're trying to mimic using those layouts with two elements each, each element having a weight of 1.

answered Mar 26 '14 at 04:14

davidcesarino

16,160
16
68
109

score 0 · Answer 3 · answered Mar 26 '14 at 04:23

It would be better if you use table layout instead of linear layout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TableRow
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button" />
</TableRow>

<TableRow
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button" />
</TableRow>

Should I use LinearLayout or RelativeLayout to have 4 objects fill a screen?

3 Answers3