Develop Reference

Grey rectangle shown on drawer NavigationView when hiding android home buttons

My screen doesn't show the android home buttons and I'm running Android 7.0. I see a grey rectangle in the bottom, the height of where the buttons would be:
activity_payment.xml:
<androidx.drawerlayout.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
tools:context=".ui.activities.PaymentActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/status_bar_height"
android:orientation="vertical">
</androidx.constraintlayout.widget.ConstraintLayout>
<include
android:id="#+id/navigation_layout"
layout="#layout/navigation_layout" />
</androidx.drawerlayout.widget.DrawerLayout>
I tried android:elevation="10dp" and android:translationZ="10dp":
navigation_layout.xml:
<com.google.android.material.navigation.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:elevation="10dp"
app:headerLayout="#layout/nav_header_main"
app:itemIconTint="#drawable/drawer_selector"
app:itemTextColor="#drawable/drawer_selector"
app:menu="#menu/navigation_drawer">
</com.google.android.material.navigation.NavigationView>
nav_header.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_header"
android:layout_width="match_parent"
android:layout_height="#dimen/nav_header_height"
android:orientation="vertical">
<ImageView
android:id="#+id/drawer_company_logo"
android:layout_width="wrap_content"
android:layout_height="38dp"
android:gravity="start"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:scaleType="fitStart"
android:layout_gravity="start"
android:paddingBottom="#dimen/padding_small"
app:srcCompat="?brandingLogo" />
</LinearLayout>

DrawerLayout
CoordinatorLayout
AppBarLayout
...
NavigationView
Try using it like this.
or try this
Grey bar appears on navigation drawer

Spinner can be clicked on top of Navigation menu

I have a navigation menu with some items. The problem that I am facing is the Spinner items and other UI elements which is underneath the menu when it is open remains clickable even when the menu is on top of those, as explained in the figure.
Here is my activity layout files.(activity_main.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">
<Spinner
android:id="#+id/delivery_area_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:background="#android:color/transparent"
android:gravity="center"
android:spinnerMode="dropdown" />
<include layout="#layout/layout_drawer_navigation" />
</RelativeLayout>
This is my navigation drawer layout.
<?xml version="1.0" encoding="utf-8"?>
<merge 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="wrap_content"
android:layout_height="wrap_content"
android:clickable="true">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<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"
app:headerLayout="#layout/layout_main_navigation_header"
app:menu="#menu/main_drawer_menu" />
</android.support.v4.widget.DrawerLayout>
I tried to look for solutions and found that for many people setting android:clickable="true" does the trick but in my case that is also not working.'

Custom layout with menu in NavigationView?

I need to create a navigation drawer such that, the first menu contains 5 pre-defined items (these will never change). Below that first menu, I want to have a second menu that contains a variable amount of items with a custom layout.
Explained in an image:
Here is what my main activity looks like right now:
<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="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_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="wrap_content"
android:orientation="vertical">
<include
layout="#layout/nav_header_drawer" />
<ListView
android:id="#+id/drawer_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Which works, except now I can't use the app:menu="#menu/navigation_drawer_items" property for NavigationView because the ListView items overlap the menu items.
Here is the menu XML:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Communicate">
<menu>
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="Share" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
Is there a way that I can load the menu XML AND show a custom layout below the menu? Is there a different want to do this?

NavigationView does not seem to have support for custom footers. In my project I have made this little monster based on some other SO answers.
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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:background="#color/colorPrimary"
android:fitsSystemWindows="true"
tools:context=".ui.MainActivity">
...screen content...
<android.support.design.widget.NavigationView
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:layout_gravity="bottom"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:elevation="0dp"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer">
</android.support.design.widget.NavigationView>
<View
android:layout_width="match_parent"
android:layout_height="21dp"
android:layout_alignParentBottom="true"
android:background="#drawable/bg_navbarscroll"/>
</RelativeLayout>
<include
android:id="#+id/premium_footer"
layout="#layout/drawer_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
What we have here are two nested NavigationViews. This may be a bit overkill but I wasn't able to make it work otherwise. This is based on the work in this question so all the credit goes there: How to add footer to NavigationView - Android support design library?
The real NavView is the inner one, it has the header, it has the menu, but it doesn't fit system windows. The first one fits system windows and handles the drawer movement. The problem you are facing is because the ListView does not know the size the content in NavView holds. So you need to make sure nothing is in the same layout so there is no overlapping. Your listView has to be in parent of the NavView parent. And because this will likely destroy the mechanism for controls of the DrawerLayout you need the first, outer NavigationView.
Alternatively if you can live without inflating menus in drawer just make a custom "old-fashioned" drawer like the ones before the NavigationViews appeared.

In my case I wanted to add some info text at the bottom of the drawer. After fiddling a bit I managed to obtain the desired result by adding a ConstraintLayout in the NavigationView:
<androidx.drawerlayout.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/bottom_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.navigation.NavigationView>
For now everything seems to be working, but there could be some hidden pitfalls.

A fixed (non-scrolling) footer in your navigation menu, can be achieved by wraping the NavigationView around another layout, like you've posted. you can arrange it, using LinearLayout for the footer items as shown below:
<android.support.design.widget.NavigationView
android:id="#+id/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<TextView
android:id="#+id/footer_item_1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Footer Item 1" />
<TextView
android:id="#+id/footer_item_2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center"
android:text="Footer Item 2" />
</LinearLayout>
</android.support.design.widget.NavigationView>
You can use whatever you want in place of the TextViews. Structuring your bottom layout well is necessary to avoid overlapping of views.
Menu XML
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Communicate">
<menu>
<item
android:id="#+id/nav_share"
android:icon="#drawable/ic_menu_share"
android:title="Share" />
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
You can finally add onclick listeners to your layout
View navFooter1 = findViewById(R.id.footer_item_1);
navFooter1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Do footer action
}
});
View navFooter2 = findViewById(R.id.footer_item_2);
navFooter2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Do footer action
}
});

