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:
Related
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.
This is a question regarding the use of Android Transition API.
I am trying to animate the height change of a list, just like a dropdown menu.
I tried 2 approaches
Use a RecyclerView and animates its height change
Use a ScrollView > LinearLayout hierarchy and animates ScrollView's height.
The 2nd approach works perfectly.
But the 1st approach has a serious glitch - when the collapse transition starts, items disappear immediately.
By looking at the below GIF you can observe clearly the difference:
To be exact, items' visibility changes at the moment I change RecyclerView's LayoutParams, without waiting for the transition to finish, whatever it is expanding or collapsing
Code
I have created a minimal project on Github.
If you just want to look at the code, here is the MainActivity.
Question
Is it possible to achieve ScrollView's effect with a RecyclerView?
If yes, how?
My Idea is to do the transition of all the recycler view rows individual rather than the whole RecyclerView:
So when collapsing iterate through each ROW of a RecyclerView and do a transition. Remember to check for null if some rows are recycled they may return null. So after that collapse the whole recyclerView.
And like wise for the expanding do the same for the views.
This issue is cause by RecyclerView has many views with it but Scroll View has only one View nested in it.
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.
I'm trying to create a scrolling sheet of paper containing a RecyclerView. To achieve this I gave each item a background and its own shadow. When you look closely you can see where the items meet because the shadow is slightly darker. The left list also has a divider which has the wrong color because the shadow is behind it.
I was wondering if there may be a better solution for this. You can't set the background and shadow on the RecyclerView itself because then it wouldn't scroll of the screen as the bounds don't change. You can't use a LinearLayout+ScrollView because this would break when there are too many items.
I would say just use CardView and set useCompatPadding to true in your XML so that it adds enough padding for the shadows not to overlap.
Alternatively, you can add margin to your items.
Another option is using an ItemDecorator that does not draw anything but returns enough margin for shadows in the getItemOffsets method.