Develop Reference

layout_collapseMode : PIN not working

I want to show a tab layout with an image that should be scrollable but then the tablayout is scrolled above it should remain fixed. In my case it also moves up with the scrolling. This is my final version of layout. Have tried so many things
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/coupon_green"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/profileTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:elevation="2dp"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/skill_black"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/skill_black"
app:tabTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.skillbox.ui.CustomViewPager
android:id="#+id/profilePager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:layout_anchor="#+id/appBar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout not collapsing when using viewpager

I have search all questions here related to my question but none helped so far. What I am trying to achieve is to have the middle toolbar collapse when the the fragment in the ViewPager is scrolled down and the TabLayout will just pin. Here's the structure of my main layout file. Nothing happens when I scroll down.
Please help me. Any help would be greatly appreciated
<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="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="72dp"
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<RelativeLayout android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="top"
android:paddingRight="20dp"
android:paddingLeft="20dp"
android:layout_height="wrap_content">
<TextView android:id="#+id/tv_song_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_alignParentLeft="true"
android:textSize="20sp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Bloody Stream"/>
<TextView android:id="#+id/tv_artist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tv_song_name"
android:textSize="15sp"
android:fontFamily="Sans-serif-light"
android:textColor="#9E9E9E"
android:text="by Coda"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:layout_below="#+id/tool_bar"
android:layout_gravity="center_horizontal"
android:layout_alignParentStart="true"
android:fitsSystemWindows="true"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_file_download_white_24dp" />

The scrolling container in your Fragment must support nested scrolling. This means you should use either a NestedScrollView or a RecyclerView.

Seems like I have to include the toolbar that has the navigation back button inside the CollapsingToolbarLayout. It's working as what I intended now. Thank you for all the answers.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/smooth_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="wrap_content"
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="72dp"
android:layout_marginTop="?android:attr/actionBarSize"
app:layout_collapseMode="parallax">

Collapsing toolbar issue with RecyclerView

I have a CollapsingToolbarLayout in layout, below that I have placed a RecyclerView. it works perfect and the parallax effects comes smoothly when the RecyclerView scrolls, but the issue, is suppose if the RecyclerView has less items and there is nothing to scroll, still it scolls and an empty space shows at the bottom. what my requirment is it shouldn't scroll if the RecyclerView can accomodate all the views in the visible screen, is there any way to do this ?
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:id="#+id/container_id"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
toolbar.xml
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
app:layout_scrollFlags="scroll"
app:layout_collapseMode="parallax"
android:layout_below="#+id/toolbar"
android:minHeight="250dp"
android:layout_height="300dp"
android:layout_width="match_parent"/>
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ToggleButton
android:layout_centerVertical="true"
android:layout_margin="#dimen/dimen_xs"
android:layout_width="20dp"
android:layout_height="20dp"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:textOff=""
android:textOn=""/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

slidingtab view pager not coming to full screen inside CollapsingToolbarLayout

I need to implement a CollapsingToolbarLayout containing a Relative layout and a tab with viewpager below that. I have achieved ,but View pager is not coming to full screen. This is my code.
`
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
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="400dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/White">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:textSize="20sp"
android:textColor="#color/colorPrimaryDark"
android:textStyle="italic"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="2dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<com.wodrob.tatco.wodrobcanvas.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/tabs_background"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:background="#color/White"
android:layout_height="fill_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
>
</android.support.v4.view.ViewPager>
</android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
`
I tried to give view pager layout outside the Appbar layout, but at that time it is overlapping the CollapsingToolbarLayout and comming to full screen in background.Is there any other way for achieving this??

How insert a LinearLayout between AppBarLayout and the scrolling content, when using CollapsingToolbarLayout

I'm using a CoordinatorLayout with CollapsingToolbarLayout. I'm trying to put a LinearLayout below AppBarLayout and above the scrolling content, and I want that this LinearLayout stays always fixed on the screen (with AppBarLayout hidden or not), not scrolling with the content.
Is this possible?
So far, I have the following code:
<android.support.design.widget.CoordinatorLayout
android:layout_above="#+id/linearLayout"
tools:context="..."
android:layout_width="wrap_content"
android:layout_height="match_parent">
<android.support.design.widget.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"
android:minHeight="200dp"
>
<android.support.design.widget.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">
<ImageView
android:id="#+id/imagemView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<ImageButton
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/back_button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="18dp"
android:textSize="25sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|left|end"
android:layout_margin="#dimen/fab_margin"
app:borderWidth="0dp"
app:layout_behavior="myBehavior"/>
<include
layout="#layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>

So far I got this by following:
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
</CollapsingToolbarLayout>
</AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout/>//Layout which will stay between CollapsingToolbarLayout and Recyler or nested scroll view
<Recycler Or Nested Scroll View/>
</CoordinatorLayout>
Here Linear layout will scroll but it will always be visible to the user.

I think you can achieve that with this
<android.support.design.widget.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"
android:minHeight="200dp"
>
<android.support.design.widget.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">
<ImageView
android:id="#+id/imagemView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<ImageButton
android:id="#+id/back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/back_button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="18dp"
android:textSize="25sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"/>
</android.support.design.widget.AppBarLayout>
and then include
<include
layout="#layout/content_scrolling"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
No need to set any scroll flag to the LinearLayout so the CoordinatorLayout will only hide the CollapsingToolbarLayout