CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Dave Hamilton
Dave Hamilton

Reputation: 767

How to keep a floating button fixed to bottom right of screen and not fixed to the layout

I have a scrollable Layout and have added a Floating Menu button. This all works, but the button is fixed to a position on the layout, I want the button to be fixed to the bottom of the screen.

If the user scrolls up and down the button is fixed to the screen position and not the layout, in other words it remains in the bottom right hand corner at all times regardless of where the scroll view is at

What I have read, people are saying to use Relative layout, but i am sure i went with Constraint Layout because i wanted the layout to be scrollable. The example i keep coming across is: 

android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"

Any guidance would be greatly appreciated

Floating_Menu.xml

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

    <TextView
        android:id="@+id/textview_share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="80dp"
        android:layout_marginBottom="156dp"
        android:background="#5C212121"
        android:padding="8dp"
        android:text="StockDetails"
        android:textColor="#000000"
        android:visibility="invisible" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="147dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:elevation="16dp"
        android:focusable="true"
        android:visibility="invisible"
        app:backgroundTint="#ffffff"
        app:maxImageSize="50dp"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_pound" />


    <TextView
        android:id="@+id/textview_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="82dp"
        android:layout_marginBottom="99dp"
        android:background="#60212121"
        android:padding="8dp"
        android:text="StockFigures"
        android:textColor="#000000"
        android:visibility="invisible" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="90dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:elevation="16dp"
        android:focusable="true"
        android:visibility="invisible"
        app:backgroundTint="#ffffff"
        app:maxImageSize="50dp"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_arrow" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="120dp"
        android:layout_height="100dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="32dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:elevation="16dp"
        android:focusable="true"
        android:visibility="visible"
        app:backgroundTint="#ffffff"
        app:maxImageSize="50dp"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_add" />
</RelativeLayout>

Activity Layout: (The floating menu is the Include at the bottom) 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:id="@+id/ScrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".StockEnquiry">


    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/StockCodeLayout"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/BarcodeLayout">

            <EditText
                android:id="@+id/StockCode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />

            <TextView
                android:id="@+id/StockCodetext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Stock Code" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/SupplierLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SoldLayout">

            <EditText
                android:id="@+id/supplier"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/supplierText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Supplier" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/TestLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="200dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SupplierLayout">
            <EditText
                android:id="@+id/test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/testext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Some Test Box" />
        </RelativeLayout>

        <include
            layout="@layout/floating_menu"
            android:layout_width="411dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

Updated with change from Afzal Khan answer: 

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

<ScrollView

    android:id="@+id/ScrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/StockCodeLayout"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/BarcodeLayout">

            <EditText
                android:id="@+id/StockCode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />

            <TextView
                android:id="@+id/StockCodetext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Stock Code" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/SupplierLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SoldLayout">

            <EditText
                android:id="@+id/supplier"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/supplierText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Supplier" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/TestLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="200dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SupplierLayout">
            <EditText
                android:id="@+id/test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/testext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Some Test Box" />
        </RelativeLayout>
    </android.support.constraint.ConstraintLayout>
</ScrollView>
    <include
        layout="@layout/floating_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</RelativeLayout>

Upvotes: 0

Views: 2559

Answers (2)

Afzal Khan
Afzal Khan

Reputation: 346

Actually you should not put floating action button inside scrollable content, instead you should put floating action button outside your Scroll view Like below :-

<RelativeLayout>
.
... <ScrollView>
   ...Your Scroll View Content
   </ScrollView>
 <include
            layout="@layout/floating_menu"
            android:layout_width="411dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
</RelativeLayout>

It would be best if you use constraint layout in place of Relative layout

Upvotes: 2

Md. Asaduzzaman
Md. Asaduzzaman

Reputation: 15433

You have to use either RelativeLayout like below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".StockEnquiry">

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

         <!--! Your other content here -->

    </ScrollView>


    <!--! Your menu here -->
    <View
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Or FrameLayout like below:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".StockEnquiry">

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

         <!--! Your other content here -->

    </ScrollView>


    <!--! Your menu here -->
    <View
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</FrameLayout>

Upvotes: 1

Related Questions