Develop Reference

CollapsingToolbarLayout expand only when at the top

I have some problems with AppBarLayout and CollapsingToolbarLayout. This is what currently happens:
https://www.youtube.com/watch?v=z4yD8rmjSjU
The downwards scrolling motion is exactly what I want. However when I scroll up again, the orange bar should appear immediately (which it does), but I want the ImageView to start appearing only when the user has scrolled to the very top. Can anyone help me to achieve this effect?
This is my layout xml:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:text="ImageView"
android:textSize="20sp"
android:textColor="#android:color/white"
android:gravity="center"
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="145dp"
app:layout_collapseMode="parallax"
android:background="#444"/>
<TextView
android:text="Top bar"
android:textColor="#android:color/white"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:text="Bottom bar"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:layout_width="match_parent"
android:textColor="#android:color/black"
android:layout_height="50dp"
android:background="#ddd"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling"/>

Customisation of CoordinatorLayout behaviour is hard. You want the orange bar to appear immediately but ImageView only after the content is scrolled to the top, but these views belong to one parent CollapsingToolbarLayout and both get either the behaviour you have now or the opposite with enterAlwaysCollapsed flag. I see no way to separate the behaviour for these views without messing with CoordinatorLayout/CollapsingToolbarLayout Java API.
If simpler behaviour is not an option and noone here points out a simple solution, I suggest trying a relatively new MotionLayout instead of dancing with CollapsingToolbarLayout internals, you will save yourself a lot of time in the end. It will be a little harder at start but it provides clear ways for customisation. Here's a very good article that shows how to build a UX similar to CoordinatorLayout but using MotionLayout. And the second part of this article with some additional customisations.

I ended up moving the orange bar out of the CollapsingToolbarLayout and setting an OnOffsetChangedListener that changes the translationY of the top bar on the AppBarLayout.
Setting the OnOffsetChangedListener:
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->
topbar.translationY = Math.min(image.height.toFloat(), - offset.toFloat())
})
Layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="#+id/topbar"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:elevation="8dp"
android:elevation="8dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="#android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>

There are lots of effects on the scrolling behavior that can be achieved by setting different layout_scrollFlags. In your case, I think the flag you want is enterAlwaysCollapsed. Add the flag along with enterAlways instead of replacing all the flags.
scroll will make the toolbar scroll like the rest of the content, enterAlways will make the toolbar AND the rest of the CollapsingToolbarLayout to pop back immediately after scroll up, whereas enterAlwaysCollapsed only expands the CollapsingToolbarLayout after the page is scrolled all the way to the top.
Here's the effect that enterAlwaysCollapsed achieves.

I think you can manage that from your code ,I have tried that by simply detecting behavior of layout
app_bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
{
// Collapsed
}
else
{
//Expanded
}
}
});

Try this #Mark.I got the scroll you showed in the Video
<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.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="145dp"
android:layout_marginTop="56dp"
android:background="#444"
android:gravity="center"
android:text="ImageView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#ff8000"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Top bar"
android:textColor="#android:color/white"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ddd"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Bottom bar"
android:textColor="#android:color/black"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_scrolling"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Anchor image gets overlapped by toolbar when CollapsingToolbarLayout is collapsed

I am using CollapsingToolbarLayout in one of my layouts, I anchored an image (id=event_logo) on AppBar layout;
How it looks before collapsing
however, when CollapsingToolbarLayout is totally collapsed the Toolbar covers the image.
How it looks after collapsing
my xml code
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="185dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:fitsSystemWindows="true"
android:scaleType="center"
android:src="#drawable/bgg" />
<android.support.v7.widget.Toolbar
android:id="#+id/about_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/MyTheme1"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/item_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
.....
</android.support.v4.widget.NestedScrollView>
<ImageView
android:id="#+id/event_logo"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical|left"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/barcode_scanner"
android:layout_marginTop="120dp"
android:contentDescription="event_logo"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom|right" />
Tested on Android 6.0
Any Idea why is this the case?

For future readers to this question...The trick to solve this issue is to set elevation to 20dp
Simply add elevation attribute to the anchored image
<ImageView
android:id="#+id/event_logo"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_margin="#dimen/fab_margin"
android:contentDescription="event_logo"
android:elevation="20dp"
android:scaleType="fitXY"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom|right"
tools:targetApi="lollipop" />
note: attribute elevation is used only for API 21 and higher, that's why it's necessary to add targetApi lollipop

CoordinatorLayout + CollapsingToolbarLayout scrolling underneath the status bar

