How to place views inside Coordinatorlayout

I need to use Coordinatorlayout in order to get the layout_behaviour attr to hide FAB on scroll.

Normally I would just placing my FAB in the bottom - end, but this time I implemented expandable fab and I find it very hard to place 4 FABS one above each other in Coordinatorlayout .

Any ideas what can I do? I don't mind get solution either way(handle fab hiding on webview scroll below API 23 without Coordinatorlayout OR place the fabs one above each other correctly in Coordinatorlayout)

Currently this is my ConstraintLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    

    <WebView
        android:id="@+id/webView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </WebView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:focusable="true" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab1"
        app:layout_constraintEnd_toEndOf="@+id/fab1"
        app:layout_constraintStart_toStartOf="@+id/fab1" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab2"
        app:layout_constraintEnd_toEndOf="@+id/fab2"
        app:layout_constraintStart_toStartOf="@+id/fab2" />
    

</androidx.constraintlayout.widget.ConstraintLayout>

FAB's must be direct child of the coordinator layout

you can use

 app:layout_anchor="@id/****"
 app:layout_anchorGravity="center"

attributes for this

for your case, you can change the xml like :

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</WebView>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:layout_gravity="bottom|end"
    android:clickable="true"
    android:focusable="true" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="100dp"
    android:layout_marginEnd="0dp"
    app:layout_anchor="@id/fab1"
    app:layout_anchorGravity="center"
    android:clickable="true"
    android:focusable="true" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginBottom="200dp"
        android:clickable="true"
        android:focusable="true"
        app:layout_anchor="@id/fab2"
        app:layout_anchorGravity="center"/>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

How to place views inside Coordinatorlayout

1 Answers