This will help you must set your custom adapter in recyclerView.
<androidx.drawerlayout.widget.DrawerLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".DrawerActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/purple_200" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/header_layout" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

Different color in navigation drawer

I have used two color: light color #607D8B for app bar and dark color #455A64 for above appbar. But problem is, navigation drawer display two different color other then I mentioned. I don't know why the different color come to the navigation drawer. So, what can be done to solve this issue ?
content_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="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="80dp"
android:background="#455A64"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/ex_list_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:childDivider="#00000000"
android:divider="#null"
android:groupIndicator="#null" />
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Fixed navigation header in navigation drawer while scrolling through items

CURRENT STATE: NavigationDrawer with a NavigationHeader and NavigationMenu items. The items are large in number so scrolling is required in order to access the items towards the bottom.
REQUIREMENT: When scrolling down to the bottom, the NavigationHeader should stay fixed
Here's my activity_main layout file
<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="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#00000000"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
/>
</android.support.v4.widget.DrawerLayout>
Here's my navigation_header_main layout file
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#3d3b3b"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#drawable/categories"
android:padding="1dp"
/>
</RelativeLayout>
P.S I am new to android dev. Please ask for more resources if required

Found a workaround. Definitely not the most efficient one. Please suggest if anything could be done from here.
<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="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView>
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#00000000"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer">
<include layout="#layout/nav_header_main"
<android.support.design.widget.NavigationView>
Definitely works. But the header layout is redundant

I know its too old question but i sharing a solution that's working for me:
1. PLACE nav_header_main inside NavigationView
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer" >
<include layout="#layout/nav_header_main"/>
</android.support.design.widget.NavigationView>
2. ADD some empty item as suitable for your header height in #menu/activity_main_drawer file
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:enabled="false"
android:title=" " />
<item android:enabled="false"
android:title=" " />
<group android:checkableBehavior="single">
<item
android:id="#+id/home"
android:title="#string/home" />
......
</group>
</menu>

Hey guys I've come up with a solution for the nav_drawer and how we can implement the static nav_drawer without writing any extra coding.
I'm sharing git link of the project that I'm currently working on.
Thanks !!
Below is the activity_main.xml file and I've used Navigation View Menu
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_main_bg_shape"
android:orientation="vertical">
<Button
android:id="#+id/whats_cool"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="260dp"
android:layout_marginTop="400dp"
android:background="#drawable/buttonshape"
android:fontFamily="#font/delius_unicase"
android:shadowColor="#362802"
android:shadowDx="4"
android:shadowDy="3"
android:shadowRadius="10"
android:text="What's Cool"
android:textColor="#003931"
android:textSize="12sp" />
</LinearLayout>
<android.support.design.widget.NavigationView
app:headerLayout="#layout/nav_header"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/gray_white"
app:menu="#menu/nav_drawer"
android:layout_gravity="start"
app:itemTextColor="#color/darkBlue"
app:itemIconTint="#color/darkBlue"
>
<include layout="#layout/nav_header"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
And you don't need to make any changes into your header layout and nav_drawer.

Just wrap the navigation view into a linear layout
<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="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header_main"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#00000000"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer"/>
</LinearLayout>

Remove orientation from RelativeLayout. It doesn't support it
Set android:gravity="bottom" for parent RelativeLayout of header view.
My mistake, It will still scroll. You need to have custom recycler view for your navigation menu. So it scrolls in it's own container

<com.google.android.material.navigation.NavigationView
android:id="#+id/NavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_rectangle"
app:itemTextColor="#color/white"
app:headerLayout="#layout/hidder_layout"
app:itemIconTint="#color/purple_700"
android:layout_gravity="start"
app:menu="#menu/navigation_menu" >
<include
layout="#layout/hidder_layout"/>
</com.google.android.material.navigation.NavigationView>