Right and Bottom Constraint on FloatingActionButton makes it unseen

Question

I have a FloatingActionButton inside a ConstraintLayout, like so:

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

    <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add_topic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_add"
                app:layout_constraintRight_toLeftOf="parent"
                app:layout_constraintBottom_toTopOf="parent"
                android:foregroundGravity="right|bottom"
                android:layout_marginRight="@dimen/material_tooltip_margin_top"
                android:layout_marginBottom="@dimen/material_tooltip_margin_top"
                android:elevation="6dp"
                app:pressedTranslationZ="12dp"
                app:borderWidth="0dp"/>

</android.support.constraint.ConstraintLayout>

However, as I inflate the layout on a Fragment with Android Databinding (on a Kotlin class), it does not appear.

I attempted to implement the solutions mentioned here, still inside the ConstraintLayout : Bottom Align Floating Action Button

It appears just fine if I display it with Top and Left constraints.

Anything I missed? Thanks!

score 35 · Accepted Answer · answered Dec 18 '17 at 21:20

35

Your layout includes these two constraints:

app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="parent"

This will functionally position the bottom-right corner of your FAB at the top-left corner of the screen. In other words, you've constrained the FAB to be off-screen.

Chances are good that you meant you want the right of the FAB to be at the right of the screen, and the bottom of the FAB to be at the bottom of the screen. So use these instead:

app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

answered Dec 18 '17 at 21:20

Ben P.

52,661
6
95
123

Have you set additional attributes to the FAB or the parent ConstraintLayout? Replacing the constraints alone does not work, unfortunately. – Monica Aspiras Labbao Dec 18 '17 at 23:30
Turns out I had a problem with a ViewPager whose bounds are way off the screen. I'll post a different question if someone hasn't already. Thank you @Ben P. – Monica Aspiras Labbao Dec 20 '17 at 20:24
to support RTL use app:layout_constraintEnd_toEndOf="parent" – Pnemonic Sep 13 '18 at 07:00

score 1 · Answer 2 · answered Feb 25 '22 at 20:04

The FloatingActionButton can be aligned to all corners of the parent ConstraintLayout:

FAB constraint relation	XML markup
top & start	`app:layout_constraintTop_toTopOf="parent"` `app:layout_constraintStart_toStartOf="parent"`
top & end	`app:layout_constraintTop_toTopOf="parent"` `app:layout_constraintEnd_toEndOf="parent"`
bottom & start	`app:layout_constraintBottom_toBottomOf="parent"` `app:layout_constraintStart_toStartOf="parent"`
bottom & end	`app:layout_constraintBottom_toBottomOf="parent"` `app:layout_constraintEnd_toEndOf="parent"`

To evenly position it, use layout_margin:

android:layout_margin="24dp"

Right and Bottom Constraint on FloatingActionButton makes it unseen

2 Answers2