I have an odd problem with my layouts. I have a CoordinatorLayout with a CollapsingToolBarLayout in it. I have a transparent status bar to better display the image in the top. Thus I have fitsSystemWindow set on this ImageView. The problem I now have is that when the Toolbar is fully collapsed, the top part of the toolbar scrolls behind the system status bar. Is there a way to prevent this behavior?
Here are the screenshots:
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main_collapsing"
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="140dp"
app:expandedTitleMarginBottom="90dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
app:layout_collapseMode="parallax"
android:id="#+id/icon"
android:transitionName="pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/missing_album_art"
android:tint="#AA000000"
android:fitsSystemWindows="true"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="20dp"
android:orientation="horizontal">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/smallicon"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/artist"
android:ellipsize="end"
android:singleLine="true"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:id="#+id/date"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/main_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>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/list"
android:dividerHeight="2dp"
android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Also, I tweak the layout parameters a bit when creating the activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Add android:fitsSystemWindows="true" to the root of your layout i.e. CoordinatorLayout
Most of the time, your app won’t need to draw under the status bar or the navigation bar, but if you do: you need to make sure interactive elements (like buttons) aren’t hidden underneath them. That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.
Read more on this here.

CollapsingToolbarLayout: unexpected view stack behavior

It appears that children of the CollapsingToolbarLayout (a custom FrameLayout) do not adhere to the expected stack behavior of FrameLayouts. I expect the views to be drawn on top of each other in the order they are provided in the XML layout.
In the example below, when collapsing the CollapsingToolbarLayout, the "layout_button_bar" LinearLayout scrolls underneath the "button_follow" and "button_like" buttons. Provided that the LinearLayout is defined after the above mentioned buttons, I expect the LinearLayout to scroll over the two buttons, obscuring them, rather than below them. Is anyone familiar with a workaround?
<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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/collapsible_app_bar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/background_content_frame"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#drawable/some_image"
app:layout_collapseMode="parallax"/>
<ImageView
android:id="#+id/image_header_gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/scrim_top_bottom_banner"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsible_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
android:gravity="top"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
<Button
android:id="#+id/button_follow"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_follow"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<Button
android:id="#+id/button_like"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_like"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<LinearLayout
android:id="#+id/layout_button_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/button_bar_height"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#color/slide_handle">
<!-- 3 Buttons -->
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Library: com.android.support:design 23.0.1 | Theme: Theme.AppCompat.NoActionBar
Pre-collapse:
Mid-collapse:

Just wrap the like Button and the follow Button inside a Layout. For example a LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_marginBottom="80dp"
app:layout_collapseMode="parallax">
<Button
android:id="#+id/button_follow"
...
/>
<Button
android:id="#+id/button_like"
...
/>
</LinearLayout>

Setting a gravity to a TabLayout inside a CollapsingToolbarLayout causes it to diassapear

I have the following 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:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="#drawable/bg_bucket_list">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="144dp"
app:expandedTitleMarginBottom="#dimen/quadruple_margin"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_bucket_list" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_gravity="top"
android:background="#color/black_40" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:animateLayoutChanges="true"
android:gravity="top">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quadruple_margin"
android:text="#string/my_places_for"
android:textColor="#color/white"
android:textSize="24sp"
android:visibility="gone" />
<TextView
android:id="#+id/sub_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text"
android:layout_marginLeft="#dimen/single_margin"
android:layout_marginStart="#dimen/single_margin"
android:layout_marginTop="#dimen/quarter_margin"
android:text="#string/pick_category_or_business"
android:textColor="#color/white"
android:textSize="16sp"
android:visibility="gone" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabBackground="#color/transparent"
app:tabGravity="center"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/grey_400" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
app:contentInsetLeft="#dimen/triple_margin"
app:contentInsetStart="#dimen/triple_margin"
app:popupTheme="#style/Theme.AppCompat.NoActionBar"
app:theme="#style/Theme.AppCompat.NoActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
If you look at the TabLayout, the gravity assigned to it (bottom) causes it to disappear. If I remove that, it shows but fixed to the top.
The reason I don't have the CollapsingToolBarLayout matching the AppBarLayout in size is because I've been experimenting with putting the TabLayout in that space and setting it's flags independent of the CollapsingToolbarLayout directly as a descendant of the AppBarLayout.
Setting it independent works, but then I don't have the ImageView Background with the mask 60% black opacity mask anymore.
I tried what was suggested here: Similar question
There's no difference however.
EDIT: I figured it out and answered my own question here: Answer
The important thing is to recognize the CollapsingToolBarLayout extends FrameLayout, so you can put more than 1 in An AppBarLayout which extends LinearLayout. You set the scroll behaviour by using the scroll flags available to an AppBarLayout's children views.