Develop Reference

CollapsingToolbarLayout ignores exitUntilCollapsed flag and scrolls out of view when soft keyboard is visible

I am attempting to set up a text processor activity with a scrollable EditText and a partially collapsible toolbar.
Currently I am using a CoordinatorLayout with a Toolbarwidget nested in a CollapsingToolbarLayout nested in an AppBarLayout, and a NestedScrollView containing an EditText. The CollapsingToolbarLayout has app:layout_scrollFlags set to "scroll|exitUntilCollapsed".
The toolbar should collapse to it's minimum height as the user scrolls or enters text. Once the toolbar reaches it's minimum height it should stay pinned at the top of the screen.
Scrolling works as expected when the keyboard is not visible. However, whether scrolling or typing, if the soft keyboard is visible the toolbar shrinks beyond it's minimum height and scrolls all the way out of view.
Similar problems like the ones here and here
seem to be solved using adjustPan, adjustResize, and/or fitsSystemWindow.
However I have set fitsSystemWindow: true and I have tried to no avail setting android:windowSoftInputMode="adjustPan" as well as android:windowSoftInputMode="adjustResize" in the manifest. With adjustResize the toolbar behaves correctly but the cursor moves behind the keyboard so you can't see what your typing.
Here is my layout:
<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=".ui.wordprocessor.ScrollingEditTextActivity">
<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/Theme.AuthorGenie3.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"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AuthorGenie3.PopupOverlay">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Any suggestions would be much appreciated!

Android - CollapsingToolbarLayout elevation shadow disappears when setting exitUntilCollapsed

I'm using a custom AppBarLayout because I want a custom shape for my toolbar with an elevation shadow. The background is set on the AppBarLayout as a custom Drawable and I use the following code to to get the shadow to render on the toolbar.
setClipToOutline(true);
setOutlineProvider(ViewOutlineProvider.BACKGROUND);
All is good, the shadow renders. However, my CollapsingToolbarLayout also contains some tabs and when I collapse the toolbar I want my tabs to stay visible. Currently when I scroll the entire toolbar disappears including the tabs ands it's only when I set exitUntilCollapse on the CollapsingToolbarLayout that the tabs remain after scrolling. The catch is when I set this flag my elevation shadow stops rendering! Why could this be? Is there a way around it, is there another way to stop my tabs disappearing?
I've included some of my relevant layout code below:
<com.ss.views.CustomBackgroundAppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior="com.ss.views.FlingBehaviour"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="0dp"
app:expandedTitleMarginEnd="0dp"
app:expandedTitleMarginStart="0dp"
app:expandedTitleMarginTop="0dp"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleEnabled="false"
>
<include
android:id="#+id/tab_layout"
layout="#layout/include_tab_layout"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:minHeight="100dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<include
android:id="#+id/user_dash"
app:layout_collapseMode="parallax"
layout="#layout/include_toolbar_user_dash"/>
</android.support.design.widget.CollapsingToolbarLayout>
</com.ss.views.CustomBackgroundAppBarLayout>

setting minHeight in CollapsingToolbarLayout not having any effect

The main problem I've currently got with the CollapsingToolbarLayout is, that whatever I'm trying, the minHeight attribute of my Toolbar does not have any effect.
My desired result would be this:
(The CollapsingToolbarLayout with a certain expanded height and a certain collapsed height (in the example 180dp), while the title either collapses or stays on the top)
But whatever I do, the title sometimes is in the center, won't completely collapse or the minHeight is ignored anyway. I have tried to set the minHeight for either AppBarLayout, CollapsingToolbarLayout, the toolbar itself, any contents, etc. also with different approaches found on the web but with no luck.
Here is the basic xml:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="180dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="#style/TextAppearence.App.ToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent">
<com.xxxxxx.custom.Banner
android:id="#+id/parallax_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/xxxxxxxx"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6"
app:layout_scrollFlags="scroll" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="180dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I hope this is enough content to explain my problem.
Any help is appreciated, thanks!

This one is pretty easy. Just set bottom margin of your Toolbar to whatever space you want to be reserved in the collapsed version.
The reasoning behind this is simple. CollapsingToolbarLayout inherits from FrameLayout which stacks images on top of each other. The only things it takes in account when considering collapsed bounds are toolbar height and its top / bottom margins.

You can set the height to 180dp instead of using minHeight, and then add a TextView into the toolbar to serve as the title.

just set Toolbar collapseMode as "pin" mode, and height with your requirement size
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>

Android: CollapsingToolbarLayout centers expanded text but not collapsed text

