Using a RelativeLayout to vertically split two fragments evenly

Question

I am trying to create a simple layout with three fragments. On the left, I want two fragments over eachother, each taking 50% of the height of the screen. On the right, I want one large container fragment, like this:

+-----+-----------------+
| f1  | detail_container|
|     |                 |
+-----+                 |
| f2  |                 |
|     |                 |
+-----+-----------------+

I got it working with two LinearLayouts, using layout_height="0dp" and layout_weight="1", but I got the message it is bad for performance, so I set out to use a RelativeLayout. What I have now is this:

<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"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:baselineAligned="false"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle"
    tools:context=".MainActivity" >
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1" >

        <fragment
            android:id="@+id/fragment1"
            android:name="com.example.Fragment1"
            android:layout_width="wrap_content"
            android:layout_height=""
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            tools:layout="@android:layout/list_content" />

        <fragment
            android:id="@+id/fragment2"
            android:name="com.example.Fragment2"
            android:layout_width="wrap_content"
            android:layout_height=""
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            tools:layout="@android:layout/list_content" />

    </RelativeLayout>

    <FrameLayout
        android:id="@+id/action_detail_container"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>

I don't know how to fill in the layout_height value of the two fragments. I tried all kinds of values, but they seem all to have to be absolute (which I don't want).

Answer 1

Here is my solution with a common workaround to avoid nested weight :

<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"
              android:layout_marginLeft="0dp"
              android:layout_marginRight="0dp"
              android:baselineAligned="false"
              android:divider="?android:attr/dividerHorizontal"
              android:orientation="horizontal"
              android:showDividers="middle"
              tools:context=".MainActivity" >
    <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="1" >

        <View android:id="@+id/dummyView"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:layout_centerInParent="true"/>
        <fragment
                android:id="@+id/fragment1"
                android:name="com.example.Fragment1"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignTop="@id/dummyView"
                tools:layout="@android:layout/list_content" />

        <fragment
                android:id="@+id/fragment2"
                android:name="com.example.Fragment2"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_alignBottom="@id/dummyView"
                tools:layout="@android:layout/list_content" />

    </RelativeLayout>

    <FrameLayout
            android:id="@+id/action_detail_container"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3" />

</LinearLayout>

Answer 2

Why not switch it around, i.e. use a RelativeLayout as your root view, and a vertical LinearLayout as a container for the fragments? Just use alignParentLeft on the container and toRightOf on the FrameLayout.

Answer 3

Using weights are usually just bad for performance when they are nested (See this for example). So in your case you could use them.
Otherwise, you can create an empty view in the middle to help you position the others:

<RelativeLayout
    ...
    >
    <View
    androi:id="@+id/separator"
    android:layout_centerVertical="true"
    android:layout_width="0"
    android:layout_height="0"
    >
    <fragment
    android:layout_above="@id/separator"
    ...
    >
    <fragment
    android:layout_below="@id/separator"
    ...
    >
</RelativeLayout>