Sticky button at the bottom of scroll view

Question

I want some sticky button that is always visible when user scrolls, but when reach the bottom is fixed. I my problem is that when users scroll and reach the bottom the button overlaps some text.

This is what I have. The wrong version. The button don't let see some text in that case.

And this is what I want. That the button when you reach the end you have something like that.

This is my layout. Where I have some fields that are scrollable and the button that is outside. It's a constrain Layout.

The fields inside the scrollview are reduce to make more short the code and be easy to undersand.

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
                                             android:fitsSystemWindows="true">

    <ScrollView
            android:id="@+id/scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/wf_white"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
                android:id="@+id/offers_summary_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="@dimen/padding_offers_layout">

            <TextView
                    android:id="@+id/company_name"
                    style="@style/wf_text_copy_bold"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:layout_marginTop="15dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="ONE"/>

            <TextView
                    android:id="@+id/product_name"
                    style="@style/wf_text_copy"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    app:layout_constraintTop_toBottomOf="@+id/company_name"
                    app:layout_constraintStart_toStartOf="parent"
                    tools:text="Compact"/>

            <ImageView
                    android:id="@+id/logo_company"
                    android:layout_height="60dp"
                    android:layout_width="60dp"
                    android:layout_marginTop="@dimen/form_margins_small"
                    android:layout_marginEnd="@dimen/form_margins_small"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:contentDescription="@null"/>

            <TextView
                    android:id="@+id/offer_general_info"
                    android:layout_width="match_parent"
                    android:layout_height="?android:attr/listPreferredItemHeight"
                    android:ellipsize="end"
                    android:gravity="center_vertical"
                    app:layout_constraintStart_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/view"
                    android:text="@string/_CS_label_general_info"/>

        </android.support.constraint.ConstraintLayout>

    </ScrollView>

    <Button
            android:id="@+id/btn_go_to_checkout"
            style="@style/wf_button_primary"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="@dimen/text_margin_sides"
            android:layout_marginTop="@dimen/button_top_margin"
            android:descendantFocusability="beforeDescendants"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/scroll_view"
            android:text="@string/_OFCS_close_contract"
            android:fitsSystemWindows="true"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintVertical_bias="1.0"/>

</android.support.constraint.ConstraintLayout>

https://stackoverflow.com/questions/10316743/detect-end-of-scrollview try with this to detect when scroll view reaches end and then move your fixed button lets say X dp lower so it can not overlap your text. — peco, Sep 12 '19 at 08:31
and also as i understand, you want your yellow button to be always fixed but when user reach end of scroll view that button do not overlap text in scroll view right? But before reaching end its ok if it overlap scroll view? — peco, Sep 12 '19 at 08:33
when you scroll the button can overlap, but when reach the end no — dddddrrrrrr, Sep 12 '19 at 08:36

score 1 · Answer 1 · answered Sep 12 '19 at 08:46

Replace this

<ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/wf_white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:fillViewport="true">

with this

<ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/wf_white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_go_to_checkout"
        app:layout_constraintTop_toTopOf="parent"
        android:fillViewport="true">

Huỳnh Đức Bùi · Answer 2 · 2020-12-23T17:12:13.050

1

Just add padding bottom to the second ConstraintLayout. Note that padding bottom value must be greater than sticky button height

edited Dec 23 '20 at 17:12

answered Dec 23 '20 at 17:06

Huỳnh Đức Bùi

23
5

Sticky button at the bottom of scroll view

2 Answers2