Navigation Drawer is very wide

Question

I have implemented Navigation drawer similar to Android Sliding Menu using Navigation Drawer. The slide menu is coming up properly, but very wide (The width is very long).. When I check it in my Phone/TAB it is very long both portrait and landscape mode. It is almost touching the other side of the screen. Something like a full screen.

When I run the project given in AndroidHive. Things are fine. I have just tuned the XML to by requirements that is all

Here is the drawer list XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:background="@drawable/list_selector" >

<ImageView
    android:id="@+id/icon"
    android:layout_width="25dp"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:contentDescription="@string/desc_list_item_icon"
    android:src="@drawable/maps" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_toRightOf="@id/icon"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:paddingRight="40dp"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:textColor="@color/list_item_title" />

<TextView
    android:id="@+id/counter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="8dp"
    android:background="@drawable/roundcircle"
    android:paddingLeft="12dp"
    android:paddingRight="12dp"
    android:paddingTop="4dp"
    android:textColor="@color/counter_text_color"
    android:textStyle="bold" />

 </RelativeLayout>

This is ListView.XML which has the Slide ListView

<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" >

<FrameLayout
    android:id="@+id/frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />


    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/list_background"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />

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

I am not sure where I am going wrong?

Answer 1

You have not specified a proper width for your NavigationDrawer. If you set the width to match_parent it will - as the name implies - be as big as the parent. And you don't want the NavigationDrawer to be as big as the screen, so specify a width of about 240dp. Try something like this:

<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">

    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:layout_gravity="start"
        android:background="@color/list_background"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />

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

Answer 2

The ListView needs to have a smaller width. Try android:layout_width="240dp".

This is basically based on the official guide: http://developer.android.com/training/implementing-navigation/nav-drawer.html

My tip: Double check tutorials with official documentation :)