How to add a button to a BottomNavigationView

Question

I'm wondering how to add a button to a BottomNavigationView, I include it inside the BottomNavigationView. But it was a work around. I want to know how to do it correctly?

I'm looking to add a button in the middle of the BottomNavigationView if someone knows how, besides the way I did it, because every time I change the menu item the button flashes

xml(menu):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/app_home"
        android:enabled="true"
        android:icon="@drawable/home"
        android:title="@string/home"/>
    <item
        android:id="@+id/app_calendar"
        android:enabled="true"
        android:icon="@drawable/calendar"
        android:title="@string/calendar"

        />

    <item
        android:id="@+id/app_add"
        android:enabled="true"
        app:showAsAction="collapseActionView"
        android:icon="@drawable/badd"
        tools:ignore="MenuTitle" />

    <item
        android:id="@+id/app_graphics"
        android:icon="@drawable/graphics"
        android:enabled="true"
        android:title="@string/graphics"
        />
    <item
        android:id="@+id/app_engine"
        android:enabled="true"
        android:icon="@drawable/engine"
        android:title="@string/home"
        />
</menu>

Work around

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        android:background="@color/colorFooter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_menu"
        tools:ignore="MissingConstraints" >

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnAdc"
            android:layout_width="76dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@menu/buttonadd"
            android:gravity="center"
            android:text="@string/add_btn"
            android:textSize="25sp"

            />
    </com.google.android.material.bottomnavigation.BottomNavigationView>

Answer 1

I have used imageView you can change to button as per your requirement

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="vertical">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:elevation="2dp"
            android:src="@drawable/ic_usernew"
            app:layout_constraintBottom_toBottomOf="@+id/bot_nav_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bot_nav_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="0dp"
            android:background="@color/white"
            app:elevation="0dp"
            app:itemIconSize="20dp"
            app:itemTextAppearanceActive="@style/BottomNavigationView.Active"
            app:itemTextAppearanceInactive="@style/BottomNavigationView"
            app:itemTextColor="@drawable/tab_icon_selector"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_nav_menu" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

and in bottom_nav_menu you can write like this

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_dashboard"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/nav_team"
        android:icon="@drawable/ic_affiliate"
        android:title="Affiliate" />
    <item
        android:id="@+id/nav_main"
        android:title="" />

    <item
        android:id="@+id/nav_wallet"
        android:icon="@drawable/ic_user_myaccoun"
        android:title="My Account" />
    <item
        android:id="@+id/nav_more"
        android:icon="@drawable/ic_more"
        android:title="More" />

</menu>

Hope this answers your question.