Sunday 18 September 2016

Navigation Drawer Menu Example in android studio|Navigation Drawer Slider Menu Example

Required Class and Layouts:
1.Main Activity | activity_main.xml
3.Create folder inside-res->(right click on res)->new->directory->menu
4.Folder:- menu | inside menu (right click on menu)->new->Menu resource file->drawer_view.xml
5.For Navigation Header-> res->layout->new->Layout resource file->nav_header.xml
6.Open drawable -> add some icon
7.String.xml
8.Create new file inside  drawable->new->Drawable resource file->pressed_color.xml
9.Open build.gradle  add following dependencies compile 'com.android.support:design:24.1.1'


Step 1:-strings.xml
<resources>
    <string name="app_name">NavigationDrawer</string>
    <string name="drawer_open">Open</string>
    <string name="drawer_close">Close</string>
</resources>


Step 2:-menu->drawer_view.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

        <item
            android:id="@+id/itemHome"
            android:icon="@drawable/home"
            android:title="Home"></item>
        <item
            android:id="@+id/itemHelp"
            android:icon="@drawable/help"
            android:title="Help"></item>
        <item
            android:id="@+id/itemUser"
            android:icon="@drawable/user"
            android:title="User"></item>
        <item
            android:id="@+id/logout"
            android:icon="@drawable/help"
            android:title="Logout"></item>
    <item android:id="@+id/subMenu"
        android:title="More..">
        <menu>
            <item
                android:id="@+id/itemSearch"
                android:icon="@drawable/search"
                android:title="Search"></item>
            <item
                android:id="@+id/itemLocation"
                android:icon="@drawable/location"
                android:title="location"></item>
            <item
                android:id="@+id/itemGift"
                android:icon="@drawable/gift"
                android:title="Gift"></item>
        </menu>
    </item>
</menu>
Step 3:-res->layout->nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="190dp">

    <ImageView
        android:src="@drawable/user"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:layout_height="0dp" />
    <TextView
        android:id="@+id/tv_email"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Supriya"/>
</LinearLayout>
Step 4:-drawable->pressed_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/colorAccent"
        android:state_pressed="true"></item>
    <item android:drawable="@android:color/transparent"></item>

</selector>
Step5:-activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navDrawer">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Main Content"/>
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:menu="@menu/drawer_view"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemBackground="@drawable/pressed_color"
        android:id="@+id/navView">

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

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

Step 6:-MainActivity.java
package supriya.com.navigationdrawer;

import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
ActionBarDrawerToggle toggle;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DrawerLayout drawerLayout=(DrawerLayout)findViewById(R.id.navDrawer);
        toggle=new ActionBarDrawerToggle(this,drawerLayout,R.string.drawer_open,R.string.drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        NavigationView navigationView=(NavigationView)findViewById(R.id.navView);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.itemGift:
                    Toast.makeText(getApplicationContext(),"Gift",Toast.LENGTH_LONG).show();
                        break;
                    case R.id.itemLocation:
                        Toast.makeText(getApplicationContext(),"location",Toast.LENGTH_LONG).show();
                        break;
                    case R.id.itemSearch:
                        Toast.makeText(getApplicationContext(),"search",Toast.LENGTH_LONG).show();
                        break;
                }
                DrawerLayout d1=(DrawerLayout)findViewById(R.id.navDrawer);
                if(d1.isDrawerOpen(GravityCompat.START)){
                    d1.closeDrawer(GravityCompat.START);
                }
                return false;
            }
        });

    }

    @Override    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item)){
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
Output:-


4 comments: