Navigation Drawer under objects

Question

I have implemented in my application a navigation style drawer Material Design but as soon as I open it appears below all objects.

My code

layout.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <!-- Action-bar looking view -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/actionbar_dimen"
        android:background="@color/primary_green"
        android:id="@+id/frameLayout">

        <ImageView
            android:id="@+id/drawer_indicator"
            android:layout_width="@dimen/actionbar_dimen"
            android:layout_height="56dp"
            android:scaleType="centerInside"
            android:background="@drawable/drawer_selector"
            android:layout_gravity="start"
            />

        <TextView
            android:id="@+id/indicator_style"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:layout_gravity="end"
            android:text="@string/rounded"
            android:textStyle="bold"
            android:textColor="@color/primary_dark_green"
            android:gravity="center"
            android:background="@drawable/drawer_selector"
            />

    </FrameLayout>

    <!-- Content -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/actionbar_dimen"
        android:background="@color/primary_green"
        android:layout_below="@+id/frameLayout"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/frameLayout2"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_below="@+id/frameLayout2"
        android:layout_alignParentBottom="true"
        android:background="@color/fondo">

        <TextView
            android:id="@+id/view_content"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:gravity="center"
            android:text="@string/content_hint"
            />

        <TextView
            android:id="@+id/drawer_content"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:gravity="center"
            android:text="@string/drawer_hint"
            android:textColor="@color/primary_dark_green"
            android:background="@color/light_green"
            />

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

    <RelativeLayout
        android:layout_width="1100dp"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_alignTop="@+id/frameLayout2"
        android:background="@drawable/rounded_corner">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="@dimen/actionbar_dimen"
            android:background="@color/blanco"
            android:id="@+id/titulo_interno"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true">
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

class.java

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.app.Activity;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import static android.view.Gravity.START;

public class RegistrarInciTraActivity extends ActionBarActivity
{

    private DrawerArrowDrawable drawerArrowDrawable;
    private float offset;
    private boolean flipped;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.registrar_inci_traf_layout);

        final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        final ImageView imageView = (ImageView) findViewById(R.id.drawer_indicator);
        final Resources resources = getResources();

        drawerArrowDrawable = new DrawerArrowDrawable(resources);
        drawerArrowDrawable.setStrokeColor(resources.getColor(R.color.light_green));
        imageView.setImageDrawable(drawerArrowDrawable);

        drawer.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {
            @Override public void onDrawerSlide(View drawerView, float slideOffset) {
                offset = slideOffset;

                // Sometimes slideOffset ends up so close to but not quite 1 or 0.
                if (slideOffset >= .995) {
                    flipped = true;
                    drawerArrowDrawable.setFlip(flipped);
                } else if (slideOffset <= .005) {
                    flipped = false;
                    drawerArrowDrawable.setFlip(flipped);
                }

                drawerArrowDrawable.setParameter(offset);
            }
        });

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                if (drawer.isDrawerVisible(START)) {
                    drawer.closeDrawer(START);
                } else {
                    drawer.openDrawer(START);
                }
            }
        });

        final TextView styleButton = (TextView) findViewById(R.id.indicator_style);
        styleButton.setOnClickListener(new View.OnClickListener() {
            boolean rounded = false;

            @Override public void onClick(View v) {
                styleButton.setText(rounded //
                        ? resources.getString(R.string.rounded) //
                        : resources.getString(R.string.squared));

                rounded = !rounded;

                drawerArrowDrawable = new DrawerArrowDrawable(resources, rounded);
                drawerArrowDrawable.setParameter(offset);
                drawerArrowDrawable.setFlip(flipped);
                drawerArrowDrawable.setStrokeColor(resources.getColor(R.color.light_green));

                imageView.setImageDrawable(drawerArrowDrawable);
            }
        });
    }
}

I tried moving the Relative Layout, but it never works, There is perhaps some way to put always appear above the objects? How I can fix this?

Thanks

(If you need more code tell me and I edit this question)

Answer 1

From here:

Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

So you should have:

<android.support.v4.widget.DrawerLayout>

    <LinearLayout>

        < /> <!-- action bar code here -->
        <RelativeLayout /> <!-- main layout here -->

    </LinearLayout>

    <RelativeLayout>  <!-- drawer stuff here -->
        android:layout_gravity="start"
    </RelativeLayout>

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

This way - I think - the drawer will cover your fake action bar. To avoid, set android:layout_marginTop="@dimen/actionbar_dimen" to the "drawer stuff" RelativeLayout (with its height set on match_parent). Anyway, covering the ActionBar is actually the recommended behaviour for a navigation drawer, as per the Material design guidelines.

That implies saying goodbye to the burger-to-arrow animation, I know.

I add that you might need to readjust your height over your layout (get rid of the weight) and maybe your code. But keep pointing at the drawer with the <android.support.v4.widget.DrawerLayout> id.

If you're using Android Studio you can easily import the "Nav Drawer" example to see some working code and layout. Don't know about Eclipse.