Wrong size and click behavior for Views in DrawerLayout

Question

I have a layout for an Activity that I'm trying to add a navigation drawer to.

The problem is, to work properly, I need to use:

<android.support.v4.widget.DrawerLayout

instead of:

<RelativeLayout 

but it messes things up. My ProgressBar becomes much bigger, my RecyclerView doesn't work, the app logs me out when I click something, etc.

My layout XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.st.mf.UserAreaActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="@dimen/activity_vertical_margin"
    android:background="#fff">

    <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="20dp" />

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:menu="@layout/navigation_menu"
        android:layout_gravity="start">
    </android.support.design.widget.NavigationView>

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

How can I create my drawer menu without messing everything else up?

Answer 1

Any direct child View of a DrawerLayout that's not a drawer is considered a content View, and will be laid out to match_parent in both directions, regardless of the width and height attributes you've set on it. In your case - indeed, in most cases - you only need one content View, so the rest of the non-drawer Views should all be inside a single ViewGroup.

We'll place your ProgressBar and RecyclerView both inside a RelativeLayout that acts as the content View, where they'll keep the layout attributes you've set. For example:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.st.mf.UserAreaActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_vertical_margin"
    android:background="#fff">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="20dp" />

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:menu="@layout/navigation_menu"
        android:layout_gravity="start">
    </android.support.design.widget.NavigationView>

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

Note that the content View should always be listed before any drawers, to maintain proper z-ordering; i.e., to keep the drawers on top of the content.