Develop Reference

How implement CoordinatorLayout and toolbar in NavigationView

Can it be implemented: Toolbar in NavigationView by using the CoordinatorLayout
Is the code correct?
Please give me an example and help me to do that
See the photo for better understanding
picture
activity_main.xml
<!-- notation start -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout >
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- content -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton/>
</android.support.design.widget.CoordinatorLayout>
<!-- notation end-->
<!-- 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:headerLayout="#layout/nav_header_activity_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
nav_header_activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/><!-- background Toolbar-->
<android.support.v7.widget.Toolbar>
<!-- app:layout_collapseMode="pin" -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- START content NavigationView header -->
<LinearLayout>
<ImageView/>
<TextView/>
<TextView/>
</LinearLayout>
<!--END content NavigationView header -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton/>
</android.support.design.widget.CoordinatorLayout>
menu/activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item/>
<item/>
</group>
<item android:title="Communicate">
<menu>
<item/>
<item/>
</menu>
</item>
<!-- 20 item in menu -->
</menu>
Any help will be appreciated. Thanks.

you are missing some attributes in above xml code
1- you did not set layout_height and layout_width for appbarlayout, CollapsingToolbarLayout and NestedScrollView.
your activity_main should be like below:
<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" />
<!--specify your header layout in 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:headerLayout="#layout/nav_header_activity_main"
app:menu="#menu/activity_main_drawer" />
2 - your nav_header_activity_main.xml layout should be set in NavigationView like (app:headerLayout="#layout/nav_header_activity_main.xml") and you should just put widget for header content and you should get rid of those coordinatelayout, appbar, collapsingtoolbar and toolbar in nav_header
app_bar_main.xml (Navigationbar Layout)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- define layout for main content here with NestedScrolView-->
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

Recyclerview content goes behind navigation bar

I have a typically problem since Android Lollipop. But I already tried everything.
I have this 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"
tools:openDrawer="start"
android:fitsSystemWindows="true"
>
<include
layout="#layout/activity_main_content"
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"
app:headerLayout="#layout/nav_header_activity_main"
app:itemTextColor="#color/nav_selected"
app:itemIconTint="#color/nav_selected"
app:menu="#menu/activity_main_drawer"
>
</android.support.design.widget.NavigationView>
<android.support.design.widget.NavigationView
android:id="#+id/filter_nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
app:itemTextColor="#color/nav_selected"
app:itemIconTint="#color/nav_selected"
app:menu="#menu/activity_consoles_drawer"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
In the activity_main_content I have this:
<android.support.design.widget.CoordinatorLayout
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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.robinstrutz.gamereleases.Activities.Activity_Main">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary"
android:elevation="3dp"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<ProgressBar
android:id="#+id/loading_bar"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/progress_drawable"
android:indeterminate="true"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_settings_white_24dp"
android:layout_gravity="center_horizontal|bottom"
android:layout_margin="10dp"
app:backgroundTint="#color/colorAccent"
android:tint="#color/colorPrimary"
app:borderWidth="0dp"
app:elevation="3dp"
android:transitionName="fab"
android:stateListAnimator="#animator/raise"
/>
</android.support.design.widget.CoordinatorLayout>
In my code I'm doing a typical initialization for a RecyclerView and nothing that changes the window settings/features or else. So now the content of my RecyclerView are going to the bottom of the screen behind the navigation bar. I already tried using fitSystemWindows, clipToPadding and clipToChildren.
I thought my style brings this fail but how it looks it doesn't:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/background</item>
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:textSize">14sp</item>
<item name="android:fontFeatureSettings">smcp, onum</item>
<item name="android:letterSpacing">0.02</item>
</style>
Any suggestions how to fix this without adding layout_marginBottom to RecyclerView? Because of the height difference from the navigation bar on different devices.

This could be the result of using app:layout_scrollFlags="scroll|enterAlways" when setting up the Toolbar.
With this setting on, the layout height below the Toolbar is larger than what is visible on your device. It includes some extra to allow smooth scrolling when the Toolbar is scrolled up.
If your Activity/Fragment does not need to scroll the content, a fix would be to simply remove the 'scroll' flag (app:layout_scrollFlags="enterAlways").

Views overlapping with toolbar

I have a simple app with one Activity. Currently Views are overlapping with my toolbar:
I want Views to go under the toolbar, not into it. How do I do this?
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="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</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" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="asdasdasdasd"/>
</android.support.v4.widget.DrawerLayout>
styles.xml: (note the windowDrawsSystemBarBackgrounds)
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>

Not the right way of using DrawerLayout. The first view should contain the content you want to show the user. Later you can add drawers. For your example, you can use the following:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.CoordinatorLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="asdasdasdasd"/>
</LinearLayout>
<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.support.v4.widget.DrawerLayout>

Put the textview inside the CoordinatorLayout after the toolbar. That's where the main content of the Activity goes. If you use the Android Studio template, it creates a content_main.xml file for you, and will include it there.
For example,
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Of course, you can do the same without the include tag, or separate XML layouts, but it's cleaner file organization if you do.
Currently, you have the textview as part of the DrawerLayout and it will probably move over as you expand the NavigationView. Obviously, not what you want.

Android draw status bar

So I'm trying to get my app drawing under the status bar. Not quite sure how to achieve this though...
Current layout XML:
<LinearLayout 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:orientation="horizontal"
tools:context=".activity.CharacterActivity">
<ImageView
android:id="#+id/img_header"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<android.support.design.widget.CoordinatorLayout 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"
tools:context=".activity.CharacterActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_character" />
</android.support.design.widget.CoordinatorLayout>
The style used for the layout:
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
A screenshot of what I'm getting:
And a quickly edited screenshot of what I want to be getting:
Any suggestions or pointers would be fantastic!

Well I've just discovered how to do almost exactly what I wanted to. All I had to do was remove the android:fitsSystemWindows="true" attribute and all worked out fine.

Why android toolbar height is cut?

I am new to the design pattern in latest android studio,the one with include
tag.I tried tweaking the files but ended up with cut toolbar.
First Activity
first_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar_main" android:layout_width="match_parent"
android:layout_height="wrap_content" />
<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">
<!-- 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/main_nav_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#888"
android:dividerHeight="1dp"
android:background="#fff"/>
<!--android:listSelector="#drawable/list_selector"-->
</android.support.v4.widget.DrawerLayout> </LinearLayout>
Here's my app bar layout.
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
tools:context=".Activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Change your toolbar XML this way:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
Notice that minHeight disallows smaller sizes, and the wrap_content height now allows bigger toolbars.

Remove fitSystemWindows Attribute from your theme
<item name="android:fitsSystemWindows">true</item>

Try this...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<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">
<!-- 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/main_nav_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:choiceMode="singleChoice"
android:divider="#888"
android:dividerHeight="1dp" />
<!--android:listSelector="#drawable/list_selector"-->
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

Change your app_bar_main layout as below -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.bits.ketan.geocoding.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</LinearLayout>

I am new to the design pattern in latest android studio,the one with
include tag.I tried tweaking the files but ended up with cut toolbar
I've had the similiar problem, it's working on real devices by the way.
And, Try to use
<include layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
inside your DrawerLayout with that Toolbar inside the AppBarLayout
Check the following links:
http://developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout
To add a navigation drawer, declare your user interface with a
DrawerLayout object as the root view of your layout. Inside the
DrawerLayout, add one view that contains the main content for the
screen (your primary layout when the drawer is hidden) and another
view that contains the contents of the navigation drawer.
And, use NavigationView instead of that ListView.
A good example:
http://developer.android.com/intl/es/reference/android/support/design/widget/NavigationView.html
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>