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.
Related
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:
I have a recycler view below my appbar, and it expands when I'm at the top of my RV and I scroll up one more time. I need my collapsed toolbar to expand when the smooth scrolling animation reaches the top, so I don't need to scroll up again. Instead what I get is that I scroll to the top, and my RV stops, then I have to scroll again just to expand the collapsed toolbar.
I am currently looking into MotionLayout, because in this answer I've read it offers easier behavior customization https://stackoverflow.com/a/55328600/13150066
I don't know how to upload videos here, but if you have an idea and want to check out the behavior I want, check out spotify's playlist.
Is there a solution to my problem so I don't have to change to MotionLayout?
I had to take a look at those MotionLayout and it's super easy. Made it work!
I downloaded Android Studio 4.1 so I could use the new layout design interface and it work wonders. Honestly I thought it was going to be really difficult to achieve, this effect, but it was really simple, and everything is pretty self explainatory. Anyways, I'm leaving you the tutorial I did it with, hope it helps!
https://blog.stylingandroid.com/motionlayout-collapsing-toolbar-part-1/
I think the most beneficial part of using MotionLayout is that it extends from ConstraintLayout, so your Layouts are laid flat. No Collapsing Toolbar inside an AppBar, with a Toolbar and an ImageView nested. Using MotionLayout, I only used an imageView laid flat and the animations are set in a new XML.
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.
I have a vertically scrollable list using a RecyclerView. The layout I'm trying to implement is that when you scroll down far enough and reach a specific item, if you keep scrolling past this item it will stick to the bottom of the screen while the rest of the list continues to scroll behind it. Currently it's implemented by having a scroll listener on the RecyclerView and manually adjusting the position of the sticky view as required, but this is hacky and hard to build on.
Is there an easier way to have this kind of layout? I am currently investigating using a CoordinatorLayout but I'm not sure if it's the right tool for the job.
You can accomplish this using a CoordinatorLayout with a custom behaviour. The behaviour should be applied to the sticky view and make it appear/disappear as the RecyclerView scrolls. You have to override onStartNestedScroll in your behaviour to return true to receive calls for scroll changes.
I have a layout with a linearLayout (top layout) and a listview under this.
What I want to do is like the phone app in Lollipop:
With the scrollbar I can scroll the contact list (top layout doesn't move)
When scroll the list with the finger, first the top layout is scrolling and once it is not visible anymore the listview scroll. When the top layout is visible the scrollbar doesn't move.
Someone has any idea how to do this trick?
What I'm thinking :
I can add the top layout to the header of listview, but the scrollbar take count of the header. And if I scroll with the scrollbar, the top layout will scroll
Trying to set a scrollListener to the listview, and translate the top view, but don't think it will be good and the scrollY is not available for listView
I think I can do something with a scrollView for the root layout, but I know it is not good to put a listview inside a scrollview.
I don't find any proper way to do this kind of feature...
EDIT: To be more clear, I want to translate the listview before I'm able to scroll the listview itself. Problem is when translate listview, the listview height will not expand.
I am also getting this problem in version 5.1 in lower version it's working fine.Try to use in 5.0 As it STABLE verson, also check another scrolling bug in 5.1 in this link here I could not comment so posting this as answer.