Alexiz Hernandez Alexiz Hernandez - 5 months ago 25
Android Question

Align multiple FloatingActionButtons with different sizes - Android

I am trying to add two

FloatingActionButton
s to my application. I added two of the with a plain
View
in between and that works:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<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="16dp"
android:src="@drawable/ic_go" />

<View
android:id="@+id/dummy"
android:layout_width="1dp"
android:layout_height="16dp"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="top|end" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
android:src="@drawable/ic_cancel"
app:layout_anchor="@id/dummy"
app:backgroundTint="@color/cancel_fab"
app:layout_anchorGravity="top|end" />

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


This places two
FloatingActionButton
s and it looks okay. But I wanted the cancel button to be smaller so I added this line:

app:fabSize="mini"


Now, I get the look I want, but the only issue is, that the mini
FloatingActionButton
appears to the right and I would like it to be aligned to the center of the bottom button.

enter image description here

Answer

As Mike mentioned in the comments, it is not advisable to have multiple FloatingActionButtons in an activity. I read the docs and I learned something I didn't know. I went with a different layout instead.