CoordinatorLayout Collapse or Expand AppBar on scroll end - android

Is there a way to move the AppBar up or down, based of percentage of view collapsable view visible when the scroll ends. In the CheeseSquare app, the Toolbar can get stuck in between when scroll ends.
Thanks

That's the exact use case of SCROLL_FLAG_SNAP:
Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it's closest edge. For example, if the view only has it's bottom 25% displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75% is visible then it will be scrolled fully into view.
Which was added in version 23.1 of the Android Support Library.
You can also use it via XML:
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways|snap" />

Related

MotionLayout collapses RecyclerView header but does not expand

I have created a sample project that can reproduce this issue.
Expected Result
When I scroll the bottom RecyclerView upwards, the top RecyclerView collapses
When I scroll the bottom RecyclerView downwards, the top RecyclerView expands
Observed Result
When I scroll the bottom RecyclerView downwards, the top RecyclerView does not expands
Additional information
Try to hold your swipe when the top RecyclerView collapses at the half, and then swipe down. You can see half of the top items being cut.
This only happens for the collapsing View being/includes a RecyclerView.
GIF
(Ignore the changing color - it is just a result of compressing GIF)
Question
Did I do anything wrong or it is a MotionLayout bug?
I came up with an alternative solution.
For easier communication, I will use rvTop for the top RecyclerView and rvBottom for the bottom RecyclerView.
Instead of "shrinking" rvTop, the idea is to "hide" it instead.
So instead of let rvBottom constraint to the bottom of rvTop, we need to introduce a new invisible line in between them, and use MotionLayout to animate this invisible line upwards, while keeping the alpha change of rvTop.
In order to do this, we have to make rvBottom opaque, otherwise it will overlap with the fading rvTop.
I have updated the code in the sample project to demonstrate the changes.
And the effect is:
EDIT:
Another alternative is to remove rvTop's constraint to top of parent after the transition.
Yes, this will make it simply scroll with the rvBottom; but we can add a little bit of translationY to make it "scroll slower than rvBottom".
This can handle the case where you cannot make rvBottom opaque, for example the page itself uses a gradient background.
The effect looks like this:

Current scroll position in CoordinatorLayout with CollapsingToolbarLayout

I would like to scroll to the certain view when it becomes in focus.
I thought I could use onNestedScroll but the problem is that it takes only the distance to scroll, not the absolute scroll value.
So, I can get where the view is using getLocationInWindow but I don't know how to get the Y scroll of the entire layout. I tried to use AppBarLayout current offset, but it only shows the scroll on the collapsing toolbar.

How to properly scroll nested-scrollview?

How to properly scroll to a position in nestedscrollview which is inside a coordinate layout? When I use scrollTo(), it seems like the view inside AppBarLayout is loosing the ability to scroll down when I scroll to the end of NestedScrollView and coming back to top. What I need to know is how to programtically scroll to a position in nestedscrollview without causing problem with the normal behavior of collapsing layout.
Issue is similar to what is mentioned in this post:
The Coordinator layout doesn't Scroll up for a specific position
There is a Gif attached along with the above question:
https://i.stack.imgur.com/uSGfX.gif
I have tried the solution in above link, but it is not working.

Fixed header with CoordinatorLayout showing shadow when scrolling

The classic coordinator layout gives you the following [source]:
However, I don't want the top header views to scroll until they "become" a toolbar pinned at the top, with a shadow below. I want them all fixed (or pinned) but to show the shadow only the nested scroll view starts to scroll under the pinned ones. Something like the main app drawer on Marshmallow devices, where the "search bar" becomes pinned and the list of apps scroll under it.
Hope I made myself clear. Is there any easy way I could achieve that without listening for scroll events and handling this manually?
EDIT
Here is what I'm trying to achieve:
. Notice on the right image how there is now a shadow below the list of apps because the user scrolled the list.
Thank you!
This is exactly what you are looking for: HideOnScroll
Set actionBar elevation to 0 initially. Add a scroll listener to your scrolling element. When you detect it has scrolled (dy > 0) you set the actionBar elevation to 4dp(the default actionBar elevation) and back to 0dp at dy == 0.
In your scroll listener you can, at least for recyclerViews, use the canScrollVertically function to check if you're at the top or not.

Difference between different scrollFlags for CollapsingToolbarLayout

I am trying to learn about CollapsingToolbarLayout which has some value set to scrollFlags to control how the view within it will collapse. Can anybody clearly demarcate the difference between these flags:
scroll
enterAlways
exitsUntilCollapsed
enterAlwaysCollapsed
enterAlways
How do these work when we set these flags to both Toolbar and CollapsingToolbarLayout.
I've made a table to clear things up. Also wrote quite an informative blog post with an example code on GitHub :)
scroll
Scroll Up: the view becomes visible when the layout's been scrolled all the way up
Scroll Down: the view scrolls with the rest of the content like it's a part of it; will hide if the layout's height is bigger than the screen's one
enterAlways
Scroll Up: the view becomes visible on every scroll up action, even if there's still a lot of content to scroll up
Scroll Down: the view scrolls with the rest of the content like it's a part of it; will hide if the layout's height is bigger than the screen's one
enterAlwaysCollapsed
Scroll Up: the collapsed version of the view (e.g. Toolbar) becomes visible on every scroll up action, and it expands (e.g. Toolbar with an ImageView) only when scrolled all the way up
Scroll Down: the view collapses and then hides, if the layout's height is bigger than the screen's one
exitUntilCollapsed
Scroll Up: the view is always visible, provided its height is > 0 and the expanded version (e.g. Toolbar with an ImageView) will become visible when scrolled all the way up
Scroll Down: the view scrolls with the rest of the layout's content, but only till its collapsed state (hence - "exit until collapsed"), so in case of a Toolbar with a fixed height, it will always be visible on the top
snap
Scroll Up AND Down fast scrolls up or down based on how much of the view is visible - if more than 50% - the view will scroll down, showing itself, if less - the view will hide; used with other flags as a further customization
From Antonio Leiva's blog here, the flags work like this:
scroll: This means it will scroll while scrolling the targeted view (our recycler view in this case).
enterAlways: When we scroll up, the view will immediately reappear.
enterAlwaysCollapsed: if the view has a collapsed mode, it will reappear collapsed when scrolling up.
exitUntilCollapsed: it won´t exit from the screen until the view is collapsed.

Categories

Resources