Membuat Menu Menggunakan Navigation Drawer

Table of Contents

    1. Navigation Drawer Design
    2. When to Use the Navigation Drawer
    3. Creating a Navigation Drawer
        3.1. Create a Drawer Layout
        3.2. Initialize the Drawer List
        3.3. Handle Navigation Click Events
        3.4. Listen for Open and Close Events
    4. Download Complete Source
    5. Working Demo
    6. Reference

The navigation drawer is a panel that displays the app’s main navigation commands on the left side of the screen. It is not visible by default, and can be shown while user swipes right or while clicking on the open menu icon in the ActionBar. This example describes How to implement a navigation drawer using  Support Library the DrawerLayout API.
1. Navigation Drawer Design

Navigation drawer is an overlay panel, that is replaced with the legacy application dashboard screen or menu. Now we don’t need to create a dedicated activity for showing all application options. For example, if you look at the older version of Facebook app, the dashboard screen was only the way to play around with the app. Lets say, if you are inside messages, you wont be able to get into the friends list, unless you come back to dashboard.

Older Version of Facebook App

The latest version of Facebook App is using the Navigation Drawer.
2. When to Use the Navigation Drawer

Before you decide to use a navigation drawer in your app, you should understand the use cases and design principles defined in the Navigation Drawer design guide.  It is not an general replacement for top-level menu navigation.

More information on design guidelines follow here.
3. Creating a Navigation Drawer

This lesson describes step by step tutorial to Implement a navigation drawer using the DrawerLayout APIs available in the Support Library.
3.1. Create a Drawer Layout

To create a navigation drawer, first declare your user interface with a DrawerLayout object as the root view of your layout.

Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer. In this example, our layout uses a DrawerLayout with two child views. One FrameLayout to contain the main content, and a ListView for the navigation drawer. The FrameLayout is used to hold the child view’s populated by a Fragment at runtime.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- The main content view -->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->

    <ListView
        android:id="@+id/drawer_list"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

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

Key Notes:

    The main content view is used as first child in the DrawerLayout. The XML order implies z-ordering and the drawer must be on top of the content.
    The main content view is set to match the parent view’s width and height, because it represents the entire UI when the navigation drawer is hidden.
    The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

3.2. Initialize the Drawer List

Now, first initialize the navigation drawer’s list of items. As here the navigation drawer consists a ListView, so the list can be populated by an Adapter.

// Within which the entire activity is enclosed
private DrawerLayout mDrawerLayout;

// ListView represents Navigation Drawer
private ListView mDrawerList;

// Getting reference to the DrawerLayout
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerList = (ListView) findViewById(R.id.drawer_list);

// Creating an ArrayAdapter to add items to the listview mDrawerList
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getBaseContext(),
R.layout.drawer_list_item, getResources().getStringArray(R.array.menus));

// Setting the adapter on mDrawerList
mDrawerList.setAdapter(adapter);

3.3. Handle Navigation Click Events

When the user selects an item in the drawer’s list, the system calls onItemClick() on the OnItemClickListener given to setOnItemClickListener(). In this example, selecting each item in the list inserts a different Fragment into the main content view FrameLayout.

// Setting item click listener for the listview mDrawerList
mDrawerList.setOnItemClickListener(new OnItemClickListener() {
   
    @Override
    public void onItemClick(AdapterView&lt;?&gt; parent, View view,
    int position, long id) {
       
        // Getting an array of rivers
        String[] menuItems = getResources().getStringArray(R.array.menus);
       
        // Currently selected river
        mTitle = menuItems[position];
       
        // Creating a fragment object
        WebViewFragment rFragment = new WebViewFragment();
       
        // Passing selected item information to fragment
        Bundle data = new Bundle();
        data.putInt("position", position);
        data.putString("url", getUrl(position));
        rFragment.setArguments(data);
       
        // Getting reference to the FragmentManager
        FragmentManager fragmentManager = getFragmentManager();
       
        // Creating a fragment transaction
        FragmentTransaction ft = fragmentManager.beginTransaction();
       
        // Adding a fragment to the fragment transaction
        ft.replace(R.id.content_frame, rFragment);
       
        // Committing the transaction
        ft.commit();
       
        // Closing the drawer
        mDrawerLayout.closeDrawer(mDrawerList);
       
    }
});

3.4. Listen for Open and Close Events

We can also listen to the drawer open and close event. To listen for drawer open and close events, we can extend the ActionBarDrawerToggle class. The ActionBarDrawerToggle implements DrawerLayout.DrawerListener.

// Getting reference to the ActionBarDrawerToggle
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open,
R.string.drawer_close) {
   
    /** Called when drawer is closed */
    public void onDrawerClosed(View view) {
        getActionBar().setTitle(mTitle);
        invalidateOptionsMenu();
    }
   
    /** Called when a drawer is opened */
    public void onDrawerOpened(View drawerView) {
        getActionBar().setTitle("JAVATECHIG.COM");
        invalidateOptionsMenu();
    }
   
};

// Setting DrawerToggle on DrawerLayout
mDrawerLayout.setDrawerListener(mDrawerToggle);

4. Download Complete Source



Download Source Code on Github

Share this post