Andorid: Custom fonts in BottomNavigation

[m1ga]

If you want to change the font (e.g. font family) of your Android bottom navigation you can do this with a custom theme.

Basic UI setup

index.xml

<Alloy>
	<TabGroup backgroundColor="white" title="TabGroup">
		<Tab id="tab1" title="Tab 1" icon="appicon.png">
			<Window layout='vertical'>
				<ImageView image="/appicon.png"/>
				<Label >I am Window 1</Label>
			</Window>
		</Tab>
		<Tab id="tab2" title="Tab 2" icon="appicon.png">
			<Window layout='vertical'>
				<ImageView image="/appicon.png"/>
				<Label >I am Window 2</Label>
			</Window>
		</Tab>
		<Tab id="tab3" title="Tab 3" icon="appicon.png">
			<Window layout='vertical'>
				<ImageView image="/appicon.png"/>
				<Label >I am Window 3</Label>
			</Window>
		</Tab>
	</TabGroup>
</Alloy>

index.tss

"TabGroup" : {
	backgroundColor: "#fff",
	tabsBackgroundSelectedColor: "#fff",
	tabsBackgroundColor: "#fff",
	navBarHidden: true
}
"Tab" : {
	activeTitleColor: "#5555ff",
	titleColor: "#DDDDFF",
	tintColor: "#DDDDFF"
}
"TabGroup[platform=android]" : {
	paddingLeft: 20,
	paddingRight: 20,
	paddingBottom: 40,
	style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
}

index.js

$.index.open();

Custom theme

Now create a custom theme at app/platform/android/res/values/mytheme.xml with:

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

	<style name="AppTheme" parent="Theme.MaterialComponents">
		<!-- Customize your theme here. -->
		<item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
	</style>

	<style name="Widget.App.BottomNavigationView" parent="Widget.Design.BottomNavigationView">
		<item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
	</style>

	<style name="ThemeOverlay.App.BottomNavigationView" parent="">
		<!-- <item name="android:textAllCaps">true</item> -->
		<!-- <item name="android:textStyle">bold</item> -->
		<item name="android:fontFamily">@font/advent</item>
	</style>

</resources>

in my example I've place advent.ttf inside app/platform/android/res/font/advent.ttf.
Now you just have to assign your theme e.g. in tiapp.xml <application android:theme="@style/AppTheme"></application> and the fonts inside the BottomNavigation look different

[jquick-axway]

Please note that you should not derive your app theme from Theme.AppCompat.* on Titanium 9.3.x and higher. Doing so may cause the following exception to happen.

 java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).

Your app theme should derive from the following...

• Titanium 10.0.0 and higher: Theme.MaterialComponents.*
• Titanium 9.3.x: Theme.MaterialComponents.Bridge.*
• Titanium 9.2.x and older: Theme.AppCompat.*

Also for Titanium 10.0.0 and higher, I recommend that your derive your app theme from a Titanium material theme since we've worked-around issues in Google's MaterialComponents library. Particularly with their ActionBar handling. I recommend that you derive from Theme.Titanium.DayNight.*, Theme.Titanium.Dark.*, or Theme.Titanium.Light.*. And the upcoming Titanium 10.1.0 release will provide new Solid material themes. Please see the link below for more details.
https://titaniumsdk.com/guide/Titanium_SDK/Titanium_SDK_How-tos/User_Interface_Deep_Dives/Android_UI_Components_and_Conventions/Android_Themes.html

(By the way, thanks for showing how to customize a TabGroup via a theme. That's the proper way of doing it.)

[m1ga]

you are right! Will update the example to reflect that. Funny thing: the error only appears when you'll add e.g. a button (or other Material elements). With just the label and image there was no error otherwise I would have spotted that right away 😄