Android Nav Drawer / Sliding Menu

If you've seen those side bar sliding menu's in Android you may have found them pretty useful. Facebook has used them to good affect with its left and right nav drawer menus. If you've tried to create them you'll no doubt know they're a pain. So many different versions of Android don't make it easy and the complexities of fragments make it tricky at best. However I have recently discovered a library by Jeremy Feinstein which makes it incredibly easy. So I can't claim I did much work here, but I did implement it, which (IMHO) his docs don't do brilliantly. Anyway his work is terrific, so give it a try http://jeremyfeinstein.com/

First things first, you'll need the Google Support Library. Then download Jeremy's library from github https://github.com/jfeinstein10/SlidingMenu. Get both of these librarys set up in Eclipse or Android Studio, whichever one you use. You'll need to make sure they compile with no errors. Word of advice, check the build target, ensure its the latest version of Android and the project is marked as a library.

Now create your new project and include both the libraries. Start with the easy bit and create to layout xml files. One for the sliding menu and one for the main page. The main page is whatever you want, here's my menu file though in case it helps FragmentMenu.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:orientation="vertical" >

    <TextView
        android:id="@+id/fragment_menu_btn_animal"
        style="@style/MenuButton"
        android:drawableLeft="@drawable/animal"
        android:text="@string/muppet_animal" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/spacer_menu_top" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/spacer_menu_bottom" />

    <TextView
        android:id="@+id/fragment_menu_btn_gonzo"
        style="@style/MenuButton"
        android:drawableLeft="@drawable/gonzo"
        android:text="@string/muppet_gonzo" />

</LinearLayout>

Next create a FragmentMenu.java file, nothing ground breaking here:

package com.example.newnavbartest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Toast;

public class FragmentMenu extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragmentmenu, container, false);
    }
    
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        
        getView().findViewById(R.id.fragment_menu_btn_animal)
        .setOnClickListener(new OnClickListener() { 
            public void onClick(View v) {  
                Toast.makeText(getActivity(), "Animal", Toast.LENGTH_SHORT).show();
            }
        });

        getView().findViewById(R.id.fragment_menu_btn_gonzo)
        .setOnClickListener(new OnClickListener() { 
            public void onClick(View v) {  
                Toast.makeText(getActivity(), "Gonzo", Toast.LENGTH_SHORT).show();
            }
        });
    
    }
    
}

Last and most important is the main activity file, this is where we control the sliding menu library:

package com.example.newnavbartest;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;

public class MainActivity extends FragmentActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTitle(R.string.app_name);
        // set the content view
        setContentView(R.layout.activity_main);

        // configure the SlidingMenu
        SlidingMenu menu = new SlidingMenu(this);
        menu.setMode(SlidingMenu.LEFT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        menu.setShadowWidthRes(R.dimen.shadow_width);
        menu.setShadowDrawable(R.drawable.shadow);
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        menu.setFadeDegree(0.35f);
        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        menu.setMenu(R.layout.activity_default);
        
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.add(R.id.activity_default_fragment_container, new FragmentMenu(), FragmentMenu.class.getSimpleName());
        ft.commit();
    }
    
}

Hopefully this helps! Here's the github of this project: https://github.com/jimbo1299/navdrawer