Custom TextSize of BottomNavigationView support android

Question

I am trying to change the textSize of BottomNavigationView from android support library 25.0.0

<android.support.design.widget.BottomNavigationView         android:id="@+id/bottom_navigation_view"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:background="@color/colorPrimaryDark"         android:foregroundTint="@color/colorAccent"         app:itemIconTint="@android:color/white"         app:itemTextColor="@android:color/white"         app:layout_anchor="@id/lyt_container"         app:layout_anchorGravity="bottom"         app:itemTextAppearance="@style/TextStyleBNV"         app:menu="@menu/nav_menu" />  <style name="TextStyleBNV">         <item name="android:textSize">@dimen/twelve_sp</item>         <item name="android:padding">0dp</item>         <item name="textAllCaps">false</item>     </style> 

Is there anything i am missing.

Answer 1

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.

Answer 2

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. 😊