Can't click the buttons behind the DrawerLayou

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.

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.