How to increase distance between items in BottomBar?

Viewed 2360

I want to make exactly the same, bottom bar with floating action button. I have used standart BottomNavigationView as well as this library, but I can't increase the distance between items. Is there a way to do that?

enter image description here

enter image description here

5 Answers

this is work for me.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent" />
</RelativeLayout>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:backgroundTint="@color/white"
    android:scaleType="center"
    app:fabSize="normal"
    app:layout_anchor="@+id/bottom_navigation"
    app:layout_anchorGravity="top|center_horizontal" />

</android.support.design.widget.CoordinatorLayout>

Output with this code

This worked for me Just add fifth item with:

<item android:title=""/>

This will add extra spaces between items.

Happy coding.

Add 5th item and then disable it programatically

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment_activity_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/fitness_navigation" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorSecondary"
        app:fabCradleMargin="6dp"
        app:fabCradleRoundedCornerRadius="20dp"
        app:fabCradleVerticalOffset="1dp">


            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:labelVisibilityMode="labeled"
                android:layout_marginEnd="16dp"
                app:itemIconTint="@drawable/tab_color"
                app:itemTextColor="@drawable/tab_color"
                app:menu="@menu/bottom_nav_menu" />



    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_start_exercise"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/title_start"
        app:tint="?colorOnPrimary"
        android:theme="@style/FabButtonTheme"
        app:maxImageSize="45dp"
        android:src="@drawable/ic_run"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

        <?xml version="1.0" encoding="utf-8"?>
        <menu xmlns:android="http://schemas.android.com/apk/res/android">
        
            <item
                android:id="@+id/navigation_home"
                android:icon="@drawable/ic_home"
                android:title="@string/title_home" />
        
            <item
                android:id="@+id/navigation_plan"
                android:icon="@drawable/ic_plan"
                android:title="@string/title_plan" />
            <item
                android:id="@+id/navigation_placeholder"
                android:title="" />
        
            <item
                android:id="@+id/navigation_diet"
                android:icon="@drawable/ic_diet"
                android:title="@string/title_diet" />
        
            <item
                android:id="@+id/navigation_profile"
                android:icon="@drawable/ic_profile"
                android:title="@string/title_profile" />
            
        </menu>
    
    
    
    private fun disableCenterItem(){
           val navView = findViewById(R.id.nav_view)
           val menuNav = navView.menu
           val placeHolderItem = menuNav.findItem(R.id.navigation_placeholder)
           placeHolderItem.isEnabled = false
        }

Please add to in your menu xml 3 rd position item shown below

  <item
    android:id="@+id/page_3"
    android:enabled="false"
    android:title=""
  />
Related