Develop Reference

TabLayout in Navigation Drawer is overlapping the Tolbar

I have used Navigation Drawer activity and implemented TabLayout but when application runs the toolbar is not visible only the tablayout in place of toolbar. But in preview pane toolbar is visible this happens when I run this app on a device. Help me out please
This is app_bar_main.xml
<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="wrap_content"
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="#color/colorToolbar"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
>
<ImageView
android:layout_width="#dimen/_40sdp"
android:layout_height="match_parent"
android:src="#drawable/logo_shopline"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="ShopLine"
android:gravity="center"
android:textSize="#dimen/_18sdp"
android:textColor="#color/colorShopLineText"
android:paddingLeft="#dimen/_2sdp"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
Here is content_main.xml
<RelativeLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
app:tabMode="fixed"
app:tabGravity="fill"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/appBarLayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

It's actually because of two AppBarLayouts you have which android might not recognize the layout you have written.
Simply, remove the other AppBarLayout and make your layout like this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="#color/colorToolbar"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<ImageView
android:layout_width="#dimen/_40sdp"
android:layout_height="match_parent"
android:src="#drawable/logo_shopline" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="ShopLine"
android:gravity="center"
android:textSize="#dimen/_18sdp"
android:textColor="#color/colorShopLineText"
android:paddingLeft="#dimen/_2sdp" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>

Please correct the line "layout_below"
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appBarLayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

TabLayout is not shown under Toolbar

This layout is incorrect. I placed Tablayout inside CollapsingToolbar to make sure it is visible:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray_background"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="234dp"
android:id="#+id/promo_detail_appbar"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/promo_detail_collapsing_toolbar"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
app:expandedTitleMarginBottom="40dp"
app:expandedTitleMarginStart="20dp"
app:collapsedTitleTextAppearance="#style/CollapsedToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/header"
android:background="#drawable/promo_background"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#android:color/white"
android:text="Королевский фарфор"
android:layout_marginBottom="15dp"
android:layout_marginStart="20dp"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
/>
<LinearLayout
<!-- other views here-->
</LinearLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tablayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:layout_gravity="bottom"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/promo_detail_toolbar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f1efef"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is how it looks now
I need Tablayout to appear under toolbar in both expanded and collapsed states. Any help would be appreciated. Thank you.

Try this one
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:stateListAnimator="#null"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_design"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/white"
app:tabTextAppearance="#style/TextAppearance.Subhead.Bold"
app:tabTextColor="#910b32"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchorGravity="bottom"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Android CollapsingToolbarLayout with Toolbar and TabLayout

I'm making an application which uses CollapsingToolbarLayout with Toolbar and TabLayout.
I want to place the TabLayout to below Toolbar when the header is collapsed.
However, When I try to scroll the view, TabLayout overlays the Toolbar like this linked picture:
I want to make it like this linked picture when I scroll:
My code for the layout is below:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
android:layout_height="#dimen/mypage_header_height"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold"/>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
How can I solve this problem?

Try:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="#dimen/mypage_header_height" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

I solved this problem by using expedient. I made 2 toolbars including the original one. and I made one of those transparent. then, It looks working fine but I think it is not clear way.

CollapsingToolbarLayout + TabLayout, strange toolbar title margin

I have a srange toolbar title behaviour that I doubt to be valid.
collapsed :
extended :
The strangest part is that the
app:titleMarginTop
does not have any effect on the title placement.
Here is my 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.m360learning.app.activity.UserDetailsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/background_navigation_drawer"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerInside" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</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.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Any help would be greatly appreciated.
Thanks
---Edit :
If I set the toolbar size to "actionbarsize"
And it doesn't change the expanded behaviour.
------------ FINAL EDIT -- CORRECTION
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_navigation_drawer"
android:fitsSystemWindows="true"
android:paddingBottom="?attr/actionBarSize"
android:paddingEnd="30dp"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:paddingStart="30dp"
app:layout_collapseMode="parallax">
......
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="#99FFFFFF"
app:tabIndicatorHeight="6dp"
app:tabMode="fixed" />
</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>

I think your TabLayout should be outside your CollapsingToolbarLayout while still inside your AppBarLayout:
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.AppBarLayout>
A tab section is part of the app bar, but not part of the tool bar.

#kris larson answer is ok but unfortunatelly doesn't work if we want transparent parallaxed TabLayout background. To make it works you need to do as follows:
add expandedTitleMarginBottom to CollapsingToolbarLayout
set layout_height to TabLayout as constant value
add layout_marginBottom to Toolbar with same value as TabLayout height
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginBottom="56dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

How to put NestedScrollView under AppBarLayout as a background?

I want to put NestedScrollView under AppBarLayout as a background.
Like GooglePlayPress: google play press screen
My application: my app screen
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#123456"
android:scaleType="centerCrop"
android:src="#drawable/nav_header_bg" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:tabContentStart="0dp"
app:tabMode="scrollable"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:itemIconTint="#color/nav_item_icon_tint_color"
app:itemTextColor="#color/nav_item_text_color"
app:menu="#menu/navigation_drawer_items" />
How to implement an animated image in the background, which scrolls along with the content?