Android Navigation Drawer Menu on top of Actionbar / Toolbar

در این آموزش نحوه Navigation Drawer برای منوهای اندروید رو آموزش میدیم.

Apps like gmail, you see when click on menu icon, a nice Navigation Drawer slides from left on top of Actionbar. Let’s see example layout.

The basic idea behind android navigation drawer on top of action bar is creating custom Actionbar and treat it as child of our main layout. Finally, build Navigation Drawer Layout on top of that. Browse below for project files.

آموزش Navigation Drawer اندروید

دانلود سورس آموزش

MainActivity.java

Setup custom toolbar and navigation drawer layout.

File Location: App→java→Your package

package com.androidcss.drawerexample;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    public static DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;

    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setup Actionbar / Toolbar
        mToolbar = (Toolbar) findViewById(R.id.action_bar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setLogo(R.mipmap.ic_launcher);
        getSupportActionBar().setDisplayShowTitleEnabled(false);

        // Setup Navigation Drawer Layout
        mDrawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });
    }
}

Related files for MainActivity.java

Here are the files which participates in MainActivity.java

activity_main.xml

XML layout file for MainActivity.java

File location: App→res→Layout.

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


    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

    </RelativeLayout>

    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="com.androidcss.drawerexample.FragmentNavigationDrawer"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

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

action_bar.xml

This xml layout file contains custom toolbar which is supported in support library version 7 and we are included this file in activity_main.xml.

File Location: App→res→Layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"/>

strings.xml

Setting Up Drawer layout requires two string constants, specify them in your strings.xml. The code marked below.

File location: App→res→Values.

<resources>
    <string name="app_name">Drawer Example</string>
    <string name="drawer_open">Drawer Opened</string>
    <string name="drawer_close">Drawer Closed</string>
</resources>

آموزش Navigation Drawer اندروید

styles.xml

When i run my app, the menu icon(3 lines bar) is shown in grey color and i thought which does not look good so i changed it to white by adding following lines of marked code to my styles.xml file.

Make sure you are chosen the theme which as no action bar, i highlighted the theme below.

File location: App→res→Values.

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="drawerArrowStyle">@style/BarStyle</item>
    </style>

    <style name="BarStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

</resources>

FragmentNavigationDrawer.java

Create fragment and interpret layout.

File Location: App→java→Your package

package com.androidcss.drawerexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentNavigationDrawer extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
    }
    
}

Related Files for FragmentNavigationDrawer.java

Here are the files which participates in FragmentNavigationDrawer.java

fragment_navigation_drawer.xml

XML design layout file for FragmentNavigationDrawer.java

While designing this layout i have not considered any material design guidelines, this is a tutorial on how to make drawer menu on top of actionbar, i just considered having a background with menu using LinearLayout. I hope, you consider material design guidelines from google and use ListView or RecyclerView for large menu.

File location: App→res→Layout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/topBlock"
                android:layout_width="match_parent"
                android:layout_height="140dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/background"
                android:orientation="vertical"
                android:paddingBottom="20dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="20dp">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:id="@+id/listIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_marine" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="Android Dev"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_backwater" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="PHP and Mysql"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_shellfish" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="HTML and CSS"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_dryfish" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="AndEngine Dev"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

background.xml

On our drawer fragment you see a nice AndroidCSS text and logo right? Yes, it is a image and SettingUp background image for LinearLayout in fragment_navigation_drawer.xml is done by this XML file.

File location: App→res→drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="1dp">
    <shape android:shape="rectangle">
        <stroke android:width="1dp" android:color="#DDD" />
        <solid android:color="#EEE" />
    </shape>
</item>
    <item >
    <bitmap
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/logo"
        android:tileMode="disabled"
        android:dither="true"/>
    </item>
</layer-list>