Develop Reference

How to add an ImageView below AppBarLayout under CoordinatorLayout?

I achieved this by adding android:layout_marginTop="112dp", is there any other way to get my ImageView just below the AppBarLayout like we do in RelativeLayout?
Also, I want this ImageView to have same drop shadow as the AppBarLayout has so the image will appear as the part of the AppBarLayout.
And I want the TextView to appear below the Image in LinearLayout.
Main Activity XML
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="112dp"
android:orientation="horizontal">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/under_tabs_triangle"/>
</LinearLayout>
<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"
app:srcCompat="#android:drawable/ic_dialog_email" />
Fragment Main XML
<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"
tools:context="com.example.dexbyte.player.MainActivity$PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Please check this image:

Also, I want this ImageView to have same drop shadow as the
AppBarLayout has so the image will appear as the part of the
AppBarLayout.
It can be possible by adding a CardView and the ImageView inside it or other ways for doing that but, if you want the both have the shadow, you'll probably need to remove AppBarLayout shadow since there will be shadow between the ImageView & AppBarLayout which won't look good.
And I want the TextView to appear below the Image in LinearLayout.
TextView is actually showing in the right position because you have added:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
To the ViewPager. So, everything's fine. To achieve what you want, you can add:
android:layout_marginTop="30dp" <!-- Or more ... -->
To the TextViewget to get it done.

How to put RecyclerView below Toolbar and above TabLayout and ViewPager also handling responses to scrolls in a custom manner?

I want to create a layout like the below image:
A CoordinatorLayout which contain :
CollapsingToolbarLayout( contain ImageView & Toolbar)
RecyclerView
TabLayout
ViewPager( that each fragment of it contain a RecyclerView)
I wanna responding to scroll events in this way:
CollapsingToolbarLayout expand and collapse by scrolling
Toolbar sticks to the top until TabLayout reach to the top
After that toolbar scroll up and TabLayout stick to the top
I'm having trouble with the RecyclerView between CollapsingToolbarLayout and TabLayout. I can implement this layout without that RecyclerView( I put CollapsingToolbarLayout and TabLayout inside the AppBarLayout and the ViewPager outside it, inside the CoordinatorLayout).
My Question:
Where should I put that RecyclerView?
Which & where layout_scrollFlags and layout_behavior should I set for each layouts?
It seems that AppBarLayout have a limited height. When I put the RecyclerView inside AppBarLayout, only a portion part of the RecyclerView is visible and also TabLayout disappear.
I read lots of tutorials like this one and lots of questions like this one and this one, but non of them help me.

use this as a main layout
activity_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout 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/swipe_refresh_layout_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="RtlHardcoded">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/co_profile_activity_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:visibility="visible">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_img_placeholder_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/rel_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop">
<ImageView
android:id="#+id/img_bg_placeholder_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:tint="#11000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />
<LinearLayout
android:id="#+id/lin_top_inner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BF473e6b"
android:orientation="vertical"
android:scaleType="centerCrop">
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:id="#+id/frame_detail_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3">
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_toolbar_height"
android:gravity="top|center"
app:layout_anchor="#id/frame_detail_profile"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/profile_toolbar_title_left_margin"
android:gravity="center_vertical|center"
android:ellipsize="end"
android:singleLine="true"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_profile"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginTop="#dimen/profile_tab_layout_top_margin"
android:background="#color/white"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/charcoal_grey" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
and for grid layout of tabs use adapter classes.

Start with AppBarLayout under which you add CollapsingToolbarLayout with scrollFlags="scroll|exitUntilCollapsed",
add LinearLayout with vertical orientation to CollapsingToolbarLayout and add the
FrameLayout with ImageView + Toolbar
RecyclerView
TabLayout

Two things to be done:-
When the search button is clicked, set the visibility of recycler view to VISIBLE
When the back button is pressed, set the visibility of recycler view to GONE
Following are the implementations:
1. Setting the visibility of recycler view to VISIBLE:
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.searchView) {
rView.setVisibility(VISIBLE);
}
return true;
}
2. Setting the visibility of recycle adapter to GONE
MenuItem searchMenuItem = menu.findItem(R.id.searchView);
MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
recyclerView.setVisibility(GONE);
return true;
}
});
NOTE: Do not forget to keep the visibilty as GONE initially when the activity is started

I know I might be late to this answer but I have also been trying to implement this for a while. The solution I have feels a bit hacky but it is an option for trying to get the tabs to stick. In a simpler solution lets say we wanted the following:
A Collapsing toolbar layout
Which links to a scroll view.
In that scroll view we want the following:
A recyclerview that say scrolls horizontally
Below the recycler view a tab layout
Below the tab layout we want a view pager that will load dynamic fragments within a fixed space.
activity_scrolling.xml the outer parent xml file may look something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".temp.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="5dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Then the inner content_scrolling.xml may look something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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=".temp.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:text="A Heading"
android:textSize="#dimen/text_xl"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recycler_view"
android:layout_gravity="center"
android:minHeight="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimaryDark" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="680dp"
android:layout_below="#+id/tabs" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
This will allow you to forcefully place the tab layout in a location of your choosing (even if its after a recyler view).
The hacky part which i dont like is this specific line android:layout_height="680dp" which forces the viewpager height to be something specific. I am not sure why wrap_content or match_parent do not work. But this is the best thing to a solution I can provide for the issue of placing TabLayout and ViewPager in specific places.

Android parallax effect CollapsingToolbarLayout with ViewGroup Layout is not working

