How to place floating action button to right bottom of screen inside Constraint Layout?

Question

I have a ScrollView at the top, inside that I have a ConstraintLayout . Setting height to match_parent doesn't work in ConstraintLayout so the height doesn't match the screen. Inside my ConstraintLayout I have a floating action button and it doesn't stay at the right bottom of the screen, but it stays at the right bottom of ConstraintLayout .

Image of my screen

How can I make the floating action button stay at the right bottom of the screen?

Answer 1

If your FAB is inside constraint layout try like this

<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.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon" />
</android.support.constraint.ConstraintLayout>

Answer 2

try with CoordinatorLayout instead contraints layout like below

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarMain"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMain"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="60dp">

    ........
    ........
</RelativeLayout> 

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

for more go through this tutorial.

Answer 3

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/contactBtn"
    android:layout_width="53dp"
    android:layout_height="62dp"
    android:clickable="true"
    android:layout_gravity="bottom|right"
    app:srcCompat="@android:drawable/ic_menu_send" />

This Worked For me..

android:layout_gravity="bottom|right"

Answer 4

What I did is that I put the FAB on the same level as the app bar, making it independent of the content itself presented on that page (using coordinator layout).

Try to put the FAB on the app bar level instead of content level. See if it works.

Answer 5

try putting the FAB in the XML in the same level of the parent of the constraint layout. That should fix it! Not only that, make sure that your parent layout is not linear layout!