CODEWITHSUNDEEP
androidfloating-action-buttonandroid-constraintlayout
hskocadag
hskocadag

Reputation: 73

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

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

enter image description here

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

Upvotes: 7

Views: 5800

Answers (5)

Sandeep PS
Sandeep PS

Reputation: 73

 <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"

Upvotes: 2

Idan Damri
Idan Damri

Reputation: 194

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!

Upvotes: 0

SaravInfern
SaravInfern

Reputation: 3388

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>

Upvotes: 8

Jo&#227;o Abrunhosa
Jo&#227;o Abrunhosa

Reputation: 16

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.

Upvotes: 0

Omkar
Omkar

Reputation: 3100

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.

Upvotes: 1

Related Questions