CODEWITHSUNDEEP
androidandroid-layoutandroid-xml
Monica Aspiras Labbao
Monica Aspiras Labbao

Reputation: 649

Right and Bottom Constraint on FloatingActionButton makes it unseen

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!

Upvotes: 14

Views: 19668

Answers (2)

Martin Zeitler
Martin Zeitler

Reputation: 76799

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"

Upvotes: 2

Ben P.
Ben P.

Reputation: 54234

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"

Upvotes: 35

Related Questions