How do I load two fragments vertically in the same layout?

Question

I am making an app for my university's SafeWalk program and I am trying to make an activity that will display a map fragment with a button bar below it with emergency call buttons. The problem I am running in to is that when I load the following layout file, only the map fragment is displayed, and not the buttons along the bottom.

Note: I am also using a navigation drawer in this layout so I have included that code in case it is conflicting.

I have tried changing the layout_width and layout_height values of the two parent FrameLayouts and I only can obtain one of two results, a full page of map, or a full page of my buttons (stretched to the top). I can attach the layout for the CallButtonFragment if necessary, but it is a horizontal linear layout with the button bar style containing two buttons.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:orientation="vertical" >

    <!-- The main content view -->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >

        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.MapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/content_frame" >

        <fragment
            android:id="@+id/titles"
            android:name="edu.purdue.SafeWalk.CallButtonFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
</RelativeLayout>
<!-- The navigation drawer -->

<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#111"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp" />

Following the suggestion of Android-er-naut below, I have this result: (It is an improvement, but the buttons need to be a bit larger and fit the width of the screen.)

Answer 1

How about this -

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- The main content view -->

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.MapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <fragment
        android:id="@+id/titles"
        android:name="edu.purdue.SafeWalk.CallButtonFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

</LinearLayout>