Home > DeveloperSection > Blogs > Navigation drawer in android material design

Navigation drawer in android material design


Android Android  Android Styles  Android Libraries 
Ratings:
0 Comment(s)
 460  View(s)
Rate this:

Navigation drawer in android material design


Navigation drawer is a hidden panel that display after swipe finger left to right. It also show on touch action bar icon. Generally it shows from left to right but developers can show according to his need.

Here I am creating a sample to show navigation tab in android studio.

1.      First you have need to support design in your project. So add following in build.gradle

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:22.2.1'

    compile 'com.android.support:design:22.2.0'

}

2.      Create menu and add following item

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

<menu xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item android:title="Inbox"

        android:id="@+id/nav_item_inbox"

        android:icon="@drawable/ic_launcher"/> 

    <item android:title="Sent"

        android:id="@+id/nav_item_sent"

        android:icon="@drawable/ic_launcher"/> 

    <item android:title="Drafts"

        android:id="@+id/nav_item_draft"

        android:icon="@drawable/ic_launcher"/>

    <item android:title="Others">

        <menu>

            <item

                android:title="Spam"

                android:icon="@drawable/ic_launcher"/>

            <item

                android:title="Bin"

                android:icon="@drawable/ic_launcher"/>

        </menu>

    </item> 

    <group android:id="@+id/group_settings_id"> 

        <item android:title="Settings"

            android:icon="@drawable/ic_launcher"/>

        <item android:title="Help"

            android:icon="@drawable/ic_launcher"/>

    </group>

</menu>

3.      Add controls in activity_main.xml file

<LinearLayout 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="match_parent"

    android:fitsSystemWindows="true"

    android:orientation="vertical">

 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#006699"

        android:id="@+id/toolbar"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        app:title="Navigation View" />

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:layout_height="match_parent"

        android:layout_width="match_parent"

        android:id="@+id/drawerLayout">

        <FrameLayout

            android:orientation="vertical"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:id="@+id/containerView"></FrameLayout>

  <android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"

            xmlns:app="http://schemas.android.com/apk/res-auto"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_gravity="start"

            android:id="@+id/shitstuff"

            app:itemTextColor="#000000"

            app:menu="@menu/drawermenu"

            android:layout_marginTop="-24dp" />

 

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

</LinearLayout>

4.      Now add below code in MainActivity.class

public class MainActivity extends AppCompatActivity {

    NavigationView mNavigationView;

    DrawerLayout mDrawerLayout;

    android.support.v4.app.FragmentTransaction mFragmentTransaction;

    FragmentManager mFragmentManager;

    android.support.v7.widget.Toolbar toolbar;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        mNavigationView = (NavigationView) findViewById(R.id.shitstuff);

        getSupportActionBar().hide();

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        toolbar = (Toolbar) findViewById(R.id.toolbar);

mNavigationView.setNavigationItemSelectedListener(new NavigationView. OnNavigationItemSelectedListener() {

            @Override

            public boolean onNavigationItemSelected(MenuItem menuItem) {

                mDrawerLayout.closeDrawers();

              // select navigation item

                if (menuItem.getItemId() == R.id.nav_item_sent) {

 

                } else if (menuItem.getItemId() == R.id.nav_item_inbox) {

 

                }

 

                return false;

            }

 

        });

        android.support.v7.app.ActionBarDrawerToggle mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.app_name,

                R.string.app_name);

 

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerToggle.syncState();

    }

 

}

 

Now run your application. You can see navigation drawer on click toggle button or swipe left to right.


Don't want to miss updates? Please click the below button!

Follow MindStick