Floating Action Button fixed in ScrollView and Constraintlayout

Question

I have xml file with ScrollView that has an Constraintlayout as a child. What i am trying is to make Floating Action Button fixed on the same place on the screen despite scrolling. I tried with android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" and layout_anchorGravity="@+id/root_leyaut". I also tried to put FAB outside Constraintlayout but then i having an error that my ScrollView can't have multiply children.

my xml:

`<layout 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">

    <data>

        <variable
            name="montlyBudgeting"
            type="com.nswd.successplan.ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingViewModel" />
    </data>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/root_leyaut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background"
        tools:context=".ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingFragment">


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

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:contentDescription="+"
                layout_anchorGravity="@+id/root_leyaut"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:src="@drawable/ic_arrow_drop_down"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />
<------------------------rest of code-------------------->
 </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</layout>`

Answer 1

If you don't want to scroll the FAB, put the NestedScrollingView inside constraint layout.

<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="wrap_content">

     <androidx.core.widget.NestedScrollView
        android:id="@+id/root_leyaut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background">

        <!-- Put your scrolling contents here, dont forget the constraints -->

     </androidx.core.widget.NestedScrollView>

     <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:contentDescription="+"
        layout_anchorGravity="@+id/root_leyaut"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:src="@drawable/ic_arrow_drop_down"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
 </androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

I would not use the ScrollView as the root layout. You could use a second ConstraintLayout which would put the fab at the same "level" as the ScrollView. Then it should not scroll but stay in the corner. The following code should work, but i had to comment out a bunch of your code to get it running on my pc...

<!--<layout 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">-->

<!--    <data>-->

<!--        <variable-->
<!--            name="montlyBudgeting"-->
<!--            type="com.nswd.successplan.ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingViewModel" />-->
<!--    </data>-->

<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_height="match_parent"
    android:layout_width="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        layout_anchorGravity="@+id/root_leyaut"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="end|bottom"
        android:contentDescription="+"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.core.widget.NestedScrollView
        android:id="@+id/root_leyaut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:context=".ui.fragments.monthlyBudgetingFragment.MonthlyBudgetingFragment">
        <!--        android:background="@color/background"-->


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

            <!--            android:src="@drawable/ic_arrow_drop_down"-->
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--</layout>-->