Develop Reference

Change insets for collapsing toolbar depending on its state

I have collapsing toolbar and some layout in it I want to collapse. To prevent view going under status bar, I use system insets to set margin for collapsing toolbar. I extracted AppBarLayout to separate file and included it inside CoordinatorLayout:
<com.google.android.material.appbar.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/colorToolbar"
android:elevation="4dp"
android:focusable="true"
android:focusableInTouchMode="true"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin">
...
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.card.MaterialCardView
android:id="#+id/bonuses_widget"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="14dp"
app:cardElevation="3dp"
app:layout_collapseMode="parallax">
...
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
Margins for MaterialCardView are set from code because layout doesn't support addition. I add margins for collapsing toolbar using insets:
ViewCompat.setOnApplyWindowInsetsListener(action_bar) { _, insets ->
collapsing_toolbar.setMarginTop(insets.systemWindowInsetTop)
insets
}
This works well when collapsing toolbar is expanded, but in collapsed state toolbar goes under status bar:
I have read this question, have implemented AppBarStateChangeListener and use it like this:
action_bar.addOnOffsetChangedListener(object : AppBarStateChangeListener() {
override fun onStateChanged(appBarLayout: AppBarLayout, state: State) {
if (state == State.COLLAPSED) {
ViewCompat.setOnApplyWindowInsetsListener(collapsing_toolbar) { _, insets ->
toolbar.setMarginTop(insets.systemWindowInsetTop)
insets
}
}
if (state == State.EXPANDED) {
ViewCompat.setOnApplyWindowInsetsListener(collapsing_toolbar) { _, insets ->
toolbar.setMarginTop(0)
insets
}
}
}
})
This didn't help, as I can understand so far, status bar's insets is already handled by action bar and collapsing toolbar has nothing to handle.
I also tried to margin to toolbar at the same time with collapsing toolbar, it worked but leaded to another problem:
After all I tried to remove insets and just set android:fitsSystemWindows="true" to action bar, this fixes problem with toolbar under status bar, but status bar unexpectedly gets strange color (purple) which isn't represented in app colors.
Hope someone knows hot to handle with insets properly in this case.

You can try calling the setSupportActionBar() in your Fragment, because that works for me:
(requireActivity() as AppCompatActivity).apply {
//supportActionBar?.hide() //may need this to hide the Activity actionBar
setSupportActionBar(binding.toolbar)
}
setHasOptionsMenu(true) //don't forget this
Demo: https://youtu.be/kmnsep_V-jE

Eventually I found suitable solution:
ViewCompat.setOnApplyWindowInsetsListener(action_bar) { view, insets ->
view.updatePadding(top = insets.systemWindowInsetTop)
insets
}
There is still problem with white background under status bar (I need it to be dark as on left screenshots), but initial problem is solved.

Android : Unhide a snapped toolbar programmatically

The toolbar is hidden when the screen is scrolled :
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap">
How can I unhide it programmatically (i.e. when I click a button) ?

Probably you wrap Toolbar inside AppBarLayout. In that case you have to get AppBarLayout.LayoutParams and need to invoke setScrollFlags() with 0 to stop the scroll. Check below:
Toolbar toolbar = findViewById(R.id.toolbar);
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(0);

You can use one of them
1. without animation
getSupportActionBar().show();
2. With animation
toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator()).start();

Prevent RecyclerView from scrolling under AppBarLayout before AppBarLayout is collapsed

I'm creating a RecyclerView with header where the header collapses as you scroll up the RecyclerView. I can achieve this very closely with the layout below, with a transparent AppBarLayout, and MyCoolView which is the header. The parallax effect works great.
However, if the header is still visible and I fling the RecyclerView, the RV scrolls slowly to the top and some of the items are under the Toolbar until the RV reaches the top of the view. I've been playing around with the scrollFlags but haven't achieved a desirable result. Any suggestions on how to improve the fling experience so the items don't get clipped?
View the video and watch when its flinged --- https://www.dropbox.com/s/jppd6m7zo41k23z/20160609_151309.mp4?dl=0
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:background="#00000000">
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.android.myapp.MyCoolView
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView/>
</android.support.design.widget.CoordinatorLayout>

