Android: 2 relative layout divided in half screen

Question

I tried many times to draw 2 Relative layout aligned horizontally and divided in half screen.

enter image description here

I design the image with paint to explain a bit better what i mean.

Any suggestion?

You can use a [Constrain Layout](https://stackoverflow.com/a/46296011/3681880) to do this type of thing now. — Suragch, Sep 19 '17 at 08:59

score 123 · Answer 1 · answered Mar 12 '14 at 19:59

Another way to accomplish the same task without needing to use a LinearLayout is to put a center-aligned "shim" in the middle of the parent layout, then align other elements to it. If you set the half-width element's width to match_parent, but align both their left and right sides, they'll end up shrinking themselves to fit.

<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"
    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="com.example.EqualWidthExample" >

    <!-- An invisible view aligned to the center of the parent. Allows other
    views to be arranged on either side -->
    <View 
        android:id="@+id/centerShim"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:visibility="invisible"
        android:layout_centerHorizontal="true"/>

    <!--Set width to match_parent sets maximum width. alignParentLeft aligns 
    the left edge of this view with the left edge of its parent. toLeftOf 
    sets the right edge of this view to align with the left edge of the 
    given view. The result of all three settings is that this view will 
    always take up exactly half of the width of its parent, however wide 
    that may be. -->
    <Button
        android:id="@+id/btLeft"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/centerShim"
        android:text="Left Button" />

    <!--Same deal, but on the right -->
    <Button
        android:id="@+id/btRight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/centerShim"
        android:layout_below="@+id/tvLeft"
        android:text="Right Button" />
</RelativeLayout>

It is better to set height `android:layout_height="0dp"` in `centerShim` view. — Mehul Joisar, Aug 20 '14 at 12:18
+5 this way is more efficient for view hierarchy than LinearLayout + layout_weight — Raymond Chenon, Sep 29 '14 at 11:34

score 63 · Accepted Answer · answered Nov 14 '13 at 17:08

63

You can put these 2 RelativeLayouts inside a LinearLayout with horizontal orientation, then use the weight for both RelativeLayouts. This will divide the LinearLayout in 2 equal parts.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:baselineAligned="false">
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
   </RelativeLayout>
   <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">
   </RelativeLayout>
</LinearLayout>

answered Nov 14 '13 at 17:08

2Dee

8,609
7
42
53

2

@V.Kalyuzhnyu by all means, do post your better version of it, I'm sure it will be upvoted faster than light... – 2Dee May 31 '16 at 12:08
1

))) your answer is correct but it is better to refuse invested layouts because they call many redraws for the occupied space – Vlad May 31 '16 at 14:25
This is a great answer. If you add `android:layout_gravity="center"` then when you set visibility in either one of the inner layouts to `GONE`, the remaining visible layout will be nicely centered horizontally. Wouldn't worry too much about the use of `layout_weight`, I'm sure there are far more other areas to worry about performance IMHO. – Luis Artola Aug 04 '16 at 20:17
I found @KevBry's idea (http://stackoverflow.com/a/22362494/1346778) much simpler and more efficient. Too bad it missed out being accepted answer – head in the codes May 02 '17 at 07:16

zaPlayer · Answer 3 · 2017-10-17T12:19:40.187

now you can do it easily using PercentRelativeLayout

<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context=".MainActivity">


<Button
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:text="Button"
    app:layout_widthPercent="50%"/>

<Button
    android:id="@+id/button2"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/button"
    android:text="Button 2"
    app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>

don't forget to add the gradle dependency

dependencies {
     compile 'com.android.support:percent:25.3.1'
}

code in github

Update

PercentRelativeLayout is Deprecated since API level 26.0.0

score 1 · Answer 4 · answered May 06 '18 at 19:59

You could use an non-recommended structure with nested wieghts

<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="wrap_content"
    android:orientation="vertical"
    android:baselineAligned="false"
    android:weightSum="5">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:layout_gravity="center">
        <TextView
            android:id="@+id/TopTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Top Text View"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"/>

    </RelativeLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_weight="4">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin">
            <TextView
                android:id="@+id/LeftTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Left Text View"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="30dp"/>

        </RelativeLayout>
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin">
                <TextView
                    android:id="@+id/RightTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:text="Right Text View"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="30dp"/>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

score 0 · Answer 5 · answered Nov 14 '13 at 17:07

0

I see 4 relativelayouts in your drawing...?

If you mean the two in the middle put them into one LinearLayout (horizontal orientation), let all of them have a width of match_parent and give both relative layouts a weight of 1

answered Nov 14 '13 at 17:07

jpm

3,300
1
19
29

Android: 2 relative layout divided in half screen

5 Answers5

Linked