CODEWITHSUNDEEP
android
Shobit
Shobit

Reputation: 794

Floating button over bottom sheet layout

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

enter image description here

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.

Upvotes: 0

Views: 541

Answers (1)

einUsername
einUsername

Reputation: 1619

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>

Upvotes: 1

Related Questions