Layout problems, cannot interact with map

Question

I need some help with a layout. I have a map, a drawer, a button for the drawer and a cardview to hold the autocomplete search box. Everything looks fine except i cannot interact with the map. Pinch zoom, swipe to move and My Location button are not working. I think it's because the layout is wrong and i'm not actually interacting with the map but with something else. Posting my layout below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
map:uiZoomControls="true"
map:uiZoomGestures="true"
map:mapType="normal"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MapsActivity">

<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity">

    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/LeftDrawer"
            android:layout_width="200dp"
            android:layout_marginTop="60dp"
            android:layout_height="500dp"
            android:layout_gravity="start"
            android:background="@drawable/layout_bg" >

        <TextView
            android:id="@+id/TitleTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:textColor="@android:color/darker_gray"
            android:text="Test Title" />

        <ListView
            android:id="@+id/navList"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_marginTop="30dp"
            android:layout_marginBottom="30dp"
            android:layout_gravity="left|start"
            android:background="@drawable/layout_bg"/>

        <TextView
            android:id="@+id/TitleTextView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="240dp"
            android:textColor="@android:color/darker_gray"
            android:text="Test Title 2" />

            <Button
                android:id="@+id/test_button1"
                android:layout_width="30dp"
                android:layout_marginTop="270dp"
                android:layout_marginLeft="20dp"
                android:layout_height="30dp"
                android:layout_gravity="left|start"
                android:background="@drawable/settings"/>

            <Button
                android:id="@+id/test_button2"
                android:layout_width="30dp"
                android:layout_marginTop="270dp"
                android:layout_marginLeft="60dp"
                android:layout_height="30dp"
                android:layout_gravity="left|start"
                android:background="@drawable/settings"/>

        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="top"
        android:layout_marginTop="17dp"
        android:layout_marginLeft="50dp"
        android:layout_width="260dp"
        android:layout_height="30dp"
        card_view:cardCornerRadius="4dp">

        <fragment
            android:id="@+id/place_autocomplete_fragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment" />
    </android.support.v7.widget.CardView>

    <Button
        android:id="@+id/drawer_button"
        android:layout_width="30dp"
        android:layout_marginTop="17dp"
        android:layout_marginLeft="5dp"
        android:layout_height="30dp"
        android:layout_gravity="left|start"
        android:onClick="OpenCloseDrawer"
        android:background="@drawable/settings"/>

</fragment>
</LinearLayout>

Edit: Posting a screenshot of what the app looks like. Top left button is the open/close drawer button. As seen in the screen shot, that button (@+id/drawer_button) becomes inaccessable. The drawer closes when touching outside, but i have code in that button that then never fires as the button is not accessable. So i would like to always have access to the button, as well as probably some way of detecting the drawer closing, so i can use the same code in that event as i do in my button in case the user just swipes/touches outside to close the drawer.

Here are my layouts as the are now.

activity_maps.xml

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include android:id="@+id/map" layout="@layout/fragment" />

<RelativeLayout
    android:id="@+id/whatYouWantInLeftDrawer"
    android:layout_width="200dp"
    android:layout_marginTop="60dp"
    android:layout_height="500dp"
    android:layout_gravity="start"
    android:background="@drawable/layout_bg" >

    <TextView
        android:id="@+id/TitleTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:textColor="@android:color/darker_gray"
        android:text="Title1" />

    <ListView
        android:id="@+id/navList"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:layout_gravity="left|start"
        android:background="@drawable/layout_bg"/>

    <TextView
        android:id="@+id/TitleTextView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="240dp"
        android:textColor="@android:color/darker_gray"
        android:text="Ttitle2" />

    <Button
        android:id="@+id/test_button1"
        android:layout_width="30dp"
        android:layout_marginTop="270dp"
        android:layout_marginLeft="20dp"
        android:layout_height="30dp"
        android:layout_gravity="left|start"
        android:background="@drawable/settings"/>

    <Button
        android:id="@+id/test_button2"
        android:layout_width="30dp"
        android:layout_marginTop="270dp"
        android:layout_marginLeft="60dp"
        android:layout_height="30dp"
        android:layout_gravity="left|start"
        android:background="@drawable/settings"/>

</RelativeLayout>
</android.support.v4.widget.DrawerLayout>

fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
map:uiZoomControls="true"
map:uiZoomGestures="true"
map:mapType="normal"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MapsActivity">

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <Button
        android:id="@+id/drawer_button"
        android:layout_width="30dp"
        android:layout_marginTop="17dp"
        android:layout_marginLeft="5dp"
        android:layout_height="30dp"
        android:layout_gravity="left|start"
        android:onClick="OpenCloseDrawer"
        android:background="@drawable/settings"/>

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MapsActivity">

        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card_view"
            android:layout_gravity="top"
            android:layout_marginTop="17dp"
            android:layout_marginLeft="50dp"
            android:layout_width="240dp"
            android:layout_height="30dp"
            card_view:cardCornerRadius="4dp">

            <fragment
                android:id="@+id/place_autocomplete_fragment"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment" />
        </android.support.v7.widget.CardView>
    </fragment>
</FrameLayout>
</LinearLayout>

Answer 1

what you need to understand is that your will have only two child like this

<android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        < first View, here you will have your google map/>

        < second View, here you will have your ListView/>

</android.support.v4.widget.DrawerLayout>

now the problem is that you don't just have a plain google map to show as First View, what you can do is create a separate fragment which will replace your first view,

There are many ways to do this depending on what you want to achieve with it, it will work fine as long as you keep this pattern for DrawerLayout

well to make it simple create fragment which will have google map and your cardview

fragment.xml

<LinearLayout>

    <FrameLayout>
       <GoogleMapFragment
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>

       <CardView
           android:layout_width="280dp"
            android:layout_height="?attr/actionBarSize"/>

    </FrameLayout>

</LinearLayout>

now make some changes to your Navigation drawer layout like this

<android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <first View, include fragment & class representing that stuff/>

        < second View, here you will have your ListView/>

</android.support.v4.widget.DrawerLayout>

this is just an example that you make implement your own layout:

Update

<FrameLayout>
    <android.support.v4.widget.DrawerLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <first View, include fragment & class representing that stuff/>

            < second View, here you will have your ListView
              margin="leave enough margin to top as you will have buttons, otherwise button will overlap listview"
              />

    </android.support.v4.widget.DrawerLayout>

    <LinearLayout>

        <put your button Views here, so these will appear all the time/>
    </LinearLayout>

</FrameLayout>