Curved Bottom Navigation - Center FAB Bottom Navigation Android Studio

 

Hello.. Friends... If you're searching for the above bottom navigation style to implement in your android application, Then you're in a right place. So just scroll towards the bottom you find everything. 

First of all you have to add this dependency in your android build.gradle(:app) file

implementation 'com.google.android.material:material:1.6.1'

And Use BottomAppBar with BottomNavigationView and FAB to create this view

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">
            <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottomNavigationAppBar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:background="@drawable/bottom_app_bg"
                app:backgroundTint="@color/black"
                android:gravity="bottom"
                android:layout_marginTop="50dp"
                app:fabCradleMargin="10dp"
                app:fabCradleRoundedCornerRadius="30dp"
                app:fabCradleVerticalOffset="1dp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"

                >
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="16dp"
                    android:background="@color/transparent"
                    app:itemIconTint="@color/color_icon_tint"
                    app:menu="@menu/bottom_navi_item"
                    app:labelVisibilityMode="unlabeled"
                    android:elevation="0dp"
                    app:elevation="0dp"
                    />
            </com.google.android.material.bottomappbar.BottomAppBar>
            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/akar_icons_"
                android:scaleType="center"
                android:src="@drawable/akar_icons_"
                android:tint="@color/white"
                app:backgroundTint="@color/saffron"
                app:layout_anchor="@id/bottomNavigationAppBar"
                />
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

use the above .xml code you can refer here. 

Below is not a drawable you have to create colour folder in res directory. 
And write this file cooler_icon_tint.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@color/white"
        />
    <item
        android:state_checked="false"
        android:color="#8DFFFFFF"
        />
</selector>

Below is the Bottom Navigation menus
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:title="HOME"
        app:showAsAction="always"
        android:icon="@drawable/material_symbol"
        />
    <item
        android:id="@+id/Liberary"
        android:title="LIB"
        app:showAsAction="always"

        android:icon="@drawable/fluent_library_16_filled"
        />
    <item
        android:title=""
        app:showAsAction="always"
        />
    <item
        android:id="@+id/meter"
        app:showAsAction="always"
        android:title="METER"

        android:icon="@drawable/mdi_speedometer"
        />
    <item
        android:id="@+id/profile"
        android:title="PROFILE"
        app:showAsAction="always"
        android:icon="@drawable/bxs_user"
        />
</menu>

THANK YOU