NavigationView example in Android

Hi guys, You can use NavigationView from android material design for slide menu in android.


DrawerLayout xml
<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"
    tools:openDrawer="start">

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


    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextAppearance="@layout/menu_text_style"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>
And your drawer header is normal layout, sample header layout drawer_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="@dimen/activity_vertical_margin"
    android:background="@drawable/bg"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_account_circle_white_24dp" />

    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_marginStart="6dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        android:textColor="@android:color/white" />

</LinearLayout>
And your drawer menu is normal menu resource, sample menu resource code menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_1"
            android:icon="@drawable/ic_home_white_24dp"
            android:title="@string/title_home" />
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@drawable/ic_bookmark_white_24dp"
            android:title="@string/title_bookmarks" />
        <item
            android:id="@+id/navigation_item_3"
            android:icon="@drawable/ic_favorite_white_24dp"
            android:title="@string/title_favorite" />
        <item
            android:id="@+id/navigation_item_4"
            android:icon="@drawable/ic_payment_white_24dp"
            android:title="@string/title_payment" />
        <item
            android:id="@+id/navigation_item_5"
            android:icon="@drawable/ic_settings_white_24dp"
            android:title="@string/title_settings" />
    </group>
</menu>
And you can get this header layout in your java code as like
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
TextView txtName = (TextView) navigationView.getHeaderView(0).findViewById(R.id.txtName);
txtName.setText(getResources().getString(R.string.title_name));
And you have to implement NavigationView.OnNavigationItemSelectedListener to access the click event of menu items like,
navigationView.setNavigationItemSelectedListener(this);
And, Yes, this interface has the method, it should be implemented as like,
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        int id = item.getItemId();
        int position = 0;
        switch (id) {
            case R.id.navigation_item_1:
                mTitle = getString(R.string.title_home);
                position = 0;
                break;
            case R.id.navigation_item_2:
                mTitle = getString(R.string.title_bookmarks);
                position = 1;
                break;
            case R.id.navigation_item_3:
                mTitle = getString(R.string.title_favorite);
                position = 2;
                break;
            case R.id.navigation_item_4:
                mTitle = getString(R.string.title_payment);
                position = 3;
                break;
            case R.id.navigation_item_5:
                mTitle = getString(R.string.title_settings);
                position = 4;
                break;
        }
        if (getSupportActionBar() != null)
            getSupportActionBar().setTitle(mTitle);
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        
        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction()
                .replace(R.id.container, PlaceholderFragment.newInstance(position + 1))
                .commit();
        
        return true;
    }


I hope this post is useful to you. kindly share your feedback as comment here.


Simple example of Navigation view on both side in Android

Source code on GitHub



Thank You



Comments

Popular posts from this blog

Spinner with multiple selection in Android

Simple example of using Spinner in Kotlin | Android

Simple Timer Example in android