why is my FAB animation going out of screen with Material BottomAppBar?

Question

So i got this working and it's great

Then i tried to set the parent FAB on the right with:

binding.bottomAppBar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END

It works but now the parent FAB animation goes out of screen.

Here is a better look of what is going on:

Open animation:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<rotate
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="45"
    android:duration="300" />

Close Animation:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<rotate
    android:fromDegrees="45"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="0"
    android:duration="300"
    />

Activity XML:

    <androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_gravity="bottom"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:fabAlignmentMode="end"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/addFav"
        app:layout_anchor="@id/bottomAppBar"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

How can i fix this? The child FABs animations work as intended.

Answer 1

Here is what's happening.

1. When the XML is inflated, the FAB is at the center. So pivotX is now center of the screen.
2. You set fabAlignmentMode programmatically in Java/Kotlin after inflation.
3. When rotation starts, pivotX is still using the value from inflation point and hence using old value.
4. The FAB is rotated about the center of its previous location and hence goes out of screen. Notice the curve in the motion of the FAB in the second GIF.

Setting the alignment in XML using fabAlignmentMode should resolve your issue.