Type theming on Android using the MDC library
This article is also posted on the Material Design blog.
Material Theming is a way to customize Material Components to align with your brand. A Material theme includes color, typography and shape parameters which you can adjust to get near-infinite variations of the components — all while maintaining their core anatomy and usability.
On Android, Material Theming can be implemented using the Material Components (MDC) library, from version
1.1.0 onwards. If you’re looking to migrate from the Design Support Library or MDC
1.0.0, take a look at our migration guide.
This article will be focusing on type theming.
Material Design provides 13 type “styles” that are applied to all the text in your app. Each of these have a design term (eg. “Body 1”) along with a corresponding type attribute that can be overridden in your app theme (eg.
textAppearanceBody1). There are default “baseline” values (text size, letter spacing, capitalization, etc.) for each style.
Material Components use these type attributes to style textual elements of the widgets (those parts that subclass or comprise one or more
They are applied with eg.
in layouts and widget styles. Take a look at Nick Butcher’s “What’s your text’s appearance?” article for more information on using this and the order of precedence with other styling techniques.
In the MDC themes these attributes map to styles, eg.
You might recognize
TextAppearance styles from AppCompat or the platform and these are discussed in more detail in the Type resources section below. The corresponding attributes are new to MDC and give you the ability to vary typography by theme.
Figuring out which type styles to use and the values within them may be the responsibility of a designer, or derived from your product’s brand. However, it’s still useful to know about the role of each style and in which scenarios they should be used:
textAppearanceHeadline*styles are for headings
textAppearanceSubtitle*styles are for subheadings
textAppearanceBody*styles are for multiline body text
textAppearanceButtonis for buttons but also maps to parts of other components like tabs and dialog actions
textAppearanceCaptionis for smaller text like text field hints and errors
textAppearanceOverlineis also for smaller text but capitalization and increased letter spacing make it suitable for small titles and labels like date picker headers
Type resources consist of fonts as well as
TextAppearance styles. Let’s take a look at what’s available on Android and a few things to keep in mind when declaring styles.
XML and downloadable fonts
Fonts are stored in the res/font directory and referenced with
@font/ notation. You can use either local XML fonts or downloadable fonts. Android Studio offers a built-in wizard to get you started with downloadable fonts including the necessary certificates and manifest metadata. You may also want to check out “The Android Developer’s Guide to Better Typography” by Rod Sheeter for a more detailed guide and further optimizations to font preloading.
In general we recommend using downloadable fonts as they reduce the size of your app bundle by leveraging the shared font provider cache. However, downloadable fonts currently only work with those available on Google Fonts. If your app requires a purchased or proprietary font, use XML fonts.
It’s also worth mentioning that variable fonts are supported on Android from API 26 onwards. Take a look at Rebecca Franks’ “Variable Fonts in Android O ?” article for more information.
TextAppearance styles can be seen as the Android equivalent of Material Design type styles. For custom styles, we recommend two approaches to help separate concerns and create a single source of truth for type theming values in your app:
- Store all
TextAppearancestyles in a single res/values/type.xml file
- Use the MDC
TextAppearancestyles as parents and adhere to the same naming convention
Attributes and values you can use within these styles align with those supported by
fontFamilyis the font family, typically an
@font/resource referring to an XML or downloadable font
android:textSizeis the size of the text, typically an
android:textColoris the color of text
android:letterSpacingis the spacing between characters
android:textAllCapsis a boolean to toggle text capitalization
android:textFontWeightis the weight of the font, used to select the closest match from a font family, but is only available on API 28 and above.
android:textStylecan also be used to apply transformations such as
Letter spacing values on Android tend to use a different unit of measurement (em) to those used in design tools like Sketch (tracking). The Material Design typography guidelines provide a relatively simple equation for determining suitable em values from tracking values:
(Tracking from Sketch / font size in sp) = letter spacing
TextView added support for the
android:lineHeight attribute in API 28. MDC provides backported support for this via the
MaterialTextView class. You don’t need to use this class directly in layouts as
s will get auto-inflated as
You can use
lineHeight in various scenarios:
- Included as an item in
TextAppearancestyles (applied with
- Included as an item in widget styles with parent
- Applied directly to
s in layouts