android - Can't click the buttons behind the DrawerLayout

Question

here is my xml:

<RelativeLayout 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"
tools:context=".Main"
android:background="@android:color/black" >

  <RelativeLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageButton
        android:id="@+id/calendar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/about"
        android:layout_centerHorizontal="true"
        android:background="@drawable/calendar" />

    <ImageButton
        android:id="@+id/okan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/calendar"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/calendar"
        android:background="@drawable/okanliyiz"/>

    <ImageButton
        android:id="@+id/about"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="140dp"
        android:layout_toLeftOf="@+id/calendar"
        android:background="@drawable/info" />

</RelativeLayout>

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false" >

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="false" />

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


</RelativeLayout>

I wrote the programmatic part of it and the Drawer works just fine, it's just that I cannot click the ImageButtons behind it. If I put the buttons in front I am able to click them but well, then the drawer is left behind and that's a terrible sight. What is the work-around for this? How can I both click the buttons behind the Drawer and see the Drawer in the front?

Thanks in advance.

Answer 1

According to the Navigation Drawer guide the DrawerLayout should be the root of your layout. It should have only 2 children - one that contains your "main content" - buttons, text fields, etc. And the other one should be the content of the drawer itself. Something like this:

<android.support.v4.widget.DrawerLayout>

    <RelativeLayout>
        <Button/>
        <EditText/>
    </RelativeLayout>

    <ListView android:id="@+id/drawer_list" />

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

In addition: The order of the 2 children is important due to the Z-order of the DrawerLayout (which is a ViewGroup). The list view should be declared after your main content so that it's ordered(and displayed) in front of it.