New Navigation View

Navigation Drawer is an important feature of any android app. Its need is when you navigate some particular pages of your app. In new android support design library, Navigation View is officially released, before we used Navigation Drawer. Let's create Navigation View. First Create New Project

Add this library to app's build.gradle file in dependencies and click sync now:
compile 'com.android.support:design:23.1.0'

Now change to your layout file's content as below where you want to add drawer:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:context=".MainActivity">

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

        <include layout="@layout/appbar"></include>

        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        </FrameLayout>
    </LinearLayout>

    <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.support.v4.widget.DrawerLayout>

Here you see 4 content:
  • Drawer Layout widget
  • include app-bar (Toolbar)
  • Frame Layout where actual fragment to be replaced. Later I'll explain about that
  • Navigation View that is drawer
Define each attribute to java file:
private Toolbar toolbar;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle drawerToggle;
private NavigationView navigationView;

Define each one:
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.navigation_view);

Create one method in onCreate(), named initDrawer() and in method, do below code that is related to drawer:
private void initDrawer() {
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }

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

Override below methods that is necessary to put drawer icon and its click:
@Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        drawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
}

Now run project, below will be your output:
You can check by clicking drawer icon, finally drawer comes up. Hurrah :)
But its remaining to put contents in drawer.

Here I want to tell you one thing that, when you click any item from navigation view, it redirects to the fragment only.
Remember, we put one FrameLayout in our main activity. So whenever we redirect to any fragment from Navigation View, we replace to this frame to the explicit Fragment where we want to redirect.

Now put HomeFragment, as first time with frame, replace with it.
Create one blank fragment named HomeFragment and its layout fragment_home.xml:

HomeFragment.java
public class HomeFragment extends Fragment {

    public static HomeFragment newInstance() {
        HomeFragment fragment = new HomeFragment();
        return fragment;
    }

    public HomeFragment() {
        // Required empty public constructor
    }

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

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

fragment_home.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    tools:context="com.android.example.myapplication.fragment.HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <ImageView
        android:id="@+id/imageHome"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_home" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageHome"
        android:gravity="center"
        android:text="Home"
        android:textSize="20sp" />

</RelativeLayout>

Now add this code that replace to your frame-layout content, below initDrawer() called:
FragmentManager manager = getSupportFragmentManager();
FragmentTransaction ft = manager.beginTransaction();
ft.replace(R.id.content, new HomeFragment());
// ft.addToBackStack(null);
ft.commit();

Now run project, your output will be like this:

Now add contents in Drawer:
Create one menu drawable in res->menu, named drawer_items as like below:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <group
        android:id="@+id/grp1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_home"
            android:title="Home" />
        <item
            android:id="@+id/drawer_fav"
            android:title="Favorite" />
        <item
            android:id="@+id/drawer_notification"
            android:title="Notification" />
        <item
            android:id="@+id/drawer_logout"
            android:title="Logout" />
    </group>

</menu>

If you want to add icon to item, add android:icon="@drawable/ic_home". So drawer would be like this:



Now If you want to do grouping with more many items in sections, your drawer_items menu file like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <group
        android:id="@+id/grp1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:title="Home" />
    </group>

    <group
        android:id="@+id/grp2"
        android:checkableBehavior="single">
        <item android:title="Login">
            <menu>
                <item
                    android:id="@+id/drawer_fb"
                    android:title="Facebook" />
                <item
                    android:id="@+id/drawer_gplus"
                    android:title="Google+" />
            </menu>
        </item>
    </group>

    <group
        android:id="@+id/grp3"
        android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_logout"
            android:title="Logout" />
    </group>

</menu>

So drawer would be like this:



Now add NavigationView item click event.
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {

                setDrawerClick(menuItem.getItemId());

                menuItem.setChecked(true);
                drawerLayout.closeDrawers();
                return true;
            }
});

and add implement method setDrawerClick(menuItem.getItemId());
private void setDrawerClick(int itemId) {
        switch (itemId) {
            case R.id.drawer_home:
                Snackbar.make(parentView, "Home", Snackbar.LENGTH_SHORT).show();
                break;

            case R.id.drawer_fav:
                Snackbar.make(parentView, "Favorite", Snackbar.LENGTH_SHORT).show();
                break;

            case R.id.drawer_notification:
                Snackbar.make(parentView, "Notification", Snackbar.LENGTH_SHORT).show();
                break;

            case R.id.drawer_logout:
                Snackbar.make(parentView, "Logout", Snackbar.LENGTH_SHORT).show();
                break;
        }
}

Comments

Popular posts from this blog

MVC Architecture in Android

SQLiteDatabase (Without SqliteOpenHelper class)