Develop Reference

Navigation Menu in Support Action Bar not opening

EDIT: So the menu exists but I can only get to it by sliding the menu out, the button on the top left corner doesn't toggle the drawer open.
I'm trying to implement a nav menu but instead of a hamburger button showing that opens my menu, I'm left with a non-functioning back button. I'm assuming it's a little different than the Nav Button tutorial Google has due to using a toolbar as my action bar.
MainActivity.java:
private CharSequence mTitle;
private FragmentTabHost mTabHost;
private Toolbar toolbar;
private ListView mDrawerList;
private DrawerLayout mDrawerLayout;
FrameLayout frameLayout;
DrawerLayout Drawer; // Declaring DrawerLayout
ActionBarDrawerToggle mDrawerToggle; // Declaring Action Bar Drawer Toggle
String TITLES[];
int ICONS[] = {R.drawable.drawer_back, R.drawable.drawer_settings,R.drawable.drawer_notifications, R.drawable.drawer_feedback};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TITLES = getResources().getStringArray(R.array.menu_array);
mTitle = getTitle();
toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
frameLayout = (FrameLayout) findViewById(R.id.frame_layout);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
mDrawerList.setAdapter(new ArrayAdapter<>(this,
R.layout.item_row, TITLES));
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
mDrawerToggle = new ActionBarDrawerToggle(this,Drawer,R.string.openDrawer,R.string.closeDrawer){
public void onDrawerClosed(View view) {
getSupportActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
getSupportActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
}
main_activity.xml:
<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">
<FrameLayout 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:id="#+id/frame_layout"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
></include>
<include
android:id="#+id/gm_header"
layout="#layout/gm_header"
></include>
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/LinearLayout01"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:background="#color/ColorPrimaryDark"
android:layout_weight="0"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</FrameLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

First, there's two DrawerLayouts declared, one called Drawer and one called mDrawerLayout. I'm going to use mDrawerLayout.
In the Drawer Toggle constructor, you can associate the toggle with the DrawerLayout and the Toolbar by declaring it with mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.openDrawer, R.string.closeDrawer){
// rest of code
Then add another couple of lines
If you want the icon to change between a hamburger and an arrow when the drawer opens and closes use this listener:
mDrawerLayout.setDrawerListener(mDrawerToggle);
call syncState to put the button and drawer into the same state(open or closed):
mDrawerToggle.syncState();

You can achieve proper "back" navigation by handling the click events of the menu items. The one you're talking about in Android is referred as the Up button which is known as the home menu item. Add this code to your Activity and you'll be able to go back from the current Activity to the previous one:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
Now there are way better ways to handle the UP navigation than this. This approach simply kills the current Activity you see which will end up behaving like a back navigation as you'd like to call it.
Please refer to this section from the Android documentation to understand what's the difference between
Back:
and Up:
Once you understand the difference, you can check out this section to understand how the proper Up navigation should be handled.
Cheers!

android.view.InflateException: Binary XML file line #7: Error inflating class Toolbar

I am trying to use ToolBar (Lollipop Widget) using android.support.v7 library.
But while running an app getting an error.
android.view.InflateException: Binary XML file line #7: Error inflating class Toolbar
My main goal is to have a navigation drawer using toolbar.
This is the Layout file which i am using :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frame_container1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Toolbar android:id="#+id/toolbar" <------ line #7
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/status" ></Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" >
<!-- Framelayout to display Fragments -->
<RelativeLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:dividerHeight=".02dp"
android:background="#000000"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
I am using following code :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
adapter = new ArrayAdapter<String>(getApplicationContext(), android.R.layout.simple_list_item_1, new String[]{""});
//mDrawerList.setAdapter(adapter);
t=(Toolbar) findViewById(R.id.toolbar);
//getActionBar().setDisplayHomeAsUpEnabled(true);
//getActionBar().setHomeButtonEnabled(true);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.string.app_name, // nav drawer open - description for accessibility
R.string.app_name // nav drawer close - description for accessibility
) {
public void onDrawerClosed(View view) {
// calling onPrepareOptionsMenu() to show action bar icons
// invalidateOptionsMenu();
super.onDrawerClosed(view);
}
public void onDrawerOpened(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
Please help.

Use
<android.support.v7.widget.Toolbar />
instead of
<Toolbar />

Including row at the bottom of Navigation drawer

I have a navigation drawer from here:
reference link
I want to add "settings" and "exit" at the end of the navigation list but I can't.
Here is my code for drawer activity_main.xml:
`
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"
android:background="#color/list_background"/>
</android.support.v4.widget.DrawerLayout>`
I tried adding text to the end of the ListView and wrap them in RelativeLayout with aligning to the bottom. But no success so far.
This is my main activity:
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_main);
mTitle = mDrawerTitle = getTitle();
// load slide menu items
navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);
// nav drawer icons from resources
navMenuIcons = getResources()
.obtainTypedArray(R.array.nav_drawer_icons);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.list_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();
mDrawerList.setOnItemClickListener(new SlideMenuClickListener());
// 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_drawer, //nav menu toggle icon
R.string.app_name, // nav drawer open - description for accessibility
R.string.app_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);
}
}
...
I just want to add another row at the end of the list in navigation drawer separated from the rest of the list. something like this:

