I want to make a navigation bar like this one, does it have a name or anything i can search by. I don’t know how to move the selected circled item up like this image.

the navView itself

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:itemIconTint="@drawable/nav_item_color"
    app:itemTextColor="@drawable/nav_item_color"
    app:itemBackground="@drawable/nav_item_background"
    app:menu="@menu/bottom_nav_menu"
    android:elevation="10dp"/>

nav_item_background code

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/selected_item_background" android:state_checked="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

selected_item_background code

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="10dp"> <!-- Adjust bottom to move item up -->
        <shape android:shape="oval">
            <solid android:color="@color/selected_item_color"/>
            <size
                android:width="56dp"
                android:height="56dp" />
        </shape>
    </item>
</layer-list>

in the mainActivity

bottomNavigationView.setOnNavigationItemSelectedListener { item ->
    // Iterate through all menu items
    for (i in 0 until bottomNavigationView.menu.size()) {
        val menuItem = bottomNavigationView.menu.getItem(i)
        // Reset other items
        if (menuItem != item) {
            menuItem.icon.setTintList(getColorStateList(R.color.colorUnselected))
        }
    }
    // Set animation for the selected item
    item.icon.setTintList(getColorStateList(R.color.colorSelected))
    val view = bottomNavigationView.findViewById<View>(item.itemId)
    view.animate().translationY(-10f).duration = 150

    // Handle navigation action
    when (item.itemId) {
        R.id.nav_shop -> { /* Navigate to Shop fragment */ true }
        R.id.nav_categories -> { /* Navigate to Categories fragment */ true }
        R.id.nav_offers -> { /* Navigate to Offers fragment */ true }
        R.id.nav_profile -> { /* Navigate to Profile fragment */ true }
        else -> false
    }
}