Equally space menu items of BottomNavigationView

Question

I'm using a BottomNavigationView (from now on BNV) to switch between Fragments, but I cannot find an XML attribute or just a way to have all the items (the images) equally spaced so that they fill the entire width in all the devices.

My XML for the activity containing both the BNV (pardon the bad colouring, it's just to make it more clear):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Navigation">

    <!--Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@color/main_light_blue"
        app:titleTextColor="@color/white"
        android:elevation="4dp" />

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="57dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="MainActivity">
    </FrameLayout>

    <!--BNV-->
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="0dp"
        app:elevation="0dp"
        app:itemBackground="@android:color/holo_orange_dark"
        android:background="@android:color/holo_orange_dark"
        app:itemIconTint="@color/black"
        app:itemTextColor="@color/black"
        app:menu="@menu/footer" />

</RelativeLayout>

the menu items:

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

    <item
        android:id="@+id/bacheca"
        android:title="@string/bacheca"
        app:showAsAction="always"
        android:icon="@drawable/bacheca_home"
    />

    <item
        android:id="@+id/cerca"
        android:title="@string/cerca"
        app:showAsAction="always"
        android:icon="@drawable/search_black_24dp"
        />

    <item
        android:id="@+id/nuovo"
        android:title="@string/nuovo"
        android:icon="@drawable/new_post_outlined"
        app:showAsAction="always"
    />

    <item
        android:id="@+id/profilo"
        android:title="@string/profilo"
        android:icon="@drawable/account_circle_black_24dp"
        app:showAsAction="always"
    />

</menu>

The entire activity looks like this on a mobile phone:

and like this on a tablet:

Hope someone can help me on this.

EDIT: thanks to the user @GoRoS for solving the problem of having blank spaces at the left and right edges of the BNV. It has been solved just by adding android:background="@android:color/holo_orange_dark" to the BNV.

yes, but that does what it is expected to: wraps the content and centers, doesn't really change anything. the blank space remains but it's technically not part of the view itself, it's just the background — davide m., Jan 20 '19 at 09:57
This attribute `android:layout_width="fill_parent"` makes the bnv as wide as its parent layout. Did you check this parent layout how wide it is? — forpas, Jan 20 '19 at 14:10
the parent is the RelativeLayout set as background. its width and height are match_parent, thus covering the entire background. i'll post an edit to clarify this — davide m., Jan 20 '19 at 17:58
So the bnv covers the full width of the parent and your problem is that the items a pushed to the center? Because the image is misleading. — forpas, Jan 20 '19 at 18:43
exactly, the bnv always covers the correct width, being it fill_parent, wrap_content or any other, but the items "in" it get pushed in the middle. — davide m., Jan 21 '19 at 09:33

score 2 · Accepted Answer · answered Jan 23 '19 at 16:49

2

Ok I managed to find a solution myself, the XML attribute that solves this is

app:itemHorizontalTranslation="false"

which is default to true. This "expands" the items to fit the entire width.

answered Jan 23 '19 at 16:49

davide m.

452
4
19

I am facing the same problem, tried by adding the app:itemHorizontalTranslation="false" in bnv but it is not working. can you please help me on this. – Rajendra Dec 27 '19 at 05:34
Should be `itemHorizontalTranslationEnabled`. Didn't work for me though. The items still remain clustered in the middle – smac89 Jun 29 '20 at 05:06
1

i add bellow line in BottomNavigationView tag and fixed this bug : app:labelVisibilityMode="labeled" – mahsa k Jul 01 '20 at 12:24
1

For Material BottomNavigationBar, the attribute is called `itemHorizontalTranslationEnabled`. It doesn't work for me though. – Micer Feb 14 '22 at 19:23
itemHorizontalTranslationEnabled="false" worked for me – Abdullah Programmer Oct 10 '22 at 06:09

GoRoS · Answer 2 · 2019-01-21T22:33:56.977

You're just mixing concepts when referring to background colours.

app:itemBackground = Default background for each menu item.

android:background = A drawable to use as the background of the view.

Android is filling correctly the holo_orange_dark colour to every menu items you have, however, that doesn't mean it will fill the whole row. For that purpose, just use the normal android:background attribute and that's it.

That's the effect after adding the android:background="@android:color/holo_orange_dark" line to the BottomNavigationView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Navigation">

    <!--Toolbar-->
    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimary"
            app:titleTextColor="@color/white"
            android:elevation="4dp" />

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:app="http://schemas.android.com/apk/res-auto"
                 xmlns:tools="http://schemas.android.com/tools"
                 android:id="@+id/main_container"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_alignParentStart="true"
                 android:layout_alignParentTop="true"
                 android:layout_marginStart="0dp"
                 android:layout_marginTop="50dp"
                 android:layout_marginBottom="57dp"
                 app:layout_behavior="@string/appbar_scrolling_view_behavior"
                 tools:context=".Navigation">
    </FrameLayout>

    <!--BNV-->
    <android.support.design.widget.BottomNavigationView
            android:id="@+id/footer"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="0dp"
            android:background="@android:color/holo_orange_dark"
            app:elevation="0dp"
            app:itemBackground="@android:color/holo_orange_dark"
            app:itemIconTint="@color/black"
            app:itemTextColor="@color/black"
            app:menu="@menu/footer" />

</RelativeLayout>

This is what you get adding that line:

Instead, if you remove it the result is your original problem:

I've demonstrated the difference results adding that line with a simple similar project, check the updated answer above. — GoRoS, Jan 21 '19 at 22:36
oh, my bad, i thought it was only needed to replace itemBackground with background. when added both, it works, thanks. i'm gonna edit the question though, i still need to fix the "spacing" problem — davide m., Jan 23 '19 at 09:30
There is no problem apart from the white spaces in the corners. Android Material design guidelines promotes that destination spacing as a default behavior. Check how the official iosched app of Google looks like in a tablet: https://lh3.googleusercontent.com/k6I3IjymkYb_UdngzB5MKutC3aID0qKKimjhiZRn1V05xKcvq2RCLnYXRGuOYH28q6j4=w1920-h1098-rw — GoRoS, Jan 23 '19 at 17:55
I'll keep that in mind, but I still wanted it to look like that. At least there's a way to do it, if it doesn't follow the material design guidelines doesn't matter for my case only. — davide m., Jan 23 '19 at 18:25

Equally space menu items of BottomNavigationView

2 Answers2