BottomAppBar has a cradle (hole) when FloatingActionButton is hidden

Question

In a word game for Android I show a floating action button with "Play" icon, when a valid word is at the game board:

mFab.setVisibility(canPlay ? View.VISIBLE : View.GONE);

However when I hide it, there is a hole left in the bottom app bar:

The theme of my app is Theme.MaterialComponents.Light.NoActionBar and the coordinator layout with:

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

    <TextView
        android:id="@+id/expireText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#fff"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Title" />

</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:srcCompat="@drawable/ic_baseline_play_arrow_24"
    app:layout_anchor="@id/bottomAppBar"
    android:contentDescription="@string/play_words" />

How to remove this cardle, i.e. get the bottom app bar rectangular again, when the FAB is hidden?

Answer 1

If you want to hide the bottomAppBar cradlle , you should call the hide() function of FloatingActionButton to hide the floating button instead of setting the visibility to GONE. As your FloatingActionButton is mFab , so call as follows ..

mFab.hide()