BottomNavigationView is not full width

Question

I am working on an Android app and implementing BottomNavigationView from the design library. I have looked at many examples and I can't figure out what is wrong with my layout. The BottomNavigationView is not displayed as full width.

Another issue is the status bar color is not getting applied.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- Include the toolbar -->
<include layout="@layout/toolbar"/>

<RelativeLayout android:id="@+id/fragment_container"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>


<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/bottom_navigation_main"/>

</android.support.design.widget.CoordinatorLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"/>

</android.support.design.widget.AppBarLayout>

Edit: Added solution for Status Color not being set

android:fitsSystemWindows="true"

(colorPrimaryDark) status bar color not working on android v21?

Fourhanded

Answer 1

The BottomNavigationView is not displayed as full width.

It is not supposed to.

According to design guidelines the width of an action can vary between 80dp and 168dp. The two actions you have defined are not sufficient to fill the whole area horizontally.
(As a side note, also according to guidelines the view should contain between three and five actions.)

If you want to fill the space behind the BottomNavigationView, you can set the background color of the view to be the same color as the items background:

<android.support.design.widget.BottomNavigationView
     android:background="@color/bottom_view_color"
     app:itemBackground="@color/bottom_view_color"

     // .... />

Luthanen

The Bottom Nav seems full width in Google Play Newstand, so I thought there was an issue with my layouts. I plan to add a third menu item soon. – Fourhanded

@Fourhanded Yes that is possible. I added solution for that. BUT Andy is correct, you should follow design specs. – Vegetative

Answer 2

That is doable. But it will againts default design specs, and I will suggest you to go with default design specs.

---

Now coming to my solution...

Define below dimensions into dimens.xml. These dimensions should be in values, values-large, values-large-land. And 600dp can be increased to 1000dp or more in values-large, values-large-land, if in tablet you are not seeing this change.

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>

And thats it!!! Result will be like

---

It's not a mazic.

Why dimensions has been added with such name and value is 600dp

Both dimensions is being used by BottomNavigationMenuView.java (which is the class being used to represent menu in BottomNavigationView). Below is code

public BottomNavigationMenuView(Context context, AttributeSet attrs) {
    super(context, attrs);
    ...
    mInactiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_item_max_width);
    ....
    mActiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_active_item_max_width);
    .....
}

Now these values is being used to create view with fixed width, as below

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ....
    if (mShiftingMode) {
        final int inactiveCount = count - 1;
        final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
        final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
        final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
        final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
        ...
    } else {
        final int maxAvailable = width / count;
        final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
        .....
    }
    ....
}

To use value of activeMaxAvailable always, I set a dummy value to mActiveItemMaxWidth (in dimens above). So activeWidth will have value of activeMaxAvailable. Same rule apply for inactiveWidth.

So when you build project, design_bottom_navigation_item_max_width and design_bottom_navigation_active_item_max_width defined into design-support-lib, will be replaced by dimensions defined by us.

Code verified on maximum supported options (5 max) also.

Vegetative

i am facing the issue with bottom navigation in mobile Bottomtabs display perfect but when i tried in tablet Bottomtabs display in center what the issue? – Atilt

YOu need to declare dimens for tablets also. The value must be greater than value of handsets – Vegetative

Okay, but i used SDP library for universal designing perspective and it handle as per screen size still facing the same issue. – Atilt

@Atilt what value you have added for tablets? – Vegetative

i didn't add any value for TAB actually i used SDP library which take care of it – Atilt

Perfect!!! It works! Exactly what I've looked for! Thank you, it is very helpful!=) – Intramolecular

Answer 3

I suggest to only use

android:background="@color/bottom_view_color"

It will display the bar as full width and it will keep the ripple effect when the user clicks the items.

If you also add app:itemBackground you will lose the ripple effect.

In your case

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/bottom_navigation_main"/>

Muticous

Answer 4

Here is my solution:

app:itemHorizontalTranslationEnabled = "false"

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

Skysail

this solutions worked fo me – Spandrel

Answer 5

A bit of a late answer, but for whoever is still looking for a solution:

<com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentInsetStart="0dp"
        app:labelVisibilityMode="labeled"
        android:layout_gravity="bottom">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="match_parent"
            app:labelVisibilityMode="labeled"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_nav_menu_res"/>

    </com.google.android.material.bottomappbar.BottomAppBar>

the app:contentInsetStart="0dp" fixes that random space on the left

Adamec