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.

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

Any suggestion?

Answer 1

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> 

Answer 2

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>