Android bottom navigation with rounded button

Issue

I want to do something like this in my android app.
I tryied with app bar and fab button but was unsuccessful.
Do you have any ideas?

Solution

I have created a Bottom navigationView with 5 menu items.
The middle item has no image.
So I added an imageButton(android:clickable=”false”) inside the bottom navigationView.

 <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_instructor"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:background="@color/bg_bottom_nav_bar"
            android:elevation="15dp"
            app:itemIconSize="30dp"
            app:itemIconTint="@drawable/bottom_navigation_colors"
            app:itemTextAppearanceActive="@style/TextStyleTab"
            app:itemTextAppearanceInactive="@style/TextStyleTab"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/instructor_bottom_nav">

            <ImageButton
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_gravity="center"
                android:layout_marginBottom="15dp"
                android:background="@drawable/fab"
                android:clickable="false"
                android:src="@drawable/ico_add" />
        </com.google.android.material.bottomnavigation.BottomNavigationView>

Answered By – Hernâni Pereira

Answer Checked By – Marilyn (FlutterFixes Volunteer)