Develop Reference

CollapsingToolbarLayout with two views, make one scroll but not the other

I have an activity with a toolbar and a recyclerview. On top of the recyclerview I have a panel that I want to be scrollable (to move along with the scroll of the recyclerview).
I want this panel to scroll behind the toolbar, so when the scrolling happens, the toolbar stays in place and the panel slides behind it.
Kind of what they do here:
https://i.imgur.com/fQA6bPH.gif
But I cant find the right combination of options with CollapsingToolbarLayout to achieve this effect:
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="none"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="none"
app:layout_collapseParallaxMultiplier="0.5">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
To simplify, I've changed the structure to this:
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="pin"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>

It does exactly the same when we add an ImageView inside the CollapsingToolbarLayout like this with parallax flag of app:layout_collapseMode:
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="pin" />
<ImageView
android:src="#drawable/cheese_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" //Here is the solution
android:minHeight="100dp" />
</android.support.design.widget.CollapsingToolbarLayout>
So you may want to add :
app:layout_collapseMode="parallax"
To your view (LinearLayout) or anything inside.
Read: https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout#creating-parallax-animations

I solved this problem by moving Toolbar outside of AppBarLayout. Then in code setup Toolbar as SupportActionBar.
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="pin">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize" />
</android.support.design.widget.CoordinatorLayout>

