CODEWITHSUNDEEP
androidfloating-action-buttonbottom-sheet
Mangesh
Mangesh

Reputation: 5841

FAB is hiding under Bottom Sheet

I have following XML:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/app_bar">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <fragment
            android:id="@+id/fragment1"
            android:name="com.xyz.Fragment1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            tools:layout="@layout/fragment_layout1" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layoutBottomSheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="@dimen/global_margin"
        android:orientation="vertical"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <fragment
            android:id="@+id/fragment2"
            android:name="com.xyz.Fragment2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center|top"
            tools:layout="@layout/fragment_layout2" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/global_margin"
        android:layout_marginRight="@dimen/global_margin"
        android:src="@drawable/ic_add_white_24dp"
        app:borderWidth="0dp"
        app:elevation="4dp"
        app:layout_anchor="@id/layoutBottomSheet"
        app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>

The layout should appear as, Fragment1 then below that Fragment2 and FAB is anchored to Fragment2 but, above Fragment2 and not under it.

Actually it is showing as,

screenshot

What is going wrong? Any idea?

Upvotes: 4

Views: 4734

Answers (3)

msal
msal

Reputation: 968

<LinearLayout
        android:id="@+id/layoutBottomSheet"
        android:elevation="@dimen/global_margin"
        ...>

layoutBottomSheet probably has too much elevation, FloatingActionButton's default elevation is 4dp, that's the reason your button is hidden behind the higher layout.

Try a elevation value lower or equal to 4dp

Upvotes: 7

Antonio L&#243;pez
Antonio L&#243;pez

Reputation: 341

I've added app:layout_dodgeInsetEdges="bottom" in the FloatingActionBButton and app:layout_insetEdge="bottom" in the View with the bottom sheet behaviour: 

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:focusable="true"
        app:backgroundTint="@color/white"
        app:fabSize="normal"
        app:layout_dodgeInsetEdges="bottom"
        app:srcCompat="@drawable/icon"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_insetEdge="bottom"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        />

Upvotes: 0

Louis CAD
Louis CAD

Reputation: 11527

You can call setCompatElevation(...) on the FAB with a value higher than the bottom sheet elevation (which is 16dp if you're using style="@style/Widget.Design.BottomSheet.Modal") to make sure it's at the top.

Upvotes: 0

Related Questions