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?

I just answer the similar question: https://stackoverflow.com/questions/45380072/linearlayout-position-three-buttons-with-the-same-padding-between-them/45380274?noredirect=1#comment77766082_45380274 — phatnhse, Jul 31 '17 at 04:13

score 13 · Accepted Answer · answered Jul 31 '17 at 03:26

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.

score 1 · Answer 2 · answered Jan 04 '19 at 10:39

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>

Noor Hossain · Answer 3 · 2020-08-02T08:43:01.967

1

This worked for me Just add fifth item with:

<item android:title=""/>

This will add extra spaces between items.

Happy coding.

edited Aug 02 '20 at 08:43

answered Aug 02 '20 at 08:18

Noor Hossain

1,620
1
18
25

score 0 · Answer 4 · answered Jun 28 '21 at 05:18

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
        }

An explanation would be more helpful to the OP. – David Lee Jul 05 '21 at 03:17 — David Lee, Jul 05 '21 at 03:17

score 0 · Answer 5 · answered Oct 18 '21 at 07:33

0

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

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

answered Oct 18 '21 at 07:33

Roopak Varghese

51
1
3

How to increase distance between items in BottomBar?

5 Answers5