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