Search code examples
androiddrawerlayoutnavigationviewandroid-navigationview

Is there a proper way to use the Appcompat "NavigationView" as permanent (see Material Design guidelines)

By reading the Material Design guidelines about the Navigation Drawer (Drawerlayout + NavigationView) I see there is a recommandation to set it always opened on desktop. That's what I would like to achieve on tablets.

Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed.

enter image description here

But it seems that the widget offered in support library is not easy to manipulate and achieve such an effect.

Did I missed something, or is there an easy way to let it opened on tablets/desktop/TV?

My current phone layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_awesome_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primarycolor"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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


<!-- The navigation drawer   style="@style/NavDrawer"

                 android:background="@android:color/white"-->
<android.support.design.widget.NavigationView
    android:id="@+id/navigation"
    app:headerLayout="@layout/nav_header"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/nav" />

Solution

  • If you don't want to use navigation view as a drawer do not put the NavigationView directly inside the DrawerLayout.

    <DrawerLayout>
    <LinearLayout>
        <NavigationView android:layout_width="320dp" />
        <LinearLayout android:orientation="vertical">
            <Toolbar/>
            <FrameLayout android:id="@+id/content_frame" />
        </LinearLayout>
    </LinearLayout>
</DrawerLayout>

    Put this layout inside /res/layout-sw600dp-land. Your original layout will be loaded on phones and this one on 7" tablets and above in landscape.