DrawLayout takes two children, one main display, the other the drawer, so you have wrap everything in two viewGroups.
The special attributes like gravity start need to be in the relative layout now, since it is now the direct child of DrawerLayout.
.....
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
>
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_above="#+id/button2"
/>
<Button
android:id="#+id/button2"
android:layout_height="50dp"
android:text = "button2"
android:layout_width="match_parent"
android:layout_above="#+id/button1" />
<Button
android:id="#+id/button1"
android:layout_height="50dp"
android:text = "button1"
android:layout_width="match_parent"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>

I think You should add drawer list in linear layout. just like below
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/ne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/setting_background"
android:orientation="vertical" >
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_gravity="start"
android:layout_weight=".85"
android:background="#color/list_background"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_alignParentBottom="true"
android:layout_below="#+id/newslist_drawer"
android:layout_weight=".15"
android:orientation="horizontal" >
<Button
android:id="#+id/newslist_done"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:text=" setting"
android:visibility="gone" />
<Button
android:id="#+id/newslist_cancel"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:text=" exit"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.DrawerLayout>

For the people who is still looking for a complete answer. Here is a few points.
1) if you add a linearlayout or relativelayout as a container, don't forget marking the container layout as start - this is key to let drawerlayout treats the container as a sliding drawer, or you will receive an error.
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
>
2) declare a global variable for this container layout, get a reference to it in onCreate(), something like :
RelativeLayout mRelativeLayout;
public void onCreate(){
mRelativeLayout = ..
}
3) there are at least 3 places you need to use the relativelayout.
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, //nav menu toggle icon
R.string.app_name, // nav drawer open - description for accessibility
R.string.app_name // nav drawer close - description for accessibility
) {
public void onDrawerClosed(View view) {
getActionBar().setTitle(mTitle);
// calling onPrepareOptionsMenu() to show action bar icons
mDrawerLayout.close(mRelativeLayout);
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle(mDrawerTitle);
// calling onPrepareOptionsMenu() to hide action bar icons
mDrawerLayout.open(mRelativeLayout);
invalidateOptionsMenu();
}
};
The last one is the selectedItem method call
mDrawerLayout.closeDrawer(mContainerLayout);

Late response! But i have just been working on something very similar that solves this issue without modifying the xml at all.
Each drawerlayout has a addHeader(View v) function and an addFooter(View v) function. They accept inflated views as their param.
View footer = getLayoutInflater().inflate(R.layout.comic_drawer_footer, null);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_content);
mDrawerList = (ListView) findViewById(R.id.bookmark_list);
mDrawerList.addFooterView(footer);

NavigationDrawer and ViewPager in the same Activity in Android

