stackoom
  简体   繁体   中英

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

 原文  2020-01-15 09:10:35  7   2    android/ android-layout/ android-constraintlayout

Question

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>

2 answers

solution1
 1  2020-01-15 09:25:25

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>

solution2
 1 ACCPTED  2020-01-15 09:26:44

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to add fixed button and edittext to bottom of screen Android layout with fixed button on bottom How to place floating action button to right bottom of screen inside Constraint Layout? How to make text scroll and keep other elements fixed to the bottom of the screen? Place a fixed height button at the bottom of the screen always Android Floating Action Button doesn't get fixed at the bottom Fixed proportion of layout on screen Fixed button at the bottom of the view Keep image view fixed to right of linear layout android how to set a button at a fixed location on the bottom of UI?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM