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!

Answer 1

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"