Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Impleneting a Navigation Drawer in Android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.29k
    Comment on it

    Navigation drawer :It can used as an app's main navigation option on the left edge of the screen. it it hidden all the time and revealed on the click of the app icon or swipe gesture from the left of the screen. Navigation drawer is used when your app structure need more than three top level views, cross navigation from lower levels.and deep navigation branches.

    In this tutorial you will learn how to implement the navigation drawer in the app. You can see lot of popular applications like Facebook, Youtube, Google + already introduced navigation drawer menu in their applications. Here are some quick tips to add navigation drawer to your application.

    First Create a java file data for navigation drawer item: sample code: NavDrawerItem.java

    package info.androidhive.slidingmenu.model;
    
    public class NavDrawerItem {
    
        private String title;
        private int icon;
        private String count = "0";
        // boolean to set visiblity of the counter
        private boolean isCounterVisible = false;
    
        public NavDrawerItem(){}
    
        public NavDrawerItem(String title, int icon){
            this.title = title;
            this.icon = icon;
        }
    
        public NavDrawerItem(String title, int icon, boolean isCounterVisible, String count){
            this.title = title;
            this.icon = icon;
            this.isCounterVisible = isCounterVisible;
            this.count = count;
        }
    
        public String getTitle(){
            return this.title;
        }
    
        public int getIcon(){
            return this.icon;
        }
    
        public String getCount(){
            return this.count;
        }
    
        public boolean getCounterVisibility(){
            return this.isCounterVisible;
        }
    
        public void setTitle(String title){
            this.title = title;
        }
    
        public void setIcon(int icon){
            this.icon = icon;
        }
    
        public void setCount(String count){
            this.count = count;
        }
    
        public void setCounterVisibility(boolean isCounterVisible){
            this.isCounterVisible = isCounterVisible;
        }
    }
    

    Then create the adapter for the listview in the main activity::

    NavDrawerListAdapter.java
    package info.androidhive.slidingmenu.adapter;
    
    import info.androidhive.slidingmenu.R;
    import info.androidhive.slidingmenu.model.NavDrawerItem;
    
    import java.util.ArrayList;
    
    import android.app.Activity;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    public class NavDrawerListAdapter extends BaseAdapter {
    
        private Context context;
        private ArrayList navDrawerItems;
    
        public NavDrawerListAdapter(Context context, ArrayList navDrawerItems){
            this.context = context;
            this.navDrawerItems = navDrawerItems;
        }
    
        @Override
        public int getCount() {
            return navDrawerItems.size();
        }
    
        @Override
        public Object getItem(int position) {      
            return navDrawerItems.get(position);
        }
    
        @Override
        public long getItemId(int position) {
            return position;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                LayoutInflater mInflater = (LayoutInflater)
                        context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
                convertView = mInflater.inflate(R.layout.drawer_list_item, null);
            }
    
            ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
            TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
            TextView txtCount = (TextView) convertView.findViewById(R.id.counter);
    
            imgIcon.setImageResource(navDrawerItems.get(position).getIcon());       
            txtTitle.setText(navDrawerItems.get(position).getTitle());
    
            // displaying count
            // check whether it set visible or not
            if(navDrawerItems.get(position).getCounterVisibility()){
                txtCount.setText(navDrawerItems.get(position).getCount());
            }else{
                // hide the counter view
                txtCount.setVisibility(View.GONE);
            }
    
            return convertView;
        }
    
    }

    >

    main activity:

    MainActivity.java
    public class MainActivity extends Activity {
        private DrawerLayout mDrawerLayout;
        private ListView mDrawerList;
        private ActionBarDrawerToggle mDrawerToggle;

    // nav drawer title
    private CharSequence mDrawerTitle;
    
    // used to store app title
    private CharSequence mTitle;
    
    // slide menu items
    private String[] navMenuTitles;
    private TypedArray navMenuIcons;
    
    private ArrayList<navdraweritem> navDrawerItems;
    private NavDrawerListAdapter adapter;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity&#95;main);
    
        mTitle = mDrawerTitle = getTitle();
    
        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav&#95;drawer&#95;items);
    
        // nav drawer icons from resources
        navMenuIcons = getResources()
                .obtainTypedArray(R.array.nav&#95;drawer&#95;icons);
    
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer&#95;layout);
        mDrawerList = (ListView) findViewById(R.id.list&#95;slidermenu);
    
        navDrawerItems = new ArrayList<navdraweritem>();
    
        // adding nav drawer items to array
        // Home
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
        // Find People
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));
        // Photos
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
        // Communities, Will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));
        // Pages
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
        // What's hot, We  will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));
    
    
        // Recycle the typed array
        navMenuIcons.recycle();
    
        // setting the nav drawer list adapter
        adapter = new NavDrawerListAdapter(getApplicationContext(),
                navDrawerItems);
        mDrawerList.setAdapter(adapter);
    
        // enabling action bar app icon and behaving it as toggle button
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
    
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic&#95;drawer, //nav menu toggle icon
                R.string.app&#95;name, // nav drawer open - description for accessibility
                R.string.app&#95;name // nav drawer close - description for accessibility
        ){
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                // calling onPrepareOptionsMenu() to show action bar icons
                invalidateOptionsMenu();
            }
    
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    
        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // toggle nav drawer on selecting action bar app icon/title
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action bar actions click
        switch (item.getItemId()) {
        case R.id.action&#95;settings:
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }
    
    /***
     * Called when invalidateOptionsMenu() is triggered
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // if nav drawer is opened, hide the action items
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action&#95;settings).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
    
    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getActionBar().setTitle(mTitle);
    }
    
    /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */
    
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }
    
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
    

    the code reference from http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

    Source code also provided in zip file SlidingMenu.zip attached to the blog.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: