Android's guide to using BottomNavigationView

foreword

Regarding some questions about BottomNavigationView, I will post a more detailed article today to summarize, hoping to help you.

Tip: The following is the text of this article, and the following cases are for reference

1. Getting to know BottomNavigationView for the first time

Common properties:

• app:itemTextColor The color of the text, you can control the selected and unselected colors through the selector

• app:itemIconTint The color of the icon, you can control the selected and unselected colors through the selector

• app:itemIconSize icon size, default 24dp

• app:iteamBackground background color, the default is the color of the theme

• app:itemRippleColor The water ripple color after clicking

• app:itemTextAppearanceActive Set the text style when selected

• app:itemTextAppearanceInactive sets the default text style

• app:itemHorizontalTranslationEnabled The item moves horizontally selectedwhen

• app:elevation controls the shadow at the top of the control

• app:labelVisibilityMode Text display mode

• app:menu specifies the menu xml file (text and pictures are written in this)

When creating a new project in Android Studio, many partners will choose this type of Activity in the module, as follows.

The effect diagram of the project operation is as follows:

2. The color key in BottomNavigationView implements code analysis (example)

How is the color defined.

The key code is as follows (get attributes in xml):

 ColorStateList backgroundTint =
        MaterialResources.getColorStateList(
            context, a, R.styleable.BottomNavigationView_backgroundTint);
    DrawableCompat.setTintList(getBackground().mutate(), backgroundTint);

    setLabelVisibilityMode(
        a.getInteger(
            R.styleable.BottomNavigationView_labelVisibilityMode,
            LabelVisibilityMode.LABEL_VISIBILITY_AUTO));
    setItemHorizontalTranslationEnabled(
        a.getBoolean(R.styleable.BottomNavigationView_itemHorizontalTranslationEnabled, true));

    int itemBackground = a.getResourceId(R.styleable.BottomNavigationView_itemBackground, 0);
    if (itemBackground != 0) {
    
    
      menuView.setItemBackgroundRes(itemBackground);
    } else {
    
    
      ColorStateList itemRippleColor =
          MaterialResources.getColorStateList(
              context, a, R.styleable.BottomNavigationView_itemRippleColor);
      setItemRippleColor(itemRippleColor);
    }

It can be clearly seen that ColorStateList plays a key role, and the color problem can be solved by processing the incoming parameters.

3. Start to solve the problem

1. How to modify icon color

Here are two solutions
to solve in xml :
First: Create a new selector_color file and set the colors of the two states

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#63F7DE" android:state_checked="true"  />
    <item android:color="@android:color/black" android:state_checked="false"/>
</selector>

Then call this file in BottomNavigationView

app:itemIconTint="@color/selector_color"

Solved in the java file:
pass in a custom ColorStateList.
and pass it into the view as a parameter

navView.setItemIconTintList();

2. How to make the color of the icon not change when clicked

Call its setItemIconTintList in java, just pass the parameter as empty

navView.setItemIconTintList(null);

3. How to make the font not change size when clicked

Set the following two values ​​to the same size in the dimens file

    //防止字体出现变大效果
    <dimen name="design_bottom_navigation_active_text_size">10dp</dimen>
    <dimen name="design_bottom_navigation_text_size">10dp</dimen>

4. When your icon is multicolor

Call its setItemIconTintList in java, the passed parameter is empty

navView.setItemIconTintList(null);

Then set the drawable selection in the item of the picture state, for example as follows

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_home_black_24dp" android:state_checked="true"  />
    <item android:drawable="@drawable/ic_home_black_false_24dp" android:state_checked="false"/>
</selector>

Finally, call this file in the menu. Example file name: ic_home

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

In order to save time, only the first one is modified, the effect is as follows

5. Don’t want ActionBar

1. Delete the line paddingTop in xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

2. Delete the following line in java

NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);

3. Set the APP style to NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Four. Summary

This is the end of this article about Android's guide to using BottomNavigationView

Reprint: http://www.dedeyun.com/it/m/100919.html