Android - How to change bottom navigation bar text's font family

Question

I have created a bottom bar navigation in my android page. But now I want to apply the custom font-family in bottom navigation texts.

This is the bottom navigation code in .xml file:

<android.support.design.widget.BottomNavigationView             android:layout_width="match_parent"             android:layout_height="match_parent"             android:id="@+id/bottomNavView_Bar"             android:background="@drawable/white_grey_border_top"             app:menu="@menu/bottom_navigation_menu"> </android.support.design.widget.BottomNavigationView> 

Also, code in bottom_navigation_menu.xml:

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"       >      <item         android:id="@+id/ic_newsfeed"         android:icon="@drawable/ic_menu_camera"         android:title="NEWSFEED"         />          <item             android:id="@+id/ic_explorer"             android:icon="@drawable/ic_home_black_24dp"             android:title="EXPLORER"             />         <item             android:id="@+id/ic_notify"             android:icon="@drawable/ic_notifications_black_24dp"             android:title="NOTIFY"             />         <item             android:id="@+id/ic_more"             android:icon="@drawable/ic_dashboard_black_24dp"             android:title="MORE"             />  </menu> 

Help would be appreciated.

Thanks in advance!

Answer 1

add the font file in the res/font/ folder to bundle fonts as resources

then

You can change it using style resources. In your styles.xml:

<style name="Widget.BottomNavigationView"      parent="Widget.Design.BottomNavigationView">     <item name="fontFamily">@font/your_font</item> </style> 

Then apply it as a theme in your view:

<android.support.design.widget.BottomNavigationView     ...     android:theme="@style/Widget.BottomNavigationView" /> 

Just checked on my app, it works fine.

reference: https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html#fonts-in-code

Answer 2

In your layout:

<com.google.android.material.bottomnavigation.BottomNavigationView     ...     app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"     app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"     ... /> 

In your styles.xml:

<style name="BottomNavigationViewTextStyle">     ...     <item name="android:fontFamily">@font/whatever_font</item>     ... </style>