I am developing an Android app. In my app, I am using CollapsingToolbarLayout for parallax effect. Before I used AppbarLayout, CollapsingToolbarLayout together with ViewPager, I was working fine. But this time, I replaced view holder for content with RelativeLayout. So when I scroll up from the content, toolbar is not collapsed. I mean when I scroll up from the position I circled in the screenshot below.
But if I scroll up from the toolbar area, it is working. I mean the area in the screenshot.
This is my XML layout
<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="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/ai_app_bar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>
<RelativeLayout
android:background="#drawable/item"
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#color/lightGray"
android:layout_width="match_parent"
android:layout_height="match_parent"></View>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/ai_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="This is testing"
android:textColor="#color/textColorPrimary"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/ai_review_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#android:drawable/btn_star"
android:layout_margin="10dp"
android:visibility="gone"
app:layout_anchor="#id/ai_app_bar"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
Why toolbar is not collapsed when I scroll up from the relative layout area? How can I fix that to be the toolbar collapsed if I scroll up from the RelativeLayout area?

You should use RecyclerView instead of RelativeLayout outside of the AppBarLayout and add this view tag to it app:layout_behavior="#string/appbar_scrolling_view_behavior"
string/appbar_scrolling_view_behavior maps to
AppBarLayout.ScrollingViewBehavior, which is used to notify the
AppBarLayout when scroll events occur on this particular view.
From here Handling Scrolls with CoordinatorLayout
Edit
Also, a CollapsingToolbar needs RecyclerView or NestedListView to work.

inside relative layout put this one close after every tag close inside relative layout
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">

FloatingActionButton is adding extra margin above NestedScrollView in CoordinatorLayout

I'm struggling with strange behaviour of margin with FloatingActionButton in CoordinatorLayout. FAB adds extra margin which disappears after certain actions.
I followed Cheesesquare example to create detail view. I have exactly the xml same structure. The only difference is that I'm using this view for a fragment instead of raw activity.
This occurs most of the times but sometimes it doesn't. Occurs only once for fragment object, once it fixes itself it works well. On my second phone it doesn't occur. After removing FAB it's ok. When I change sth in calendar, it also causes margin to fix itself.
Attaching gif with layout lines enabled so you can see the margins.
For reference:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content2"
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/white"
android:fitsSystemWindows="true"
tools:context="com.habitsteacher.android.view.fragment.show.ShowHabitFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="72dp"
app:expandedTitleMarginEnd="24dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<TextView
android:id="#+id/intentionText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="16dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="24dp"
android:layout_marginStart="48dp"
android:ellipsize="end"
android:fitsSystemWindows="true"
android:maxLines="2"
android:textColor="#color/icons"
android:textSize="#dimen/abc_text_size_subhead_material"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.25"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_show_habit"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</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:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/habit_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:orientation="vertical"
android:paddingTop="32dp">
<android.support.v7.widget.CardView
android:id="#+id/calendarWrapper"
android:layout_width="match_parent"
android:layout_height="343dp"
android:layout_margin="#dimen/card_margin">
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floating_button_edit_habit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_mode_edit_white_24dp"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Any thought what could be the reason, or how to investigate this deeper?

It looks like CoordinatorLayout doesn't work properly inside a fragment which is added as non-first to the activity. This looks like a bug in SDK but I couldn't locate the root cause precisely.
As it works properly only when the layout is located on the first added fragment to the activity, I moved fragment with this layout to separate activity and is works properly now.
Still, it's avoiding this behaviour not fixing it so any answer is still appreciated.

Collapsing Toolbar. How to adapt custom Layout instead of default ImageView

I want to make collasping toolbar, in which is my custom Layout . On the image below is presented use of new released design.support lib. On the img.1, the element (ImageView) is disappearing. In my project I want to disappear a Layout.
Because inside Layout will be ViewPager it can not be resized like the image, it should dissolve in Toolbar background - should become transparent.
img. 1
Additionaly I want to open/hide ToolbarLayout by moving ToolbarFooter - belt to move - bright blue Layout. So expand/collapse are not like in img.1 Instead it should works like status bar that shifts up and down by blick on ToolbarFooter.
img.2
The think is I read about it a lot (collapsing with button , layout inside) of but I've found any clue or implementation. I don't know how to approach to this topic.
I suppose that my ViewPager and RelativeLayout(or whatever) should be outside of the toolbar. And they should just take a place of toolbar view like this:
<android.support.v4.widget.DrawerLayout
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">
<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"
android:clipChildren="false">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_max_height"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/AppBarTheme">
<Button
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="left|top"
android:gravity="center_vertical|left"
android:text="ToolbarTitle"
android:background="?android:attr/selectableItemBackground"
android:textAllCaps="false"/>
</android.support.v7.widget.Toolbar>
<net.android.app.views.ViewPagerToolbar
android:id="#+id/calendar_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="?attr/actionBarSize"/>
<RelativeLayout
android:id="#+id/toolbar_footer"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:layout_alignParentTop="false"
android:layout_alignBottom="#+id/app_bar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:text="#string/belt_to_move"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/belt_to_move"/>
</RelativeLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar">
<android.support.v4.view.ViewPager
android:id="#+id/vp_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"/>
Now can anyone tell me what component should I use?
Support library offers CoordinateLayout, CollapsedToolbar, Appbar.
By standard approach can be use RelativeLayout or FrameLayout which overlap view. So guys what you recommend me, how from which side should I eat this cake?
UPDATED:
Finally I've found the solution. It isn't CollapsingToolbar but ViewDragHelper.
The solution I followed: Blog, GitHub project, YouTube explanation,

You need attach a viewPager above toolbar.
Example for ImageView :
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:elevation="2dp"
app:collapsedTitleTextAppearance="?attr/autoCompleteTextViewStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
// put here your content
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:elevation="2dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>