androidnavigationbottomnavigationviewandroid-bottomappbarflutter-appbar

Android bottom navigation with rounded button


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?

Bottom navigation


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>
    

    enter image description here