Alyoshak Alyoshak - 5 months ago 20
Android Question

Why is my Android navigation drawer opening too wide?

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.

enter image description here

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

The layout_gravity attribute determines which View acts as the drawer. Currently, neither of the direct children of your DrawerLayout has that attribute set. Move android:layout_gravity="left" from the ListView to the LinearLayout.