Why is my Android navigation drawer opening too wide?

Question

I had a rather basic navigation drawer working pretty well -- a simple ListView. But I need a title above the selectable items, so (see below) modified the XML for the drawer to be a RelativeLayout containing a TextView for a title and then the ListView for the items.

What resulted is quite strange. Even though I have specified the width for all 3 (RelativeLayout, TextView and ListView) to be 240dp, which was the width of the ListView when it represented the entire drawer's XML, it looks like this (ignore the volume control - didn't see that pop up). Notice the ListView is 240 dp wide, but the red background I've assigned is going all the way to the right.

Here's my XML for my first screen. The relevant drawer XML is at bottom.

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/ail_background_gradient"
    tools:context="com.allinlearning.assist_android.HomeScreenActivityFragment">

    <ImageView
        android:id="@+id/imgViewLogo"
        android:src="@drawable/ail_logo"
        android:layout_margin="10dp"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:scaleType="fitXY"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="ALL In Learning"
        android:id="@+id/textViewLogo"
        android:layout_margin="10dp"
        android:layout_below="@+id/imgViewLogo"
        android:layout_centerHorizontal="true"
        android:textSize="@dimen/font_size26"
        android:textStyle="bold" />

    <ImageButton
        android:id="@+id/imgBtnGradeAssessment"
        android:src="@drawable/grade_assessment"
        android:layout_width="100dp"
        android:layout_height="95dp"
        android:scaleType="fitXY"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/textViewGradeAssessment"
        android:layout_toStartOf="@+id/textViewGradeAssessment" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Grade"
        android:id="@+id/textViewGradeAssessment"
        android:textColor="@color/white"
        android:textSize="@dimen/font_size28"
        android:layout_centerVertical="true"
        android:layout_alignRight="@+id/imgViewLogo"
        android:layout_alignEnd="@+id/imgViewLogo" />

    <ImageButton
        android:id="@+id/imgBtnPrivateData"
        android:src="@drawable/two_clickers"
        android:layout_width="100dp"
        android:layout_height="95dp"
        android:scaleType="fitXY"
        android:layout_below="@+id/imgBtnGradeAssessment"
        android:layout_alignLeft="@+id/imgBtnGradeAssessment"
        android:layout_alignStart="@+id/imgBtnGradeAssessment" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Private Data"
        android:id="@+id/textViewPrivateData"
        android:textColor="@color/white"
        android:textSize="@dimen/font_size28"
        android:layout_alignBottom="@+id/imgBtnPrivateData"
        android:layout_toRightOf="@+id/imgBtnPrivateData"
        android:layout_toEndOf="@+id/imgBtnPrivateData"
        android:layout_marginBottom="40dp" />

</RelativeLayout>

<!-- The navigation drawer -->
<LinearLayout android:id="@+id/left_drawer"
    android:orientation="vertical"
    android:background="@color/red"
    android:layout_width="240dp"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="I AM THE TITLE"
        android:id="@+id/tvDrawerTitle"
        android:layout_margin="10dp"
        android:layout_centerHorizontal="true"
        android:textSize="@dimen/font_size26"
        android:textStyle="bold"
        android:textAlignment="center"
        android:textColor="@color/black" />

    <ListView
        android:id="@+id/lvDrawerItems"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="@color/white" />

</LinearLayout>

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

Answer 1

The layout_gravity attribute determines which child View acts as the drawer in a DrawerLayout . Currently, neither of the direct children of your DrawerLayout has that attribute set, so both are just filling it, with the LinearLayout on top, covering the content RelativeLayout .

Move android:layout_gravity="left" from the ListView to the LinearLayout .