Fragments disappears after adding ButtonBar to the layout

Question

I am trying to create a master detail UI with three fragments and two buttons button bar. For some reason, the fragments are not showing up in the UI after adding the button bar. I suspect it has something to do with the orientation of the layout but I'll leave it up to the experts here.

Before adding the button bar

After adding the button bar

Here is the XML layout of the UI

<?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:baselineAligned="false"
android:orientation="horizontal" >

<fragment
    android:id="@+id/mainBodyFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    class="com.dreamcode.healttracker.MainBodyArea" />

<fragment
    android:id="@+id/subBodyFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    class="com.dreamcode.healttracker.SubBodyArea" />

<fragment
    android:id="@+id/symptomFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3"
    class="com.dreamcode.healttracker.Symptom" />

<LinearLayout
    android:id="@+id/footer"
    style="@android:style/ButtonBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="#F0F0F0"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/btn_Generate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/borderless_button"
        android:text="@string/generate" />

    <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="#909090" />

    <Button
        android:id="@+id/btn_ViewList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/borderless_button"
        android:text="@string/viewlist" />
</LinearLayout>

</LinearLayout>

Answer 1

This should do the trick:

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

    <LinearLayout
        android:id="@+id/footer"
        style="@android:style/ButtonBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#F0F0F0"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_Generate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/borderless_button"
            android:text="@string/generate" />

        <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="#909090" />

        <Button
            android:id="@+id/btn_ViewList"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/borderless_button"
            android:text="@string/viewlist" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/footer"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <fragment
            android:id="@+id/mainBodyFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            class="com.dreamcode.healttracker.MainBodyArea" />

        <fragment
            android:id="@+id/subBodyFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            class="com.dreamcode.healttracker.SubBodyArea" />

        <fragment
            android:id="@+id/symptomFragment"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            class="com.dreamcode.healttracker.Symptom" />
    </LinearLayout>

</RelativeLayout>

Answer 2

your first LinearLayout has the orientation horizontal (so everything will be next to the others), than you add your button bar with the width="match_parent", so the button bar uses the hold vertical space. If you want to put the fragments below eachothers change the orientation of the first to vertical. If the fragments shall be next to each other and the button bar below use the following code: (the first LinearLayout is not closed in your code!)

<?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:baselineAligned="false"
    android:orientation="vertical" >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
<fragment
    android:id="@+id/mainBodyFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    class="com.dreamcode.healttracker.MainBodyArea" />

<fragment
    android:id="@+id/subBodyFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    class="com.dreamcode.healttracker.SubBodyArea" />

<fragment
    android:id="@+id/symptomFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3"
    class="com.dreamcode.healttracker.Symptom" />
</LinearLayout> <!-- added -->
<LinearLayout
    android:id="@+id/footer"
    style="@android:style/ButtonBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="#F0F0F0"
    android:orientation="horizontal" >

<Button
    android:id="@+id/btn_Generate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/borderless_button"
    android:text="@string/generate" />

<View
    android:layout_width="1dp"
    android:layout_height="fill_parent"
    android:background="#909090" />

<Button
    android:id="@+id/btn_ViewList"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/borderless_button"
    android:text="@string/viewlist" />
</LinearLayout>
</LinearLayout>