BottomNavigationView use

  • Layout Settings
<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    style="@style/Widget.Design.BottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:background="@color/viewBackground"
    app:elevation="@dimen/dp_16"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />
Copy the code
  • BottomNavigationView sets the item through the Menu
<? 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/action_home"
        android:enabled="true"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_knowledge_system"
        android:enabled="true"
        android:icon="@drawable/ic_apps_black_24dp"
        android:title="@string/knowledge_system"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_wechat"
        android:enabled="true"
        android:icon="@drawable/ic_wechat_black_24dp"
        android:title="@string/wechat"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_navigation"
        android:enabled="true"
        android:icon="@drawable/ic_navigation_black_24dp"
        android:title="@string/navigation"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_project"
        android:enabled="true"
        android:icon="@drawable/ic_project_black_24dp"
        android:title="@string/project"
        app:showAsAction="ifRoom" />
</menu>
Copy the code
  • The Activity is used in
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_bottom_navigation);
    BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.bottom_navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_home:
                return true;
            case R.id.action_knowledge_system:
                return true;
            case R.id.action_wechat:
                return true;
            case R.id.action_navigation:
                return true;
            case R.id.action_project:
                return true;
        }
        return false; }};Copy the code

Pit encountered when using

Pit 1: When the number of items is greater than 3, there will be displacement animation, so how to set the bottom icon and font display and remove the click animation?
  • This can be modified by reflection using the following class
public class BottomNavigationViewHelper {
    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); }}}Copy the code
BottomNavigationViewHelper.disableShiftMode(navigation);
Copy the code

Note: The above method is perfect for under support version 28 (not included), so how to solve above support version 28?

BottomNavigationView was refactored in support 28. By referring to the code in BottomNavigationView and BottomNavigationMenuView, we can know that the bottom icon and font are displayed and the click animation is removed by setting the display mode of labelVisibilityMode.

Therefore, the current Support version 28 can be solved perfectly by using the following methods:

In Java code

bottom_navigation.setLabelVisibilityMode(1);
Copy the code

Or in an XML layout file

app:labelVisibilityMode="labeled"
Copy the code
Pit 2: How to make the style of the middle icon different from the others?
  • theapp:menu="@menu/bottom_navigation_main"Point to thebottom_navigation_mainModified to
<? 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/action_home"
        android:enabled="true"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_knowledge_system"
        android:enabled="true"
        android:icon="@drawable/ic_apps_black_24dp"
        android:title="@string/knowledge_system"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_wechat"
        android:enabled="true"
        android:icon="@null"
        android:title=""
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_navigation"
        android:enabled="true"
        android:icon="@drawable/ic_navigation_black_24dp"
        android:title="@string/navigation"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_project"
        android:enabled="true"
        android:icon="@drawable/ic_project_black_24dp"
        android:title="@string/project"
        app:showAsAction="ifRoom" />
</menu>
Copy the code

That is, the third item in the middle does not set the icon and text.

  • Then modify the layout file (with oneLinearLayoutLet’s put one in the middleImageViewCovering theBottomNavigationViewOn)
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="? attr/actionBarSize"
    android:clipToPadding="true">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        style="@style/Widget.Design.BottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="@color/viewBackground"
        app:elevation="@dimen/dp_16"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/bottom_navigation_main" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="16dp">

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

        <ImageView
            android:id="@+id/navigation_center_image"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

    </LinearLayout>
</FrameLayout>
Copy the code
Pit 3: When an item is selected, the text of the item will have an animation, and the icon will move up a bit. So how to cancel the animation?
  • The following parameters areitemSelected and unselected text sizes, set them to the same and no animation will occur.
design_bottom_navigation_active_text_size
design_bottom_navigation_text_size
Copy the code
  • The following parameters areicon 的 margin_bottomThe value can be adjusted to leticonVertical center.
design_bottom_navigation_margin
Copy the code
  • Copy the following into the project as neededdimen.xmlIn the file.
<! --BottomNavigationView's selection has no selected font size --> <dimen name="design_bottom_navigation_active_text_size">10sp</dimen>
<dimen name="design_bottom_navigation_text_size">10sp</dimen> <! --BottomNavigationView is only set when placing the icon --> <dimen name="design_bottom_navigation_active_text_size">0sp</dimen>
<dimen name="design_bottom_navigation_text_size">0sp</dimen>
<dimen name="design_bottom_navigation_margin">16dp</dimen>
Copy the code