Search code examples
androidandroid-xmlandroid-bottomnavandroid-bottom-nav-view

Equally space menu items of BottomNavigationView


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:

enter image description here

and like this on a tablet:

enter image description here

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.


Solution

  • 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.