You need to change this to get desired effect:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:contentScrim="?colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Your change was in CollapsingToolbar, by using these three attributes "scroll|enterAlwaysCollapsed|exitUntilCollapsed" together will change that effect.
Description :
app:layout_collapseMode="" is attribute used to collapse/pin child views of CollapsingToolbarLayout.
There are three attributes to this :
none : No effects at all.
pin : Pin that view at CollapsingToolbar when scrolled.
parallax : Hide view parallel with CollapsingToolbar hiding.
so if you're having Toolbar pinned to CollapsingToolbarLayout then add this property pin (which will pin it to Collapsing toolbar when scrolled) and parallax will animate it until collapsed.
Let's see
How does scrolling actually works using these 4 attributes in
app:layout_scrollFlags=""
scroll : The view will be scroll in direct relation to scroll
events.(Necessary, otherwise any other attribute won't work)
enterAlways : When entering (scrolling on screen) the view will
scroll on any downwards scroll event, regardless of whether the
scrolling view is also scrolling.
enterAlwaysCollapsed : An additional flag for 'enterAlways' which
modifies the returning view to only initially scroll back to it's
collapsed height.
exitUntilCollapsed : When exiting (scrolling off screen) the view
will be scrolled until it is 'collapsed'.
snap : Upon a scroll ending, if the view is only partially visible
then it will be snapped and scrolled to it's closest edge.
More details from here & demo here
Findout more from here : link

How to collapse ImageView nested inside a CoordinatorLayout

I have the following layout
<CoordinatorLayout>
<CardView>
<LinearLayout>
<ImageView />
<View />
</LinearLayout>
</CardView>
<RecyclerView />
</CoordinatorLayout>
I just want to hide the ImageView with parallax animation whenever the RecyclerView is scrolled down and show the ImageView whenever RecyclerView is scrolled up. I got to know that this behaviour can be achieved using CoordinatorLayout.

For a parallax effect you need to use AppBarLayout and CollapsingToolbarLayout.
You can try putting ImageView with attribute
app:layout_collapseMode="parallax"
inside the CollapsingToolbarLayout above the Toolbar
Detailed code with CoordinatorLayout
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:statusBarBackground="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
tools:context="com.example.android">
<android.support.design.widget.AppBarLayout android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true"
android:elevation="4dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleEnabled="false"
android:background="#color/colorPrimaryDarkTransparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="208dp"
android:scaleType="centerCrop"
android:src="#drawable/image_you_want"
app:layout_collapseMode="parallax"
android:background="#color/colorPrimaryDark"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:background="#color/colorPrimaryDarkTransparent2"
app:titleTextAppearance="#style/AppBarTitleappearance"
app:subtitleTextAppearance="#style/AppBarSubtitleApppearanceLight"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
</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"
app:tabTextColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
app:tabGravity="center"
android:elevation="4dp"
app:tabIndicatorColor="#color/ornage"
app:tabTextAppearance="#style/NavigationTabTextAppeareance"
/>
</android.support.design.widget.AppBarLayout>
Make sure you have following namespaces in your root tag of the layout
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
As per your requirement you can Use any layout at that position with attribute
app:layout_collapseMode="parallax"
I hope you will get some help from this.

The view you do want to collapse must be wrapped within CollapsingToolbarLayout inside AppBarLayout.
Try the structure below:
<....CoordinatorLayout
....
...
<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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your collapsing content will goes here -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<...NestedScrollView
.....
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</....CoordinatorLayout>

Primary difference between ToolBar and CollapsingToolBar

What is the difference between ToolBar and CollapsingToolBar in android?
I tried finding it online but couldn't get any useful resource

A toolBar looks like this:
You can move it anywhere on the screen you want. its treated just like a view.
Lets look how you can put it in its own layout file with other views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp">
</Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/gray"/>
and a collapsingtoolbar is a wrapper for doing a sort of animation on the toolbar and adding views like images to the tool bar. Here is an example:
When you swipe down on the collapsing toolbar it shows other views.
Here is a code example and notice how i put the toolbar inside of the collapsable toolbar, it wraps it:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<com.antonioleiva.materializeyourapp.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
note: you probably want to put that in a coordinator layout but i didnt' want to add more confusion.

Scrolling issue with CollapsingToolbar, Parallax Image and ViewPager

I have looked long and hard for a working answer to this problem and it seems either I'm working around a bug in the Design library, or there isn't an answer to what I want to do.
I have a CollapsingToolbar with Parallax Image and a ViewPager below. The ViewPager will only act on horizontal scrolls, while the dark box at the bottom is a TextView which will do vertical scrolls and collapse the Toolbar.
My solution now isn't great for several reasons - Here's a VIDEO to show why.
On API22 (and presumably 21), my TitleBar has a shadow under it, which breaks the continuity with the TabLayout below.
My ViewPager can only page horizontally. It needs to also accept vertical input and collapse the Toolbar.
I have a TextView which pages vertically, collapsing the ToolBar. So it does work, just not as an all-in-one solution with the ViewPager only.
Why the ViewPager can't take care of Horizontal and Vertical scrolling is beyond me. Maybe the functionality doesn't exist in the Design Library yet and there is no workaround. I have tried everything, looked everywhere. This is the best I can do:
<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"
tools:context=".MainActivity"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/md_white_1000"
android:scaleType="fitCenter"
android:src="#drawable/backdrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
style="#style/CustomTabs"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/viewpager_padding_default"/>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/drawer_padding_default"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:padding="#dimen/drawer_padding_default"
android:textColor="#color/textColorPrimary"
android:background="#drawable/myrect" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_action"
android:src="#mipmap/ic_action_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/drawer_padding_default"
android:scaleType="center"
app:borderWidth="0dp"
app:layout_anchor="#id/main_content"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

1)create a separate layout for the viewPager fragments,use NestedScrollView
as a your root,and add app:layout_behavior="#string/appbar_scrolling_view_behavior",to it.
2)add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the viewPager

CollapsingToolbarLayout doesn't work well with NestedScrollView

I made an activity where image should collapse with toolbar and only text below would be visible. But When Toolbar being collapsed, there shows up a large gap between Toolbar and NestedScrollView
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:background="#color/white"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
app:elevation="5dp"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:toolbarId="#+id/toolbar"
android:id="#+id/collapsing"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.noframe.farmisagronom.util.ResizibleImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
android:minHeight="100dp"
android:maxHeight="400dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nesteview"
app:layout_anchorGravity="top"
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>
And this activity looks really good.
But when i scroll up the NestedScrollView this goes out of control.
This little space between toolbar and text is getting on my nerves.
note that if there is large text in NestedScrollView problem won't show up, but if NestedScrollView + collapsed tool bar doesn't take all phone screen, then there is a gap between them.

Adding:
android:layout_gravity="fill_vertical"
to the NestedScrollView worked for me.