Android bottom navigation with rounded button

Question

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?

Answer 1

to acheive this you need a custom view. You can do this by creating a custom view class with extending BottomNavigationBar. You can look at this article to try to acheive your desired look for your BottomNavigationBar.

Answer 2

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>