Material-components-android: [FloatingActionButton] Snackbar overlapping FAB when anchored to BottomNavigationView

Created on 16 Sep 2019  路  4Comments  路  Source: material-components/material-components-android

Description: When FAB is placed above BottomNavigationView using layout_insetEdge on the BottomNavigationView showing a Snackbar anchored to BottomNavigationView is overlapping the FAB. If this is the expected behaviour feel free to close it. If anyone knows how I can solve this issue, I would appreciate letting me know.

Expected behavior: FAB to move above Snackbar.

Source code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_insetEdge="bottom"
        app:menu="@menu/menu_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        fab.setOnClickListener {
            Snackbar.make(root_view, "Hello, World!", Snackbar.LENGTH_LONG)
                .setAnchorView(R.id.bottom_navigation_view)
                .show()
        }
    }
}

Android API version: 29

Material Library version: 1.1.0-alpha10

Device: Pixel 3

fab_bug

bug

All 4 comments

I don't think that is expected behavior, so we'll look into our recommendation.

@msasikanth Does anchoring to the fab via setAnchorView(R.id.fab) instead of the bottom nav work?

@msasikanth Does anchoring to the fab via setAnchorView(R.id.fab) instead of the bottom nav work?

That would make the Snackbar show above FAB. What I am expecting is Snackbar to be displayed above BottomNavigationView and FAB to slide up so that Snackbar won't overlap FAB.

The Material spec now guides against animating/sliding other components along with the Snackbar. The setAnchorView API is intended for the case of placing the Snackbar above other components, so we have no plans to support anchoring + sliding other components at the same time.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

magnusfernandes picture magnusfernandes  路  3Comments

KelvinPac picture KelvinPac  路  3Comments

ahmaducg picture ahmaducg  路  3Comments

Mirmuhsin picture Mirmuhsin  路  3Comments

gabrielemariotti picture gabrielemariotti  路  3Comments