How to increase distance between items in BottomBar?

Question

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?

Hippocrene

You could use padding for the items in the Bottom bar. – N

I just answer the similar question: #45380572 – Grandniece

Answer 1

Add a fifth item to your bottom navigation. Give it an empty string for its label and a completely transparent image for its icon. Also make it disabled. Put this item in the middle position.

The visual effect will be that there's no item in the center of the screen, and the rest of the buttons should be spaced nicely around the floating action button.

Bloomington

Answer 2

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>

Satan

Answer 3

This worked for me Just add fifth item with:

<item android:title=""/>

This will add extra spaces between items.

Happy coding.

Dannielledannon

Answer 4

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
        }

Cockade

An explanation would be more helpful to the OP. – Handtomouth

Answer 5

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

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

Bowens