I am trying to create a NavigationDrawer as well as having a ViewPager with sliding tabs in an activity using ActionBarSherlock. I have the tabs and I have created layouts for the view pager and the drawer layout. I know that what I have is that the viewpager layout and drawerlayout are in seperate files and they should probably be in the same file to find the view. Although I do not know how to do this with the code that I have.
I have done a lot of research as to how to do this and the standard pattern is to not do this, although as many people have pointed out, Google Play Music does this. I want my application to look like that and I know that there is a workaround as people have suggested. I am just unsure on how the workaround works with ActionBarSherlock and the code that I currently have implemented. Please can anyone help me with this. Thank you in advance.
Here is my activity code:
public class SlidingTabsActivity extends SherlockFragmentActivity
{
private ViewPager viewPager;
private TabsAdapter tabsAdapter;
private ActionBar actionBarTabs;
/* Navigation drawer */
private DrawerLayout drawerLayout;
private ListView drawerListView;
private ActionBarDrawerToggle drawerToggle;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
viewPager = new ViewPager(this);
viewPager.setId(R.id.pager);
setContentView(viewPager);
/* Navigation Drawer */
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerListView = (ListView) findViewById(R.id.left_drawer);
System.out.println("Drawer Layout test:" + drawerLayout.getId());
drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
drawerListView.setAdapter(new ArrayAdapter<String>(this, R.layout.navigation_drawer_list_item, R.array.navigation_drawer_list));
drawerListView.setOnItemClickListener(new OnItemClickListener()
{
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
// TODO Auto-generated method stub
}
});
actionBarTabs = getSupportActionBar();
actionBarTabs.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBarTabs.setDisplayHomeAsUpEnabled(true);
actionBarTabs.setHomeButtonEnabled(true);
drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close)
{
public void onDrawerClosed(View view)
{
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView)
{
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
drawerLayout.setDrawerListener(drawerToggle);
tabsAdapter = new TabsAdapter(this, viewPager); // Declares the tabs adapter class with the view pager view
/* Adds fragments to the tabs adapter */
tabsAdapter.addTab(actionBarTabs.newTab().setText("PV"), Fragment_1.class, null);
tabsAdapter.addTab(actionBarTabs.newTab().setText("CONFIG"), Fragment_2.class, null);
tabsAdapter.addTab(actionBarTabs.newTab().setText("DIAG"), Fragment_3.class, null);
}
Here is my DrawerLayout layout xml code:
<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">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
And here is my ViewPager layout xml code:
<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"
tools:context=".SlidingTabsActivity" >
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pager" />
</RelativeLayout>

Firstly, your Activity has both Navigation Drawer and ViewPager, but I saw you put the layout descriptions in different xml files. But, you must put only one xml file for your Activity.
Considering this, the key point now is: "how to declare DrawerLayout and ViewPager in the same xml?". If you put in wrong order it won't work (I had this same problem, that's why I'm alerting you). So, the answer is to declare the DrawerLayout as root and inside it, the ViewPager, and later, after closing the ViewPager "tag", you declare the ListView of DrawerLayout.
An example:
<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">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<ListView android:id="#+id/drawer_list"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111" />
</android.support.v4.widget.DrawerLayout>
I hope the answer helps you.

DrawerLayout is hidden below the GridView

I try to implement the latest drawer layout from support library 13.
With the following code, the drawer is always showing below the gridview. Even I try to call bringToFront() still not working. Can help to find what's wrong? Thanks.
activity_main.xml
<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">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
member_home_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<GridView
android:id="#+id/member_home_thumbnail_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="0dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp" >
</GridView>
</LinearLayout>
The main activity:
public class BaseRootActivity extends BaseActivity {
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private String[] mMainMenus;
public ListView getDrawerListView() {
return this.mDrawerList;
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mMainMenus = this.getResources().getStringArray(R.array.main_menu_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) this.findViewById(R.id.left_drawer);
// set up the drawer's list view with items and click listener
mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mMainMenus));
// enable ActionBar app icon to behave as action to toggle nav drawer
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
// ActionBarDrawerToggle ties together the the proper interactions
// between the sliding drawer and the action bar app icon
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
public void onDrawerClosed(View view) {
getActionBar().setTitle("actionbar title");
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle("drawer title");
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
...
in main fragment
public class MemberHomeFragment extends Fragment implements OnItemClickListener {
private GridView mGridListView;
private UserThumbnailAdapter memberAdapter;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.member_home_layout, container, false);
mGridListView = (GridView) rootView.findViewById(R.id.member_home_thumbnail_grid);
mGridListView.setOnItemClickListener(this);
memberAdapter = new UserThumbnailAdapter(this.getActivity(), null);
mGridListView.setAdapter(memberAdapter);
this.startLoading(); // load thumbnails
return rootView;
}

So this isn't a problem with the way you are using the drawer layout as I mentioned earlier. It's a problem with the way you are using fragments. The way the FragmentManager works is you create a fragment transaction, and you tell the fragment transaction a set piece of work and then you commit it, so that it all happens at once.
When you add, remove, or in your case Replace a fragment you have to tell the FragmentManager where to put your fragment, and you were giving it the wrong location. You were telling it to put your fragment inside android.R.id.content, a place that ALL of the content on the screen lives inside. You only want to add a fragment to one your own containers. The fact that the ID you specified (android.R.id.content) begins with 'android', is a big giveaway that it is the android systems, and not yours.
You instead want to put it in the location inside of your navigation drawer that you specified, which is R.id.content_frame. You can see how you specified that in your xml above, which I will copy here for you:
<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">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>

I cannot understand but here is the issue:
As #spierce7 pointed out, the way I call fragment replacement is not correct (but why?)
My code is:
getFragmentManager().beginTransaction().replace(android.R.id.content, new MemberHomeFragment()).commit();
and when I changed to:
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.content_frame, new MemberHomeFragment()).commit();
It works.