Search code examples
androidmaterial-designfloating-action-buttonandroid-coordinatorlayoutandroid-snackbar

FloatingActionButton with Snackbar and transparent navigation bar


i have <item name="android:windowTranslucentNavigation">true</item> in my styles.xml.

I give the floating action button margin because of the transparent navigationbar.

I have a problem that my snackbar is below the transparent navigation bar. I fixed this by given the snackbar a padding, but now between my snackbar and my floating action button is to much space. I tried to create a custom behavior for my floating action button, but the custom margin for the navigationbar and the padding from the snackbar caused wrong heights when the snackbar is dismissed or shown.

Thats my floating action button inside the android.support.design.widget.CoordinatorLayout that has the attribute android:fitsSystemWindows="true"

<android.support.design.widget.FloatingActionButton
        android:id="@+id/myFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="bottom|right|end"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        app:borderWidth="0dp"
        app:elevation="12dp"
        app:layout_behavior="...ScrollAwareFABBehavior"
        app:rippleColor="@color/md_indigo_700" />

I haven´t found a solution for aligning the FloatingActionButton and the SnackBar above the NavigationBar without destroying the behavior.

My CoordinatorLayout is inside a fragment. And here is the activity layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" />

fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:wheel="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/fragment_toolbar" />

    <com.pnikosis.materialishprogress.ProgressWheel
        android:id="@+id/progress_wheel"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:visibility="gone"
        wheel:matProg_barColor="#5588FF"
        wheel:matProg_progressIndeterminate="true" />

    <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingBottom="@dimen/navigation_bar_bottom_padding"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/myFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="bottom|right|end"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        app:borderWidth="0dp"
        app:elevation="12dp"
        app:layout_behavior="...ScrollAwareFABBehavior"
        app:rippleColor="@color/md_indigo_700" />

</android.support.design.widget.CoordinatorLayout>

Solution

  • I think this will do. Check it out, and if it's not working share your snackbar code as well.

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/myFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_gravity="bottom|right"
        app:borderWidth="0dp"
        app:elevation="12dp"
        app:layout_behavior="...ScrollAwareFABBehavior"
        app:rippleColor="@color/md_indigo_700" />