Add navigation drawer to content view containing ListView and Button

Question

I have a view layout containing a ListView and a Button:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
            android:background="#5434"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

<ListView
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_alignParentTop="true"
            android:layout_weight="1.0"
            android:id="@+id/itemlistView" tools:ignore="ObsoleteLayoutParam"/>


 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    tools:ignore="ObsoleteLayoutParam">

       <Button
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:background="@drawable/button"
              android:text="@string/new_item"
              android:id="@+id/listview_addDebtButton"
              android:layout_gravity="center_horizontal"
              android:layout_weight="1.0"
              tools:ignore="ObsoleteLayoutParam"/>
 </LinearLayout>

but now i want to add a Navigation Drawer. Using the sample code from google developers. But am not sure how to do this since the sample code contains an empty content view:

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

<!-- As the main content view, the view below consumes the entire
     space available using match_parent in both dimensions. -->
<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     The drawer is given a fixed width in dp and extends the full height of
     the container. A solid background is used for contrast
     with the content view. -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

I however proceeded to try with this as my new layout:

<?xml version="1.0" encoding="utf-8"?>

<!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <ListView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:id="@+id/itemlistView" />


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/button"
            android:text="@string/new_item"
            android:id="@+id/listview_addDebtButton"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1.0"
            />
    </LinearLayout>
</FrameLayout>

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     The drawer is given a fixed width in dp and extends the full height of
     the container. A solid background is used for contrast
     with the content view. -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

This fails woefully when I try to run the app and i get a android.view.InflateException with the error message:

error inflating class DrawerLayout. Am not sure how to proceed from here. "There is a similar question that asks "How do I add navigation drawer to my existing code?" but this problem is way too complicated than mine and I can't apply the solutions to my problem. Any suggestions will be appreciated.

score 0 · Answer 1 · answered Jan 26 '15 at 05:45

Try like this:

According to docs: Drawer Layout tooks two direct children

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.

From that reference I used one for FrameLayout and another one for ListView.

<?xml version="1.0" encoding="utf-8"?>
<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" >

        <RelativeLayout
            android:id="@+id/container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" >

            <ListView
                android:id="@+id/itemlistView"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_alignParentTop="true"
                android:layout_weight="1.0"
                tools:ignore="ObsoleteLayoutParam" />

            <Button
                android:id="@+id/listview_addDebtButton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1.0"
                android:background="@drawable/button"
                android:text="@string/new_item"
                tools:ignore="ObsoleteLayoutParam" />
        </RelativeLayout>
    </FrameLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

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

Add navigation drawer to content view containing ListView and Button

1 Answers1