Develop Reference

Navigation drawer with user header in android

try to get this(the header with the picture) :
And this is my code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:id="#+id/drawerLayout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:textColor="#000"
android:text="Activity Content"
android:layout_height="wrap_content" />
<com.shamanland.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
app:floatingActionButtonColor="#000000"
app:floatingActionButtonSize="mini"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="16dp"
android:layout_marginBottom="20dp"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:layout_gravity="left|start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/top_control_bar">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="bababababbababababbababababba"/>
</RelativeLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="1dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
I don't know if i have to create a new layout above the list or something else.
I've seen that there is a listview header in android but this doesn't work in my example.
Thanks for your help

Try the Below code......
<RelativeLayout
android:layout_gravity="left|start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/top_control_bar">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="bababababbababababbababababba"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/top_control_bar1">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ur_image" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Your Text"
android:textColor="#FFFFFF"
android:textSize="38px" />
</RelativeLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/top_control_bar1"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="1dp" />
</RelativeLayout>

You will need to create a simple LinearLayout which contains a List. Here's an example:
<LinearLayout
android:id="#+id/linearDrawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/navigation_items"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/userContent"
android:layout_width="260dp"
android:layout_height="150dp"
android:background="#color/black"
android:gravity="center_vertical"
android:paddingRight="10dp">
<RelativeLayout
android:id="#+id/userDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent">
<ImageView
android:id="#+id/ImgDrawer"
android:layout_width="260dp"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:contentDescription="#string/dummy_user_description"
android:scaleType="centerCrop"
android:src="#drawable/ic_user" />
<RelativeLayout
style="#style/textView_title_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/txt_user_name_drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/dummy_username"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
<TextView
android:id="#+id/txt_user_lastname_drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_user_name_drawer"
android:text="#string/dummy_user_description"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<View
android:id="#+id/viewSeparator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/blue_dark" />
<ListView
android:id="#+id/listDrawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/navigation_items"
android:cacheColorHint="#color/transparent"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="1dp" />
The Layout itself contains the FrameLayout (Content) and the Drawer.
Sample:
<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"
tools:context="com.androiddevworker.rateit.view.RatingActivity">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:name="com.androiddevworker.rateit.view.fragments.RatingNavigationDrawerFragment"
tools:layout="#layout/navigation_main_include" />
In your activity you can get it by using
private RatingNavigationDrawerFragment mRatingNavigationDrawerFragment;
mRatingNavigationDrawerFragment = (RatingNavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
while the RatingNavigationDrawerfragment (example) is just a simple fragment.

button not showing inside a drawer

i defined a drawer that works fine, but when i' ve added a button this one is not shown, and i don't understand why.
I want this button to stay at the bottom of the list view.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/right_drawer_for_boundary"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#123456"
android:orientation="vertical"
android:visibility="visible" >
<TextView
android:id="#+id/text_for_radius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/activatedBackgroundIndicator"
android:gravity="center"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/set_radius"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#fff" />
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="10dp"
android:max="5"
android:progress="0" />
<ListView
android:id="#+id/right_boundary_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#123456"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="5dp" />
<Button
android:id="#+id/button_boundary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="10dp"
android:text="#string/confirm_boundary" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
naturally i get the button via setButton((Button) findViewById(R.id.button_boundary));
so why is it not showing?

<ListView
android:id="#+id/right_boundary_list_view"
android:layout_width="match_parent"
android:layout_height="0dip"
android:background="#123456"
android:layout_weight= "1"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="5dp" />

As Suhail Mehta said, your ListView is covering the button, just change your code to this:
<ListView
android:id="#+id/right_boundary_list_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="right"
android:background="#123456"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="5dp" />
The weight property will tell the ListView to take all remaining space on the screen but without covering any other widget

It would be better to use the RelativeLayout.
Example xml code would be something like:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/right_drawer_for_boundary"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#123456"
android:visibility="visible" >
<Button
android:id="#+id/button_boundary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="10dp"
android:alignParentBottom="true"
android:text="#string/confirm_boundary" />
<LinearLayout
android:layout_below="#id/button_boundary"
android:orientation="vertical" >
<!-- TextView, SeekBar and ListView here -->
</LinearLayout>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Hope it helps.

how to add title to navigation drawer in android

I have created a navigation drawer having a listview with icon and text. Now, I want to add a title above it and also another below it. Below are two xml I have used:
<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">
<!-- <fragment
android:id="#+id/badMap"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.SupportMapFragment" /> -->
<FrameLayout
android:id="#+id/testFrame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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" >
</FrameLayout>
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="200dp"
android:layout_height="wrap_content"
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>
</FrameLayout>
</RelativeLayout>
And:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#drawable/list_selector">
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:layout_marginTop="0dp"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="55dp"
>
<ImageView
android:id="#+id/drawerIcon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/desc_list_item_icon"
android:src="#drawable/high"
android:layout_centerVertical="true"
android:gravity="center" />
<TextView
android:id="#+id/drawerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/drawerIcon"
android:gravity="center"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:layout_centerVertical="true"
android:text="#string/drawerlistTitle"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/list_item_title" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#DADADC"
></View>
</LinearLayout>
</RelativeLayout>
Any ideas on how to add a titles in this?

It's simple actually :-)
Instead of using a ListView as your drawer, you can wrap the ListView in a RelativeLayout for instance like this:
<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" >
<FrameLayout
android:id="#+id/testFrame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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" >
</FrameLayout>
<!-- Listview to display slider menu -->
<RelativeLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title" />
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/titleTextView"
android:layout_above="#+id/titleUnderListView"
android:layout_gravity="start"
android:background="#color/list_background"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector" />
<TextView
android:id="#+id/titleUnderListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="SubTitle" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
</RelativeLayout>
You can put whatever you like as the layout for the NavigationDrawer - the sky is the limit :-)
Another solution could be to add a header and footer to your current ListView, but then it wouldn't be fixed on top or the bottom.

