material-components / material-components/material-components-android

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

Open
#4,227 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the behavior with ExtendedFloatingActionButton as a direct child of CoordinatorLayout, a RecyclerView, and the provided RecyclerView.OnScrollListener on Android API 34 with Material 1.11.0. Inspect the shrink() and extend() transitions while scrolling and verify that the FAB remains anchored in the same position after both animations.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
design, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.