How do I create a bottom navigation view that looks like this? Is it possible?

Question

The UX designer just gave me this, however, I have no idea on how to create a bottom navigation view layout that looks like this. I want to add in the center a circular button which is separated from the main bottom navigation

Answer 1

yes its possible use this

<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="center"
    app:menu="@menu/yourMenu"
    android:backgroundTint="@color/mediumBlue"
    app:fabCradleVerticalOffset="10dp"
    app:fabCradleMargin="8dp"
    app:hideOnScroll="true"
    app:fabCradleRoundedCornerRadius="20dp">

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

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/skyBlue"

    android:src="@drawable/ic_baseline_add_24"
    app:layout_anchor="@id/bottomAppBar"
    app:maxImageSize="35dp" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

"yourMenu "should look something like that

  <item
    android:id="@+id/menu_home"
    android:icon="@drawable/ic_baseline_home_24"
    android:title="@string/Home"
    app:showAsAction="always" />
<item
    android:title=""
    app:showAsAction="always" />
<item
    android:title=""
    app:showAsAction="always" />
<item
    android:id="@+id/menu_search"
    android:icon="@drawable/ic_baseline_search_24"
    android:title="@string/Search"
    app:showAsAction="always" />