I have a CollapsingToolbarLayout that is defined to center both in collapsed and in expanded modes:
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="286dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
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:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
<ImageView
android:id="#+id/someIcon"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:src="#drawable/some_icon"
android:padding="16dp"
android:layout_gravity="top|end"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I define a title for the toolbar but when I collapse it I can see the title moving in a diagonal direction instead of straight up and it aligns itself slightly to the right of the center of the toolbar line. Notice that the width is match_parent and the collapsed gravity is center, so why could this be happening and how should I fix it?
• First screenshot: what it looks like if I use collapse -> center and expanded -> center gravities and then collapse the layout. Notice that it's to the right of the center of the screen.
• Second screenshot: what it looks like if I get rid of collapse -> center gravity but leave expanded -> center gravity and then collapse the layout. Notice that it's aligned left by default.
• Third screenshot: what it looks like expanded
Things that I've tried so far to solve this (without success):
• Getting rid of the collapsedGravity and leaving only the expandedGravity
• Using the default roboto font for the title
• Setting padding and margins to 0 for both the toolbar and the collapsing layout
• setting gravity center_horizontal instead of center
Edit:
The only workaround I've found that makes this work properly is to use a separate textview to hold the title instead of setting the title for the collapsingtoolbarlayout (this makes the title collapse properly to the center). This isn't optimal so I'd appreciate knowing if the CPL has a bug in it or if there's a way to use the default title to do the same thing.

You need to set app:contentInsetStart and app:contentInsetLeft properties to 0dp.
<android.support.v7.widget.Toolbar
..
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"/>

It may be late, but what I found is, the your title is in center in the title's view and not the whole toolbar. It happened with me, when I didn't had the up/back button on the left and had a single icon on the right.
So if you have back/up button, it should be exactly in the center because on the left and right you have 1 icon. But, this didn't happened because when you set the up/back button, it adds some right margin (you can see this behavior on the normal toolbar, with left title gravity).
So by considering that, the in the remaining area, your title is in the center. But, not center considering toolbar's width, center in title view's available width.
EXPERIMENT: You can try adding a second icon on the right and it will be very much in the center. Just a hack. Ugly hack.

Setting content related properties to 0dp (app:contentInsetLeft="0dp", android:contentInsetLeft="0dp", app:contentInsetStart="0dp", android:contentInsetStart="0dp", app:contentInsetStartWithNavigation="0dp") might help you. Here is my working Toolbar.
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center|center_horizontal"
app:collapsedTitleTextAppearance="#style/CollapsedAppBar"
app:expandedTitleTextAppearance="#style/ExpandedAppBar"
app:statusBarScrim="#color/colorPrimaryDark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMargin="#dimen/large_padding"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/comImage1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:src="#drawable/bg"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:contentInsetLeft="0dp"
android:contentInsetLeft="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
app:theme="#style/ToolbarTheme"
android:gravity="center_horizontal"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleMargin="0dp"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
Hope it will help :)

You need to set app:expandedTitleGravity="center"
and remove app:collapsedTitleGravity="center" from your code like
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="center"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
Hope this helps you

Android - using the new design lib to create tabs with space below

Update
I was looking into this because when I changed the size of the spacer manually it caused stuttering and thought the CollapsingToolbarLayout will help fix it.
Reading https://stackoverflow.com/a/16103503/2482564 help me fix the stuttering by using ObjectAnimator and setting its duration to 0.
I'm keeping the question open in case someone has a solution with CollapsingToolbarLayout
Original question
I'm trying to achieve the following behavior with CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and TabLayout - whichever is appropriate for the task...
I want my initial view to look like this mockup
and the behavior when scrolling up should be:
the area marked in yellow disappears 1st
the area marked in blue disappears 2nd - it's only an area with color, no text
the area marked in pink - the tabs area, remains on the screen and is located at the top of the screen
I tried to work with the cheesesquare example and modified include_list_viewpager with the code below, but I get the normal collapsing tabs behavior with the shrinking title
<android.support.design.widget.AppBarLayout
android:id="#+id/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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="50dp"
android:background="#color/cardview_dark_background"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="50dp"
android:background="#color/cardview_shadow_start_color"
android:gravity="top"
android:orientation="vertical"
app:layout_collapseMode="pin">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_light_background"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
any idea what should be changed to get the behavior I want? I tried other methods of changing the size of the spacer area manually, but it causes flickering on screen since I'm intruding in the middle of the scroll event

Remove the app:layout_scrollFlags="scroll|exitUntilCollapsed" from your CollapsingToolbarLayout