CODEWITHSUNDEEP
androidxmlbuttonandroid-constraintlayoutfloating-action-button
nass_b
nass_b

Reputation: 486

FloatingActionButton inside constraintLayout in ScrollView

i have a floatingActionButton inside a ConstraintLayout which is inside a ScrollView

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_grey">

    <androidx.constraintlayout.widget.ConstraintLayout>

        ----
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/bag_background"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            />
        -----
    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

the problem is that the button is scrolling down and up with the UI

Ps: i don't know if it is important, but the scrollView is inside a drawerLayout

Upvotes: 0

Views: 219

Answers (2)

shmakova
shmakova

Reputation: 6426

To place the floating action button, use CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful to describe how to animate the button depending on scroll changes.

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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


        </androidx.constraintlayout.widget.ConstraintLayout>

    </ScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:layout_margin="16dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 2

Anwar Elsayed
Anwar Elsayed

Reputation: 493

You can make Your root view as FrameLayout then inside it, you will but the ScrollView then the FAB button something like below

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_grey">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/background_grey">

        <androidx.constraintlayout.widget.ConstraintLayout>

            <!--  your view xml here -->
        </androidx.constraintlayout.widget.ConstraintLayout>

    </ScrollView>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@drawable/bag_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />
</FrameLayout>

Upvotes: 2

Related Questions