Customize UI of Android BottomNavigationView

Icon Show Original Multi Color (Disable Tint)

By default, BottomNavigationView apply tint to icon which change its original color (if the icon is multi color, it will be shown as single color).

To disable this behaviour

bottomNavigationView.itemIconTintList = null

NOTE: It seems impossible to do this via XML.

Change Icon and Selected Icon

Navigation Item (including text and icon) is specified in a menu file.

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:menu="@menu/navigation"
        />

Edit res/menu/navigation.xml

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

    <item
        android:id="@+id/navigation_dailyquote"
        android:icon="@drawable/yy_dailyquote"
        android:title="@string/navigation_dailyquote"/>

        ...
</menu>

To support both icon and selected icon, create res/drawable/yy_dailyquote.xml.

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

NOTE: yy_dailyquote_sun and yy_dailyquote_sun_active are SVG or PNG icon.

Change Icon Size

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemIconSize="30dp"
        />

NOTE: Default icon size is 24dp.

Edit res/values/dimens.xml to avoid icon overlap with text.

<resources xmlns:tools="http://schemas.android.com/tools">
    ...

    <dimen name="design_bottom_navigation_height" tools:override="true">60dp</dimen>
</resources>

NOTE: Default is 56dp.

TextColor and selected TextColor

Change TextColor

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemTextColor="#998971"
        />

Support TextColor and Selected TextColor

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemTextColor="@color/navigation_text_color"
        />

Create res/color/navigation_text_color.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#9A8971" />
    <item android:state_checked="false" android:color="#AD9F88"/>
</selector>

Change Background Color

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        android:background="#FDFAE6"
        />