Possible solution (untested). Add an OnOffsetChangedListener to your AppBarLayout, and keep note of the offset value. First, declare this field:
private boolean shouldScroll = false;
Then, onCreate:
AppBarLayout appbar = findViewById(...);
appbar.addOnOffsetChangedListener(new OnOffsetChangedListener() {
#Override
void onOffsetChanged(AppBarLayout appbar, int offset) {
// Allow recycler scrolling only if we started collapsing.
this.shouldScroll = offset != 0;
}
});
Now, add a scroll listener to your RecyclerView. Whenever it tries to scroll, revert the scroll if the AppBarLayout is still expanded:
RecyclerView recycler = findViewById(...);
recycler.addOnScrollListener(new OnScrollListener() {
#Override
void onScrolled(RecyclerView recycler, int dx, int dy) {
// If AppBar is fully expanded, revert the scroll.
if (!shouldScroll) {
recycler.scrollTo(0,0);
}
}
});
This might need some tweaking though. I see two issues:
Possible stack overflow if scrollTo() calls onScrolled() back. Can be solved with a boolean or by removing/adding the scroll listener
Possibly you want to prevent scrolling not only when AppBarLayout is fully expanded, but more generally when AppBarLayout is not collapsed. This means you don’t have to check for offset != 0, but rather for offset == appBarLayout.getTotalScrollRange(). I think.

Maybe you can add layout_behavior="#string/appbar_scrolling_view_behavior" to your RecylerView like this.
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent" app:layout_behavior="#string/appbar_scrolling_view_behavior" />

Wrapping the RecyclerView in a FrameLayout solves this problem.
You also need move the appbar_scrolling_view_behavior from the RecyclerView to the FrameLayout so it will be positioned below the AppBarLayout properly.
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:background="#00000000">
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.android.myapp.MyCoolView
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- BEGIN SOLUTION -->
<!-- the layout behavior needs to be set on the FrameLayout, not the RecyclerView -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<!--This RecyclerView MUST be wrapped in a FrameLayout-->
<!--This prevents the RecyclerView from going behind the AppBarLayout-->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
<!-- END SOLUTION -->
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout: custom contentScrim similar to Facebook

I want to create a custom contentScrim for my collapsingToolbarLayout. My collapsingToolbarLayout has an imageview inside. When it scrolls, in theory the imageview is suppose to fade out and my scrim color is suppose to fade in.
We all know we can create a scrim like this:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
android:background="#color/white"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
However the android default scrim only seems to start working when you scroll 3/4 up the screen. Before you that point, the imageview is still fully shown. Also when you reach 3/4 of the screen, the scrim kicks in and automatically changes the color of the collapsingtoolbarlayout to your scrim color:
Instead of having it fill the screen fully when you scroll 3/4 of the way up and before we reached the toolbar, I want it to fade gently till your scrolled up to the toolbar.
If you want to see an example of the effect I want to create, have a look at the Facebook app. This is the Facebook app when the collapsingToolbarLayout is fully expanded:
When you scroll to about 3/4 of the way down, the collapsingToolbarLayout has a faded blue color and the blue is not completely saturating:
So I have create the following inside my collapsingToolbarLayout:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame_picture">
<com.customshapes.SquareImageView
android:id="#+id/backdrop"
android:contentDescription="#string/photo"
android:transitionName="#string/transition"
android:layout_width="match_parent"
android:layout_height="240dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
/>
<com.customshapes.SquareImageView
android:id="#+id/fading_backdrop"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:layout_height="240dp"
android:alpha="0"
android:fitsSystemWindows="true"
/>
</FrameLayout>
The framelayout comprises of the backdrop imageview which holds the picture that is displayed inside my collapsingToolbarLayout and in front of it is an imageview which just holds the 'scrimColor' ?attr/colorPrimary with an alpha of 0 so that the backdrop imageview will shine through.
Then I implemented the appBarLayout's onOffsetChangedListener:
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
fading_backdrop.setImageAlpha(verticalOffset);
fading_backdrop.invalidate();
}
We are setting the alpha of the fading_backdrop so that it will appear when we scroll up. I'm trying to create a scrim artifically.
However, this doesn't seem to work properly. There is no fading at all when I run this code. Does anyone know what I'm doing wrong?

