Stylizing your multilingual app with a variety of fonts
In most of the apps we develop, the design includes a variety of fonts, more specifically one font with four varieties, light, regular, medium and bold. Not to be mentioned that the app itself will be bilingual, i.e. add other four fonts for the English version of the app!
Setting a custom font in android used to be quite a headache, there was no way to set fonts other than the programmatic way, yet now since the introduction of Android Oreo in 2017, awesome android team enabled us to set custom fonts as we set other attributes in the xml.
In this articles we’ll go over some different ways to customize the fonts and focus more on the current easiest way.
Let’s say we have a TextView that we want to set its text to some custom bold font!
Traditionally, one would create an assets folder, load the two font files – say ar_bold and en_bold- in this folder.
And set the font to the TextView programmatically like so:
Typeface tf = Typeface.createFromAsset(getContext().getAssets(), “your_font”;
setTypeface(tf);
Not to mention that a check must be made on the current applied language to load the right font!
This step was required for every view in the app, thus developers used to create their own custom views extending the equivalent view, and set the custom fonts to that custom view, i.e. CusomtTextView that extends TextView and use this custom view throughout the whole app instead of the original TextView.
Another way a lot of developers used to do also was using a third party library that simplifies the process quite, among which is Calligraphy Library.
You can check the documentation at this link Github
However, no need to use some external library if there is a native and most importantly easy way to do this, right?
As already mentioned, since the introduction of Android Oreo, there has been a very simple way to set custom fonts, through Xml as any other attribute.
However, there are some different ways to achieve this effect, we’ve iterated a lot until finally we found the best approach satisfying our purpose, different fonts in multi-lingual apps for different views.
For starter, you need to define fonts as resources as follow:
1. Right-click the res folder and go to New > Android resource directory.
The New Resource Directory window appears.
2. In the Resource type list, select font, and then click OK
You will need to create as many directories as the number of languages your app will support.
In each we include the four different fonts, each font is being names exactly as its counterpart in the other directory exactly as follow:
In our styles.xml file we define four different styles, Style for each font!
In each style, we set the attribute fontFamily to the matching font from the fonts directory. For example, our BoldFontStyle will be as follow:
<style name="BoldFontStyle">
<item name="fontFamily">@font/bold</item>
</style>
And in the root style we set fontFamily attribute to the font weight you want to inflate throughout the whole app, most often we set it to the regular font.
These four styles can be parent styles for any other style, i.e. if some buttons need custom style with particular attributes while the font needs to be bold, you can create your custom style with whatever attributes you want and inherit from that parent BoldFontStyle.
Depending on the resources being loaded, be it Arabic or English the correct fonts will be loaded and inflated!
As already mentioned, there may be some other ways to set custom font, but we iterated a lot until we finally got satisfied with this way.
There are some limitations though, some views can’t load the fonts this way, among which is CheckBox and Switch. This issue has been reported on the Android bug tracker, and if curious you can check its status at this link Issuetracker.
Sadly, until these issues are solved you have to set the font programmatically to these views!
However, you don’t need to duplicate the font in any other directly like assets, you can still apply the font programmatically from the fonts directory thanks to android support library 26.
Broadly speaking, you can set custom font to any view programmatically as follow:
Typeface typeface = ResourcesCompat.getFont(this, R.font.your_font);
fontText.setTypeface(typeface);
Remember though, you do have to check on the resources and languages being loaded to set the correct font or some runtime crashes.
You should check the language currently set depending on the way you apply it.We normally do this using this one-line-method, and depending on the language we load the corresponding font.
fun isArabicLanguage() = Locale.getDefault().language == “ar”