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).

add a `View` with `android:layout_height="0dip"` and `android:layout_centerVertical="true`, then align one of them above it and one below it using `android:layout_above=""` and `android:layout_above=""`. — hypd09, Jan 17 '14 at 09:54
@hypd09 How would I define them to fill the remaining space? Also, it feels a little hackish. — Bart Friederichs, Jan 17 '14 at 09:58
just set `android:layout_height="match_parent"`. `RelativeLayout` is used by setting relations, nothing hacky about that. — hypd09, Jan 17 '14 at 10:02

score 7 · Accepted Answer · answered Jan 17 '14 at 09:59

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>

score 0 · Answer 2 · answered Jan 17 '14 at 09:54

0

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.

answered Jan 17 '14 at 09:54

npace

4,218
1
25
35

Would I be able to have the two smaller fragments at 1/3 of the width and the large one at 2/3? – Bart Friederichs Jan 17 '14 at 09:57
Oh, I didn't know you wanted such proportions... In this case, @Andros' solution is correct. – npace Jan 17 '14 at 10:59

score 0 · Answer 3 · edited May 23 '17 at 12:16

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>

Using a RelativeLayout to vertically split two fragments evenly

3 Answers3

Linked