CODEWITHSUNDEEP
androidkotlinfloating-action-buttonandroid-snackbarmaterial-components-android
newakkoff
newakkoff

Reputation: 270

Show snack bar above FAB in androidx

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 enter image description here when i showing snackbar its looks like this enter image description here 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!

Upvotes: 12

Views: 4550

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

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);

Upvotes: 21

android developer
android developer

Reputation: 116372

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

Upvotes: 2

rexar5
rexar5

Reputation: 540

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

Upvotes: 3

Related Questions