Develop Reference

Use image as item in menu for Navigation Menu Drawer

I'm creating a project with Navigation Drawer Menu in Android, however, so far the menu only shows an icon and title in the menu.
How do I change the whole menu item to become an image with text inside?
Currently: the menu is:
However, I would prefer it to be like this:

You should use listview or recycler view in your NavigationView like this:
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/Mainheader"
layout="#layout/nav_header" />
<ListView
android:id="#+id/exp_navigationmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary" />
</LinearLayout>
</android.support.design.widget.NavigationView>
After that, set data in Listview.

You may use NavigationView#addHeaderView(View) API and provide your custom view as a content of NavigationView.
The alternative is to use app:headerLayout="#layout/your_layout" through xml.

Menu Drawer implementation android

Hi I am trying to implement a sliding drawer overlay in my android app. I have taken reference from this link:
https://github.com/SimonVT/android-menudrawer
and implemented a menu drawer in my activity. So my activity has 2 fragments in a viewPager with a TitlePageIndicator. When I click on a button in the fragment, the menu drawer opens. Currently the drawer overlays the titlePageIndicator as well. I would like to know to implement a menu drawer which opens/overlays below the title of the viewPager. Or is something like that not possible? Thanks for the help!

you can use below xml, you should define a layout below of your titlebar and set that for it:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.mhp.chek"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- main layout -->
<LinearLayout
android:id="#+id/base_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:orientation="vertical" >
<!-- for example your **viewpager** can define here -->
</LinearLayout>
<!-- drawer layout-->
<LinearLayout
android:id="#+id/drawer"
android:layout_width="300dp"
android:layout_height="fill_parent"
android:layout_gravity="end"
android:orientation="vertical" >
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
note that you need support library for this one.

How to set custom EmptyView for listview in Navigation Drawer

I want to show a custom view as empty view in my list view in Drawer Layout!
I create a view in xml like this and called it view_custom_empty.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="match_parent"
android:background="#FFff0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="NO RESULT"
android:textColor="#FFffffff" />
</RelativeLayout>
in my activity i set list view emptyview like this:
View emptyView = getLayoutInflater().inflate(R.layout.view_custom_empty, null);
ViewGroup viewGroup = (ViewGroup) drawerLayout.getParent();
viewGroup.addView(emptyView, 0);
drawerListview.setEmptyView(emptyView);
drawerListview.setAdapter(mDrawerAdapter);
But my custom empty view does not appear in my listview when it's empty!

I had the same Problem and finally found a solution to it.
You could actually set a separate layout.xml as an empty view, but then it won't be in the drawer, but inside the activity itself.
The activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:openDrawer="start">
<!-- Your activity content here-->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<!-- Your ListView you want to be shown if not empty-->
<ListView
android:id="#+id/left_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"/>
<!-- Here starts the empty view Layout-->
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFff0000"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="NO RESULT"
android:textColor="#FFffffff" />
</RelativeLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Add the empty_view to your list like this:
drawerListview.setAdapter(mDrawerAdapter);
drawerListview.setEmptyView(findViewById(R.id.empty_view));
Step by step on how to add an EmptyView to your list in the Navigation Drawer
Add your EmptyView (Layout) as a child of <android.support.design.widget.NavigationView inside the layout of your Navigation Drawer.
Set the Layouts/ Views visibility which holds the EmptyView to gone. In your case RealtiveLayout android:visibility="gone"
Add a Id to the Layout/View from point 2, you refer to in the activity
Add the EmptyView to your list like this: drawerListview.setAdapter(mDrawerAdapter);
drawerListview.setEmptyView(findViewById(R.id.empty_view));
Explanation:
The whole Navigation drawer actually works without <android.support.design.widget.NavigationView. But adding your list and the empty view as a child, makes sure the child items are inside the navigation drawer and not inside your content area. It also sets the Navigation drawer width automatically to match the Material design guidelines on all screen sizes.

As soon as you set your adapter to something not null, the empty view will be dismissed. You need to setAdapter when it's ready to be shown.

Image on top of navigation drawer

How can I put an image on top of navigation drawer like Google Play Store or Left sidebar on Google+?
Actually I have my own adapter for the navigation drawer, it put an icon for each element of the list view, and this is the current 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/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<ListView
android:id="#+id/left_menu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/menuBackground"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
I think I must add ImageView in this XML but I'm not sure if this is the correct way.

I've just found out how to implement this today (if you have not already solved this problem).
Took me hours to ask the right question
I think you're looking something like this
If so, you need to create a xml files to act as a header and add to the top of the listview.
so just create a header.xml
header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_first"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/hatsune" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Name"
android:background="#88f3f3f3"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="20dp"
android:background="#88f3f3f3"
android:text="Text Point"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Back to your activity lets say Activity.java
//Header of the listview, go to header.xml to customize
View header = getLayoutInflater().inflate(R.layout.header, null);
//addHeaderView is to add custom content into first row
yourListView.addHeaderView(header);
yourListView.setAdapter(yourAdapter);

I think I must add ImageView in this XML but I'm not sure if this is the correct way.
No, at least in my personal opinion that is not the correct way to implement it. Try to follow a approach like this.
Create a layout you want to add to the top of Navigation Drawer.
Add that layout as a header in your list using getListView().addHeaderView(headerView);
Hope this helps.. :)

ScrollView in content of DrawerLayout prevents the drawer to be opened by swiping

When I put ScrollView into the content of a DrawerLayout, I am nolonger able to open the drawer by swiping from the side.
Activity layout:
<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">
<!-- The menu_main content view -->
<FrameLayout
android:id="#android:id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- The navigation drawer -->
<ListView
android:name="com.gumtree.androidapp.DrawerFragment"
android:id="#+id/drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
In Activity's onCreate I add a fragment which has following layout:
<ScrollView
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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="160dp"
android:layout_width="match_parent"/>
<TextView
android:id="#+id/headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/headline_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/description_text_size"
android:padding="#dimen/detail_text_padding"
android:textIsSelectable="false"/>
</LinearLayout>
</ScrollView>
Without the ScrollView everything works fine and I am able to open the drawer by swiping from the side. However when I add the ScrollView, it stops working.

The problem here was silly named ID of FrameLayout used as content container of DrawerLayout. I used system ID (android.R.id.content) which caused that the content fragment was put on the top of all other views - even the drawer.
It also caused fragment's layout to overlap the drawer and - related to this question - blocked the drawer from receiving touch events. The touch events were taken by fragment's ScrollView.
Conclusion: DO NOT USE SYSTEM IDs (android.R.*) WHERE IT IS NOT NEEDED.
I just wanted it to look nice and clean.. Silly me :)