Android navigation drawer in releative layout

i working navigation drawer.i successfully created my navigation drawer and program working.
now i want to add Edittext in activity_main.xml file to above ListView.this is a my activity_main.xml code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:orientation="vertical" >
<android.support.v4.widget.DrawerLayout
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" >
</FrameLayout>
<EditText
android:id="#+id/card_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dip"
android:gravity="center"
android:hint="Enter text"
android:padding="10dip"
android:singleLine="true"
android:textSize="15dp" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#191919"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
how i can add edittext to be above listview?

Here is your updated code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:orientation="vertical" >
<android.support.v4.widget.DrawerLayout
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" >
</FrameLayout>
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical" >
<EditText
android:id="#+id/editField"
android:layout_width="match_parent"
android:layout_height="40dp" />
<ListView
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#191919"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

You can add your editText on Header ListView

I don't thinks that's a very good idea. If that text field is common for all fragments, then you should consider placing it in ActionBar.

Use Linearlayout to add edittext above listview
<LinearLayout
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/darker_gray"
android:layout_gravity="start" >
<EditText
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:textSize="20sp"
android:hint="Search"
android:imeOptions="actionSearch"
android:imeActionLabel="Search"
android:drawableRight="#drawable/ic_action_search" >
</EditText>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice" />
</LinearLayout>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com /apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:orientation="vertical">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_menu"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<EditText
android:id="#+id/card_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dip"
android:gravity="left"
android:hint="Enter text"
android:padding="10dip"
android:singleLine="true"
android:textSize="15dp"
/>
</RelativeLayout>
<include layout="#layout/adapter_drawer" />
</android.support.v4.widget.DrawerLayout>
Your adapter_drawer.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/left_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/red"
>
<EditText
android:id="#+id/card_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dip"
android:gravity="left"
android:hint="Enter text"
android:padding="10dip"
android:singleLine="true"
android:textSize="15dp"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RelativeLayout
android:id="#+id/row_1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_weight="20">
<ImageView
android:id="#+id/picture_1"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/space_2_x"
android:clickable="true"
android:contentDescription="#string/app_name"
android:padding="#dimen/space_2_x"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/text_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/picture_1"
android:layout_centerHorizontal="true"
android:clickable="true"
android:gravity="center"
android:text="Home"
android:textColor="#color/white"
android:textSize="#dimen/text_size_small"
/>
</RelativeLayout>
</RelativeLayout>

How to fix this navigation drawer issue

How to fix that http://lookingfor.bugs3.com/Screenshot_2014-05-11-13-39-25.png
How to fix that?
I enabled the transparent statusbar with Theme.Holo.Light and got the Fragment displaying fixed, but not the Navigation drawer. How can I fix that?
Here are my activity_main.xml and drawer_list_item.xml
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 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:fitsSystemWindows="true"
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"/>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:fitsSystemWindows="true"
android:background="#drawable/list_selector">
<ImageView
android:id="#+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/desc_list_item_icon"
android:src="#drawable/ic_home"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_toRightOf="#id/icon"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/list_item_title"
android:gravity="center_vertical"
android:paddingRight="40dp"/>
<TextView android:id="#+id/counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#drawable/counter_bg"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"
android:textColor="#color/counter_text_color"/>

You can fix this problem by encapsulating your activity_mail.xml to a FrameLayout.
When you do that, this is where you set the "fitsSystemWindows=true".
So, in other words, your activity_main.xml should be like:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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 -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/list_background"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector" />
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
Your drawer_list_item.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#drawable/list_selector">
<ImageView
android:id="#+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/desc_list_item_icon"
android:src="#drawable/ic_home"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/icon"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/list_item_title"
android:gravity="center_vertical"
android:paddingRight="40dp"/>
<TextView android:id="#+id/counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/counter_bg"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"
android:textColor="#color/counter_text_color"/>
</RelativeLayout>