This is how I managed to create a custom scrim, which seems to be used in quite a few apps nowadays - if you look at Facebook, you will see they do not use the standard contentScrim for their collapsingToolbarLayout. The code below duplicates what Facebook does in their app.
You must set a AppBarLayout.OnOffsetChangedListener to your activity and then use the following code below to measure the size of the toolbar and the size of the appBarLayout.
When your listener is called, the verticalOffset actually measures the offset of the collapsingToolbarLayout from when it is fully expanded to the point when it touches the pinned toolbar. Therefore, the verticalOffset EXCLUDES the height of the toolbar. To compare apples with apples, we need to also EXCLUDE the toolbar height from the height of the appBarLayout so that when we divide the verticalOffset by the totalHeight, neither the verticalOffset nor the totalHeight contains the toolbar height. This is necessary in order to obtain a percentage to apply your 255 alpha value to.
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//measuring for alpha
int toolBarHeight = toolbar.getMeasuredHeight();
int appBarHeight = appBarLayout.getMeasuredHeight();
Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
fading_backdrop.getBackground().setAlpha(255 - Math.round(f));
}
When you scroll now, the fading_backdrop will gradually gain alpha when you scroll upwards so that it overlays nicely with the image in the collapsingToolbarLayout, similar to the facebook custom contentScrim.

AppBarLayout does not always re-enter on scroll down

I created a collapsing transparent search bar using AppBarLayout, CollapsingToolbarLayout inside a CoordinatorLayout and a RecyclerView. It was a bit (lot) tricky to have the recyclerView appear behind the appBarLayout instead of below it ; but is working. My problem is that sometimes, the app bar does not re-enter when I scroll down. I simply stays invisible outside of the screen. Here is my layout :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="88dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/services_recycler_view"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="88dp">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#color/color_transparent"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="false">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Search Location or Service"
android:id="#+id/button_search_bar"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Any help on solving the not re-entering issue would be great.
A side problem, is that because I am using the app:behavior_overlapTop="88dp" to make recyclerView appear behind the app bar, the whole scrolling is a little odd : it starts by scrolling the appBar and then scrolls the recycler view. Any better solution is welcome.
EDIT :
I realized that the AppBar actually re-enter on scroll down but is invisible (I can click on it, I just can't see it). I figured I would share this new clue =)

It's not the answer i just want to confirmation that what you give, it will look like this?? on scroll up
means that Search button will come on top?
Edit:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
add exitUntilCollapsed flag.

After a few hours of trial and error I managed to find a solution to your problem. You can set an OnScrollListener to your RecyclerView. Inside the listener you check if in onScrolled the first item of the RecyclerView is on screen.
If the first item is visible, first you change the visibility of your AppBarLayout to View.INVISIBLE and secondly you change it directly back to View.VISIBLE.
Your code may look like this (Kotlin) :
override fun onCreate(savedInstanceState : Bundle?) {
super.onCreate(savedInstanceState)
contentView(R.layout.my_activity)
val mAppbar = appbar
val mServices_recycler_view = services_recycler_view
//...
mServices_recycler_view.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView : RecyclerView, newState : Int) {
super.onScrollStateChanged(recyclerView, newState)
}
override fun onScrolled(recyclerView : RecyclerView, dx : Int, dy : Int) {
val layoutManager = LinearLayoutManager::class.java.cast(recyclerView.layoutManager)
if(layoutManager.findFirstVisibleItemPosition() == 0) {
mAppbar.visibility = View.INVISIBLE
mAppbar.visibility = View.VISIBLE
}
}
}
I am aware of the fact, that this is not very beautiful, but as long as it solves the issue I don't mind.
Additionally you want to improve the check if the first item of the RecyclerView is shown, so that it won't trigger everytime you scroll, even when it is only a little bit.
The layout you described in your question does not have to be changed.