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?

Solution 1:

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>

Solution 2:

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.

Solution 3:

Originally answered here: https://stackoverflow.com/a/70409454/8956093

I achieved same UI using Frame layout. Here is the code

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/nav_host_fragment"android:name="androidx.navigation.fragment.NavHostFragment"android:layout_width="match_parent"android:layout_height="0dp"app:defaultNavHost="true"app:layout_constraintBottom_toTopOf="@id/bottom_navigation"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:navGraph="@navigation/nav_graph_home" /><com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottom_navigation"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/background_white_rounded_top"app:itemTextColor="@color/white"app:layout_constraintBottom_toBottomOf="parent"app:menu="@menu/bottom_nav_bar_home_items"app:labelVisibilityMode="unlabeled"></com.google.android.material.bottomnavigation.BottomNavigationView><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintBottom_toBottomOf="parent"><ImageViewandroid:id="@+id/toggle_alignment"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_home_scan" /></FrameLayout></androidx.constraintlayout.widget.ConstraintLayout>

and do not give icon for middle item.

<?xml version="1.0" encoding="utf-8"?><menuxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"tools:showIn="navigation_view"><groupandroid:checkableBehavior="single"><itemandroid:id="@+id/firstFragment"android:icon="@drawable/ic_one"android:title="" /><itemandroid:id="@+id/secondFragment"android:icon="@drawable/ic_two"android:title="" /><itemandroid:id="@+id/thirdFragment"android:title="" /><itemandroid:id="@+id/fourthFragment"android:icon="@drawable/ic_four"android:title=""/><itemandroid:id="@+id/fifthFragment"android:icon="@drawable/ic_five"android:title="" /></group></menu>