Implementing Navigation Drawer in Activity with Fragments

Question

I am currently redesigning my app to include a navigation drawer for navigating through the app. Currently, each screen is an activity and the way I have designed the home screen, is that it contains a toolbar and another xml file.

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

<Toolbar
    android:layout_width="match_parent"
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    app:popupTheme="@style/AppTheme.PopupOverlay">
    <ImageView
        android:layout_width="@dimen/_30sdp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_95sdp"
        android:src="@drawable/logo"
        android:id="@+id/logo"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/sync_green"
        android:id="@+id/sync_button"
        android:layout_marginStart="@dimen/_75sdp"/>
</Toolbar>
<include layout="@layout/activity_main" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/run"
   />

Now, I have made another XML file for the navigation drawer:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- The main content view where fragments are loaded -->
    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/activity_main_drawer" />

My dilemna is that since my toolbar is in the home.xml fragment, when I switch fragments, I will lose the toolbar. I want to keep the toolbar for all the views in the navigation drawer.

Also, in my java code, the setActionBar(toolbar) is throwing up an error saying cannot resolve method setActionBar.

Answer 1

One simple and straightforwrd solution for integrating NavigationDrawer along with Fragment in an Activity, is to design the activity_main.xml the following way :

 <?xml version="1.0" encoding="utf-8"?>
   <android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:layoutDirection="rtl"
    tools:openDrawer="start">

    <include
        layout="@layout/content_act_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />


    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:background="@color/flat_white_light">

    </android.support.design.widget.NavigationView>

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

Now, in the content_act_main.xml you can have :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ToolbarColoredBackArrow"
            app:popupTheme="@style/AppTheme.PopupOverlay" >

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

If you notice, in the conten_act_main.xml , there is a toolbar that will be available to all the content that are shown in the FrameLayout , and you can use this FrameLayout as the container of your Fragments.

Answer 2

You can of course maintain this toolbar, you need ActionBarDrawerToggle to bind the drawerLayout and Toolbar together.

Minimal configuration would be more or less :

 ActionBarDrawerToggle actionBarDrawerToggle;
    DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.navigation_drawer);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.app_name,R.string.app_name);
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
    }

And you put the Toolbar in your base activity layout and other views wrapped in DrawerLayout .

  <Android.support.v4.widget.DrawerLayout
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/navigation_drawer"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true">

        <Android.support.v7.widget.Toolbar
            xmlns:Android="http://schemas.Android.com/apk/res/Android"
            xmlns:app="http://schemas.Android.com/apk/res-auto"
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            ></Android.support.v7.widget.Toolbar>
        ....
        ....
    </Android.support.v4.widget.DrawerLayout>

Answer 3

Try This in your activity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

This is my .xml file

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:paddingBottom="@dimen/design_navigation_separator_vertical_padding"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/apptoolbar" />

        <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/nav_toolbar"
            android:clickable="true">

        </FrameLayout>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/appColor"
        android:fitsSystemWindows="true"
        android:paddingBottom="@dimen/design_navigation_separator_vertical_padding"
        app:itemTextAppearance="@style/NavigationDrawerStyle"
        app:headerLayout="@layout/nav_header_home"
        app:itemBackground="@color/appColor"
        app:itemTextColor="@color/drawable_selector_drawer_item"
        app:menu="@menu/activity_home_drawer" />

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