How to create bottom navigation with floating action button

Question

How to create this design

I have used this code but not get expected result

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus"
        app:backgroundTint="@android:color/transparent"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="2dp"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

ic_plus.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:angle="180"
                android:endColor="#FFFF8B00"
                android:startColor="#FFFF4806" />
            <size
                android:width="56dp"
                android:height="56dp" />
        </shape>
    </item>
    <item
        android:left="10dp"
        android:right="10dp">
        <shape android:shape="line">
            <stroke
                android:width="2dp"
                android:color="#ffffff" />
        </shape>
    </item>
    <item
        android:left="10dp"
        android:right="10dp">
        <rotate android:fromDegrees="90">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
</layer-list>

dimens.xml

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

In Menifest

android:theme="@style/Theme.MaterialComponents.NoActionBar"

But I am getting this

Any help will be appreciated. Thanks

Answer 1

You have to add

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        app:backgroundTint="@null"
        app:tint="@null"
        ../>

The default style tints the background and the icon.