Show snack bar above FAB in androidx

Question

trying create app using androidx. my layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.photo.PhotoFragment">


    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerPhoto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_anchorGravity="top|center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:itemCount="48"
        tools:layoutManager="GridLayoutManager"
        tools:listitem="@layout/recycler_photo_item"
        tools:spanCount="3" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/photoCoordinator"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        >

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/mainBottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:fabAlignmentMode="center"
            android:backgroundTint="@color/colorPrimary"
            app:fabCradleMargin="@dimen/cradle_margin"
            app:fabCradleRoundedCornerRadius="@dimen/corner_radius"
            app:hideOnScroll="true"
            app:navigationIcon="@drawable/ic_menu_24px" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/photoFab"
            style="@style/Widget.MaterialComponents.FloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_camera_alt_24px"
            app:layout_anchor="@id/mainBottomAppBar" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

and its looks like that when i showing snackbar its looks like this google says that snackbar should showing above bottom app bar and fab but i cant when trying to show snack bar with bottom margin

val snackbarView = snackbar.view
    val params = snackbarView.layoutParams as CoordinatorLayout.LayoutParams

    params.setMargins(
            params.leftMargin + marginSide,
            params.topMargin,
            params.rightMargin + marginSide,
            params.bottomMargin + marginBottom
    )

    snackbarView.layoutParams = params

fab ups to! how can i show snackbar above fab and bottom app bar? sorry for my engllish!

Answer 1

Use the Snackbar in material components library and use the setAnchorView method to make a Snackbar appear above a specific view.

In your case you can use:

FloatingActionButton fab = findViewById(R.id.photoFab);
Snackbar snackbar = Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG);
snackbar.setAnchorView(fab);

Answer 2

So the issue you're running into is that Google still hasn't updated the FAB behavior to be consistent with the new design. Since your FAB lives in a coordinator layout and you're using that to launch your snackbar, the FAB moves up to accommodate (old behavior)

A few solutions:

1. Move the FAB out of the coordinator layout and just overlay it on top of the bottom app bar and its parent coordinator layout
   • This might mess up any interaction the FAB has with the bottom app bar. It is probably not a good long term solution, as putting the FAB in the coordinator is generally a good idea

2. Remove the FAB behavior

   • This will remove any behavior the FAB was doing. Same disadvantage as removing it from the coordinator except that it's much easier to reverse. I'd prefer this solution over the first for that reason

   • You can do this in XML using:

     app.layout_behavior=""
     

   • Or do it in code by using:

     CoordinatorLayout.LayoutParams params = 
                     (CoordinatorLayout.LayoutParams) 
     yourView.getLayoutParams();
     params.setBehavior(new AppBarLayout.ScrollingViewBehavior());
     yourView.requestLayout();
     

It looks like Google is still updating the behavior source. After they finish, you probably want to remove this so it can use its default behavior:

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java

Answer 3

Seems like Google updated the guidelines, but didn't update the SDK, as well as its own apps (like Gmail).

I've reported about this here:

https://issuetracker.google.com/issues/122163315