material-components-android icon indicating copy to clipboard operation
material-components-android copied to clipboard

[ExtendedFloatingActionButton] Shrink and Expand animations whilst scrolling loose the position of the component

Open DavidMarquezF opened this issue 1 year ago • 3 comments

Description:

I've created an EFAB that is a direct child of CoordinatorLayout. In the CoordinatorLayout there is a RecyclerView with a scroll listener that expands and shrinks the EFAB (I'm trying to replicate the m3 scrolling behaviors seen here)

The problem is that when the shrink/expand is triggered, if I'm scrolling fast, the button dissapears (it goes behind my nav bar, it's as if the animations lost the position).

https://github.com/user-attachments/assets/7f87cd44-1fca-4c08-9b99-a5b0942ce272

Expected behavior: Screenshots and/or description of expected behavior

Calling shrink/expand whilst scrolling shouldn't affect at all the position of the fab (more so because it's positioned in the CoordinatorLayout and anchored on top of the bottom navigation)

Source code:

class FabExtendingOnScrollListener(
    private val floatingActionButton: ExtendedFloatingActionButton
) : RecyclerView.OnScrollListener() {
    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
        if (newState == RecyclerView.SCROLL_STATE_IDLE
            && !floatingActionButton.isExtended
            && recyclerView.computeVerticalScrollOffset() == 0
        ) {
            floatingActionButton.extend()
        }
        super.onScrollStateChanged(recyclerView, newState)
    }

    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        if (dy != 0 && floatingActionButton.isExtended) {
            floatingActionButton.shrink()
        }
        super.onScrolled(recyclerView, dx, dy)

Minimal sample app repro: Please consider attaching a minimal sample app that reproduces the issue. This will help narrow down the conditions required for reproducing the issue, and it will speed up the bug fix process. You may attach a zip file of the sample app or link to a GitHub repo that contains the sample app.

Android API version: 34

Material Library version: 1.11.0

Device: Pixel emulator, android v12

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

DavidMarquezF avatar Jul 16 '24 09:07 DavidMarquezF

If I disable the Expanding and shrink behaviour this doesn't happen at all. It seems like it is a problem of the animation.

I have other screens where the EFAB is not anchored to a view but just hanging around at the bottom of the screen and this also doesn't happen. It seems to be very specific to the fact that the EFAB is anchored somewhere.

DavidMarquezF avatar Jul 24 '24 05:07 DavidMarquezF

I've only been able to reproduce when I fling scroll, Not if i move up and down fast

DavidMarquezF avatar Jul 25 '24 10:07 DavidMarquezF

For anyone wondering there is a woraround:

Workaround

Create a new component that inherits from ExtendedFloatingActionButton and override the getBehavior function. Return null.

Why?

I'm guessing the current behavior (that should only work for BottomSheet and AppBar as of now, see this) doesn't work well with views that are not those ones. Either way I don't really get some of the functionality offered there, like moving it if a snackbar appears, since this is not what the m3 docs says (snackbar should appear on top of the fab)

DavidMarquezF avatar Aug 01 '24 07:08 DavidMarquezF