How to remove space/ curve/ cradle among FAB and BottomAppBar?

Question

I have the following XML code to form relation between BottomAppBar and FloatingActionButton.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment_activity_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--
        Workaround: android:layout_gravity="bottom" is required so that bottom bar stays at bottom
        most.
        -->
        <com.google.android.material.bottomappbar.BottomAppBar
            android:layout_gravity="bottom"
            
            android:backgroundTint="#ffff00"
            
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--
            Workaround: android:layout_marginEnd="16dp" is required to balance the mystery
            marginStart.
            -->
            <!--
            Workaround: app:elevation="0dp" and app:backgroundTint="@android:color/transparent" is
            used due to the following reason :-
            https://stackoverflow.com/questions/63518075/android-problem-in-transparent-bottom-navigation-inside-the-bottom-app-bar
            -->
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_marginEnd="16dp"
                app:elevation="0dp"
                app:backgroundTint="@android:color/transparent"

                android:id="@+id/nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:menu="@menu/bottom_nav_menu" />
        </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:contentDescription="@string/app_name"
            android:src="@drawable/ic_android_black_24dp"
            app:layout_anchor="@id/bottom_app_bar" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
</LinearLayout>

This is what we are getting.

However, this isn't exactly what we wish for. We wish to remove the space/ curve/ cradle among BottomAppBar and FloatingActionButton.

We tried to place the following attribute in BottomAppBar

app:fabAnchorMode="embed"

The space/ curve/ cradle are no longer seen. However, the position of FloatingActionButton also moved downward, which is not we wish for too.

How can we remove space/ curve/ cradle among BottomAppBar and FloatingActionButton, yet make the FloatingActionButton position stay slightly above BottomAppBar?

score 2 · Answer 1 · answered Apr 28 '23 at 10:34

fabCradleVerticalOffset : Distance of the FAB to the BottomAppBar.

fabCradleRoundedCornerRadius : Cradle Corner radius value

fabCradleMargin : Cradle Margin value

<com.google.android.material.bottomappbar.BottomAppBar
         app:fabCradleVerticalOffset="16dp"
         app:fabCradleRoundedCornerRadius="0dp"
         app:fabCradleMargin="0dp"
          ..>


      <com.google.android.material.floatingactionbutton.FloatingActionButton
          ../>

score 1 · Accepted Answer · answered Apr 28 '23 at 05:17

In order to remove that space/curve/cradle, you'd set the app:fabCradleMargin and app:fabCradleRoundedCornerRadius to 0dp without having to use app:fabAnchorMode:

<com.google.android.material.bottomappbar.BottomAppBar
    ....
    app:fabCradleRoundedCornerRadius="0dp"
    app:fabCradleMargin="0dp"/>

But, I just noticed that there is still a tiny curve after doing that which can be fixed programmatically by negating the margin value:

BottomAppBar bottomBar = findViewById(R.id.bottom_app_bar);
bottomBar.setFabCradleMargin(-bottomBar.getFabCradleMargin());

But this requires to remove app:fabCradleMargin from the layout to maintain the margin value.

How to remove space/ curve/ cradle among FAB and BottomAppBar?

2 Answers2