Floating button over bottom sheet layout

Question

I want to design a bottom sheet that will have a TextView ("Delete") and a floating button ('x') as shown:

How do I achieve this so that the 'x' appears over the TextView layout? I've tried different variations but they do not produce the result I want. I'm not sure what I'm missing. I found a lot of articles online that use FloatingButton over layouts but for some reason my output is always unexpected. I also found a similar question on stackoverflow, but the answer was not very helpful: link

My bottom_sheet.xml layout code looks like this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/delete_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background_primary">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Delete"
            android:textColor="@color/text_primary"
            android:textSize="15sp" />
    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="24dp"
        android:layout_height="24dp"
        app:layout_anchor="@id/delete_container"
        android:layout_gravity="top|end"
        android:src="@drawable/ic_cancel_24dp" />

</FrameLayout>

but this just adds the floating button to the end (right) of the LinearLayout.

I also tried adding a marginTop to my LinearLayout so it "pushes" the layout down and leaves space at the top for the button, but then that space is just filled up by white background color. I also tried adding an alpha = 0 to the outermost FrameLayout to try to avoid this, but it still shows as white background.

I'd appreciate any inputs. Thanks for your time.

Answer 1

A working example with a ConstraintLayout (this seems much simpler):

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ...>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
    ... />
</androidx.constraintlayout.widget.ConstraintLayout>