floating action button with bottom bar

Question

I found a method of adding FAB by creating an empty item in menu but that only works when there are 3 items, for more that 3 items, the space between the items will be uneven.

MainActivity.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_anchor="@id/bottom_bar"
    android:id="@+id/frame"
    />

<android.support.design.widget.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:id="@+id/bottom_bar"
    android:elevation="20dp"
    android:layout_gravity="bottom|start"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/colorAccent"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/menu">

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

<android.support.design.widget.FloatingActionButton
    android:layout_width="52dp"
    android:layout_height="52dp"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="25dp"
    android:elevation="30dp"
    android:src="@drawable/ic_add_black_24dp"
    app:elevation="10dp" />

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

Here's my menu

Menu file

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

xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:id="@+id/trending"
    android:icon="@drawable/ic_trending"
    android:title="Trending" />
<item
    android:id="@+id/dashboard"
    android:icon="@drawable/ic_dashboard"
    android:title="Dashboard" />
<item android:title="   " />
<item
    android:id="@+id/people"
    android:icon="@drawable/ic_people"
    android:title="People" />
<item
    android:id="@+id/account"
    android:icon="@drawable/ic_account"
    android:title="Account" />
</menu>

Screenshot of how the bottom bar looks now

Answer 1

Got an answer from another SO question that was out of the box.... There is a default setting in Bottom Navigation View in android that shifts items when they are more than 3 in numbers. So to remove this shifting we have to use a helper class.

class BottomNavigationViewHelper {
@SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            //noinspection RestrictedApi
            item.setShiftingMode(false);
            // set once again checked value, so view will be updated
            //noinspection RestrictedApi
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}
}

Add these lines in progaurd-rules.pro as new design support library prevents this helper class to work properly(not gonna harm the code)

-keepclassmembers class android.support.design.internal.BottomNavigationMenuView {
boolean mShiftingMode;
}
-keepclassmembers class android.support.design.internal.BottomNavigationItemView {
int mShiftAmount;
}