Search code examples
androidandroid-scrollviewfloating-action-buttonandroid-nestedscrollview

Floating Action Button fixed in ScrollView and Constraintlayout


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

Solution

  • 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>-->