Android Design System and Theming: Typography
1. Introduction
Managing the look and feel of an Android app can get tedious, and more when the app gets bigger. Style definitions, color attributes, sizes, etc. grow and grow if we don’t manage them properly. Even if we can control them, a big set of style definitions can be difficult to follow.
To solve this problem it is recommended, first, to have a Style System (a concrete and small set of styles). And secondly, apply it in your application. For this second part, Android Theming can help us.
Because this topic is large, in this article I will focus just on the typography.
- We will see first, how to apply different text fonts in our app. 2. Using Fonts
- Then we will review how Android uses differents text styles internally and how we can use them. 3. The Android Design System
- After that, we will review 4. The Material Design Type System and its relation with 5. Android Theming
- And finally, we will see how to use and customize our typography. 6. Creating custom Theme Styles
Companion App: You can read and follow this article in this Github Project: Android Design System and Theming: Typography
2. Using Fonts
Add Fonts to your project
Since Android 8.0 fonts can be used as resources. For previous versions, you can use the Support Library 26.
Firstly create the font folder under the res folder. Secondly, add your fonts there. Names must be lower case and with underscores. Like other xmls in Android.
Finally, create your font family resources xml file. Here is where the definitions of your fonts will be.
comic_neue.xml
fontWeight: Positive number, a multiple of 100, and between 100 and 900, inclusive. The most common values are 400 for regular weight and 700 for bold weight.
fontStyle:normaloritalicUsing in Support Library: Declare font families in XML, using the
appnamespace. Official Documentation
We have everything set up. Now let’s use it.
Applying the fonts
There are 3 ways to do that.
Check the companion
appto see it working. fragment_simple.xml
i. We can use the fonts directly in the view
ii. Or we can better create and use a style
iii. But what we really want is to use the Android built-in Design System
Let’s see how it can be done.
3. The Android Design System
Built-in styles
Android AppCompat library and the Material Design library offer us a set of premade styles that we can use and modify. Like for example the TextAppearance.AppCompat.Display1
We can use it like any other style
In Android Studio right-clicking on the style and following the path, we can reach the definition of the style. In this case TextAppearance.AppCompat.Display1 inherits from Base.TextAppearance.AppCompat.Display1 that results in this definition:
in
v21is actuallyTextAppearance.Material.Headlinebut the attributes are very similar.
The same happens with the Material Design Library. For TextAppearance.MaterialComponents.Body1 we can see that it inherits from an appcompat style.
This is cool. We can get some premade styles to use in our Design System and tweak them instead of building them from scratch.
The first question could be: Is there a list of all these cool styles?
There are predefined styles for AppCompat and Material Design libraries. In the next image, you can see some TextAppearance styles from the AppCompat library.
These look big and overwhelming but don’t worry we are going to simplify all of it.
4. The Material Design Type System
To continue, let’s check the Material Design documentation for Type Scale about typography.
The main 2 points of its definition are:
- A range of contrasting styles that support the needs of your product and its content.
- A combination of thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.
TL;DR: They defined 13 styles that should be enough for any application.
Here are the 13 styles:
These styles are used in all the Material Design Definitions. If you go to the Material Design documentation and look for a component you will find the corresponding Type Scale Category associated with each element.
For example, in the List component in the theming typography section you can see how they use the Type Scale Category to define the styles of the different list components.
Now let’s go back to Android
5. Android Theming
Theme attributes vs View attributes (in less than 100 words)
The Android system defines Theme Attributes. Let’s see how they differ from the View Attributes.
View attributes:
- Applied to a single View.
android:textColor=red,android:fontFamily="@font/comic_neue".
Theme attributes.
- Applied to a Theme, not a view.
colorPrimary = red,textAppearanceBody1 = ....- They are defined in the Theme
- The Theme provides and varies them.
- They will be the same in all the application.
- Should be used widely.
To use them just call them with the ?attr keyword first.
Android text appearance attributes
We are talking about typography, so which are the Theme Attributes for typography.
If you remember, the Material Design Docs said: “ 13 typestyles would be enough”. Android provides us with these 13 theme attributes.
All these Theme Attributes are set to a specific premade style, and as we did before with the premade styles, we can do it with the theme attributes.
To know which are the default styles that Android uses we just need to follow the path of the theme. Right-click on the attribute, follow the thread until you find the style. For Theme.MaterialComponents.DayNight.DarkActionBar you can reach how textAppearanceBody1 is set to the style TextAppearance.MaterialComponents.Body1
You can see that we end up in Base.V14.Theme.MaterialComponents.Light.Bridge
Remember:
res/values/styles.xml: themes for all versions
res/values-v21/styles.xml: themes for API level 21+ only
The full list of Typestyles in the Material Design library is this one.
Now we can use the Material theme as a base for our custom Type Styles.
6. Creating Custom Themes
For example, to create our custom style for the Headline5, we can do as follows.
First, create a file under the res folder called type.xml.
Instead of creating the style in the
styles.xmlthe new recommendation is the one presented in Developing Themes with Style (Android Dev Summit '19)
Second, add your TextAppearance style.
Easy Hierarchy: Dot notation also applies inheritance so this
TextAppearance.MaterialComponents.Headline5.MyAppinherits fromTextAppearance.MaterialComponents.Headline5. You don't need to specify the parent explicitly.
Inheriting from the MaterialComponents styles will reduce the number of attributes to set and will make your application more consistent with the Material Design Guidelines.
Finally, we need to set up this style to our Theme Attribute in our Theme Definition.
In your themes.xml add the definition.
Don’t forget to add your theme in the manifest.
And that’s it.
In all the TextViews whose textAppearance is set to textAppearanceHeadline5, your custom style will be set.
7. Extra
Overlays
Another cool feature in the Android Theming System is theme overlays. A Theme Overlay is a technique to change the theme of a part of your view and its descendant in a simple easy way.
In any of your views, you can add the android:theme attribute and set it to a specific theme. The view and all its children will use the new theme.
ThemeOverlays inherit from an empty parent, should define as few attributes as possible, and its name should start with “ThemeOverlay”, thus it's clear its purpose.
fragment_custom.xmlCheck this in the companion app: fragment_custom.xml
Widgets
Some widgets will use the Theme Attributes, so if you have all set you won’t need to change anything on the widget, the style will get it properly.
Check this in the companions app fragment_widgets.xml
As you can see in the Companion App in the Widgets Tab, the Button and the MaterialChip widgets do not set any textAppearance in its definition, and it shows the correct Type Style. But others like the CheckBox or the Switch do not have a default textAppearance. For these (and others) widgets, you would need to set it explicitly.
Material Components vs AppCompat. Which library should I use?
I would suggest going with the Material Components Library, the style is more aligned with the Material Documentation.
In case you can’t add the library, go with Appcompat but be aware that some theme attributes do not have the corresponding premade style. Like there is no TextAppearance.AppCompat.Subtitle1 or Headline,2,3,4 but instead Display1,2,3.
8. Recap
There are 4 steps to have your custom type styles in your Android App using Theming:
- Add your fonts.
- Create a Theme:
<style name="Base.Theme.MyApp" parent="Theme.MaterialComponents.DayNight... - Add to the theme, the custom styles for every Text Appearance Theme Attribute:
textAppearanceBody1,textAppearanceHeadline1... - Apply them in your views:
android:textAppearance="?attr/textAppearanceBody1"
9. Conclusion
Android Styling and Theming is a big topic but once you know how it works it can simplify your style definitions, and increase your development speed.
The Material Design library works pretty well with Android so you can benefit from it. And in case you need to add your custom Design System, it is very easy to create a theme and add your styles.
Many of the topics presented in this article can be applied not only to the typography but also to colors and shapes. (Let me know if you liked this article and want me to write about colors and shapes).
Before saying goodbye I recommend you checking this Android Dev Summit talk Developing Themes with Style by Nick Butcher and Chris Banes. There are also several posts in Medium by Nick Butcher covering all topics about theming and styling.
Finally, I hope this article helps you to understand Android Theming and Styling a bit better.
Thank you for reading.
—
UPDATE: I wrote a new article similar to this one about colors. Find it here https://proandroiddev.com/android-design-system-and-theming-colors-5a95f0464480
