Custom TextSize of BottomNavigationView support android

I used the snippet below to change the NavigationView style using the Material design.

<style name="MyBottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="itemIconTint">@color/bottom_navigation_item_selector</item>
    <item name="itemTextColor">@color/bottom_navigation_item_selector</item>
    <item name="itemTextAppearanceActive">@style/MyBottomNavigationView.TextAppearance</item>
    <item name="itemTextAppearanceInactive">@style/MyBottomNavigationView.TextAppearance</item>
</style>

<style name="MyBottomNavigationView.TextAppearance" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:textSize">11sp</item>
    <item name="fontFamily">@font/exo2_medium</item>
</style>

Then set the style to the BottomNavigationView element

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    style="@style/MyBottomNavigationView" />

Unfortunately this first version of BottomNavigationView came with a lot of limitations. And for now you can't change titles size just using the support design API. So to solve this limitation while google doesn't implement it, you can do:

In your dimen.xml you can put:

    <dimen name="design_bottom_navigation_text_size" tools:override="true">30sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">30sp</dimen>

Doing this you are overriding the default value of dimen that the internal classes of BottomNavigationView use. So be carreful.


You can change BottomNavigationView text appearance by defining your own styles for Component Attributes itemTextAppearanceActive and itemTextAppearanceInactive. By default they have textAppearanceCaption check section Theme Attribute Mapping in the docs Bottom Navigation.

<android.support.design.widget.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemTextAppearanceActive="@style/BottomNavigationView.Active"
    app:itemTextAppearanceInactive="@style/BottomNavigationView"
    app:menu="@menu/bottom_navigation_main" />

styles.xml

<style name="BottomNavigationView" parent="@style/TextAppearance.AppCompat.Caption">
    <item name="android:textSize">10sp</item>
</style>

<style name="BottomNavigationView.Active" parent="@style/TextAppearance.AppCompat.Caption">
    <item name="android:textSize">11sp</item>
</style>
  • Next, Change Text Color selected and icon:
    Just Create bottom_nav_icon_color_selector & bottom_nav_text_color_selector on drawable to edit default value.

  • For change icon color - bottom_nav_icon_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_checked="true" /> <!-- colorIcon Active -->
    <item android:color="@color/colorPrimary" android:state_enabled="true" android:state_pressed="true" /> <!-- colorIcon Active -->
    <item android:color="@color/colorIconInActive" /> <!-- colorIcon InActive -->
</selector>
  • For change text color - bottom_nav_text_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_checked="true" /> <!-- colorText Active -->
    <item android:color="@color/colorPrimary" android:state_enabled="true" android:state_pressed="true" /> <!-- colorText Active -->
    <item android:color="@color/colorTextInActive" /> <!-- colorText InActive -->
</selector>
  • Note : @color/colorIconInActive is a color disable/inactive, you can set this color in your res-values-colors
  • Finish, try to see, your navigation bottom. color icon and text will be change. 😊

you can change it like this. you have to only khow the id of labels that google support used

BottomNavigationView bottomNavigationView = (BottomNavigationView) fragmentActivity.findViewById(R.id.bottom_navigation);
    TextView textView = (TextView) bottomNavigationView.findViewById(R.id.menu_item_home).findViewById(R.id.largeLabel);
    textView.setTextSize(8);

LargeLabel is the id of label that google used in its library