Position four relative layouts equally on screen

Question

I'm trying to position four RelativeLayouts on the screen equally as shown on the image below. I just can't seem to get anywhere. Each one will contain a text label and a button centred in their quadrant. I've tried placing the four inside RelativeLayout with the alignComponent values set appropriately and alignParent values set to Left/Right and Top/Bottom. I've also tried with just the alignComponent set and just alignParent set but to no avail.

It should look like this,

enter image description here

you can use `LinearLayout` and its weight property... for that... — Pragnesh Ghoda シ, Oct 16 '14 at 05:35
use first layout on default place (left top ), second will be in right of first, third will be down of first and fourth will be down of first and right of third. — Shvet, Oct 16 '14 at 05:40

score 6 · Accepted Answer · edited May 23 '17 at 12:13

Since you want to use RelativeLayout, the easiest way is to use vertical and horizontal struts (which are invisible) and use those as anchors for your four RelativeLayouts children. This approach is definitely more efficient than nested LinearLayouts with weights. You should probably read this before nesting LinearLayouts with weights.

A snippet from the above link:

Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.

So for using RelativeLayouts with struts, your XML could be like 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="${relativePackage}.${activityClass}" >

    <View
        android:id="@+id/horizontalStrut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true" />

    <View
        android:id="@+id/verticalStrut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/horizontalStrut"
        android:layout_toLeftOf="@id/verticalStrut"
        android:background="@color/red" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/horizontalStrut"
        android:layout_toRightOf="@id/verticalStrut"
        android:background="@color/black" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/horizontalStrut"
        android:layout_toLeftOf="@id/verticalStrut"
        android:background="@color/blue" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/horizontalStrut"
        android:layout_toRightOf="@id/verticalStrut"
        android:background="@color/green" >
    </RelativeLayout>

</RelativeLayout>

Pragnesh Ghoda シ · Answer 2 · 2014-10-16T05:57:02.423

Try This Layout.. It Could Help You...

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/black" >

            <!-- put your stuff here -->
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/red" >

            <!-- put your stuff here -->
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/white" >

            <!-- put your stuff here -->

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/green" >

            <!-- put your stuff here -->

        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

Sample Output..

enter image description here

@Manish Thnk you Buddy.. :) – Pragnesh Ghoda シ Oct 17 '14 at 05:24 — Pragnesh Ghoda シ, Oct 17 '14 at 05:24

score 1 · Answer 3 · edited Oct 16 '14 at 06:39

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0B6121"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" 
        android:background="#DF013A">
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" 
        android:background="#0080FF">
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#A901DB"
        android:orientation="vertical" >
    </LinearLayout>
</LinearLayout>

score 1 · Answer 4 · answered Oct 16 '14 at 05:43

enter image description here You can easily done it using LinearLayout or tableLayout, SAmple shows using LinearLayout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#FF0000" >
</LinearLayout>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#331323" >
</LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#662200" >
</LinearLayout>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#FF8800" >
</LinearLayout>
</LinearLayout>

score 1 · Answer 5 · answered Oct 16 '14 at 06:00

You can use LinearLayout then set android:weightSum for your parent layout then you can set now your layout_weight for your quadrants.Like this..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum = "2"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:weightSum="2"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/black" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/red" >
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:weightSum="2"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/white" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/green" >
    </RelativeLayout>
</LinearLayout>

Position four relative layouts equally on screen

5 Answers5