How to increase width of BottomNavigationView to fill the screen

Question

How to increase width of BottomNavigationView menu. Below is the current scenario. I am not able to increase the width to complete screen.

Menu.xml

Answer 1

That is doable (Even without reflection). But it will againts default design specs, and I wil 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.

    600dp
    600dp

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.