Create Material Font Style Theme | Implementation

Use Material theme (Theming) to customize Material component , the purpose is to make the component look and feel consistent with the brand. The Material theme includes color , font and shape parameters. You can adjust these parameters to get almost unlimited component variants while maintaining its core structure and ease of use.

Starting from version 1.1.0, you can use Material Design Components (MDC) library to implement Material themes in Android. If you want to migrate from Design Support Library or MDC 1.0.0 to the new version of MDC, please refer to our migration guide- to Android Material component .

This article will focus on how to implement font style themes.

font style attributes

Material Design provides 13 "styles" applicable to all text in the application. Each style has a design term (such as "Body 1") and corresponding font style attributes, which you can override in the application theme These attributes (for example textAppearanceBody1). The attributes of each style have default "base" values (text size, character spacing, capitalization, etc.).

△ MDC font style attributes with reference value

The Material component uses these font style attributes to style the text elements of the component. These components usually inherit from TextView or combine one or more TextView.

△ Font style attribute used in a button (red)

The application of font style attributes in layout and component styles is as follows:

android:textAppearance=”?attr/textAppearanceBody1”

Regarding the use of font style attributes and the priority order of application when multiple styling schemes are used at the same time, for more information, please refer to Nick Butcher 's "1610e6ec11398c How to achieve the appearance of text ".

In the MDC theme, these attributes will be mapped to the style, for example:

<style name=”Theme.MaterialComponents.*” parent="...">
   ...
   <item name=”textAppearanceBody1”>
       @style/TextAppearance.MaterialComponents.Body1
   </item>
<style />

You may have been exposed to the TextAppearance style in AppCompat or the platform, we will introduce it in detail font style resource The corresponding attribute is the new content of MDC, which enables you to change different text styles according to different themes.

Select font style

It may be the designer's responsibility to clarify which font style should be used and the attribute values in it, or they may come from your brand. However, it is very useful to understand the role of each style and its usage scenarios:

• textAppearanceHeadline* style is applied to the headline
• textAppearanceSubtitle* style is applied to the subtitle
• textAppearanceBody* styles are applied to multi-line text body
• The textAppearanceButton style is applied to buttons, but it is also applicable to part of the content of other components, such as operations in Tabs and pop-up windows
• The textAppearanceCaption style is applied to small text, such as prompts and error messages in input boxes
• The textAppearanceOverline style is also applied to small text, but it has uppercase English letters and larger character spacing, so it is more suitable for subtitles and labels, such as the title of a date picker

font style tool

Material Design provides a utility tool that can preview font zoom, integrates Google Font , and can export code. Please refer to "Font Scaling Generator" in Material Design Font Style Guide

△ Google Font (left) and font scaling generator (right)

font style resource

The font style resource consists of fonts and TextAppearance styles. Let's take a look at the resources available in Android and the considerations when declaring styles.

XML and downloadable fonts

The font is stored in the res/font directory and is referenced by the @font/ symbol. You can use the local XML font or downloadable font . Android Studio has a built-in wizard to help you start using downloadable fonts, including configuring the necessary certificates and clearing unit data. Android Developers Achieve Better Typography Guidelines " written by Rod Sheeter for more detailed guidelines and further optimizations regarding font preloading.

We usually recommend using downloadable fonts, because they use the cache of the shared font provider to reduce the size of the application package. However, downloadable fonts currently only use fonts on Google Font. If your application needs to use purchased fonts or special fonts, please use XML fonts.

It is also worth noting that starting from API 26, Android supports the use of variable fonts. Please refer to Rebecca Franks' "1610e6ec113c19 Variable Fonts on Android O 🖍" for more information.

TextAppearance style

TextAppearance style can be regarded as Material Design font style on Android. For custom styles, we recommend two methods to help you achieve separation of concerns and create a single data source for the font style theme values in the application:

• Store all TextAppearance styles in the same res/values/type.xml file
• Use MDC TextAppearance as the parent style and follow the same naming rules

The attributes and values that can be used in these styles are TextView supported by 0610e6ec113cbb:

• fontFamily defines the font family, usually @font/ resource reference XML or downloadable font
• android:textSize defines the size of the text, usually an sp size
• android:textColor defines the color of the text
• android:letterSpacing defines the spacing of characters
• a ndroid:textAllCaps defines whether to enable text capitalization, which is a Boolean value
• android:textFontWeight defines the thickness of the font, which is used to select the closest match from the font family, but it is only available in API 28 and above. You can also use android:textStyle to set the effect, such as bold (bold) and italic (italic)

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/type.xml -->
<style name="TextAppearance.App.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
    <item name="fontFamily">@font/roboto_mono</item>
    ...
</style>
<style name="TextAppearance.App.Body2" parent="TextAppearance.MaterialComponents.Body2">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:textSize">14sp</item>
    ...
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:textAllCaps">false</item>
    ...
</style>

Calculate the character spacing

The measurement unit (em) used in Android for character spacing is different from the measurement unit (tracking) used by design tools such as Sketch. Material Design typography guide provides a relatively simple equation to convert the tracking value to the appropriate em value:

(tracking value in Sketch / font size sp) = character spacing

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- (0.25 tracking / 14sp font size) = 0.0178571429 em -->
<style name="TextAppearance.App.Body2" parent="TextAppearance.MaterialComponents.Body2">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:textSize">14sp</item>
+    <item name="android:letterSpacing">0.0178571429</item>
    ...
</style>

MaterialTextView and line height

The system version of TextView adds the android: attribute in API 28. MDC provides backward compatibility for this attribute through the MaterialTextView You don’t need to use this class directly in the layout, because MaterialComponentsViewInflater will automatically replace <TextView> with MaterialTextView .

lineHeight in a variety of scenarios:

• As an item is included in the TextAppearance style (use android:textAppearance="..." apply the style)
• As an item, it is included in the component style whose Widget.MaterialComponents.TextView style="..." apply the style)
• Directly applied to <TextView>

△ Different row height values

Note

• You do not need to overwrite all font styles. Note, however, that the default MDC style uses the system font (usually Roboto). Make sure to check which font style TextView
• Although TextAppearance supports setting android:textColor , MDC prefers to declare this attribute in the main component style to ensure that the principle of separation of concerns is followed, for example:

<style name=”Widget.MaterialComponents.*” parent=”...”>
   ...
   <!-- Color -->
   <item name=”android:textColor”>?attr/colorOnSurface</item>
   <!-- Type -->
   <item name=”android:textAppearance”>
       ?attr/textAppearanceBody1
   </item>
</style>

Additional font style

If the font style required by your design system is in addition to the 13 styles provided by the Material theme, fortunately, it is relatively simple to implement in Android. You can declare style attributes as follows:

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/attrs.xml -->
<attr name="textAppearanceCustom" format="reference" />

<!-- In res/values/type.xml -->
<style name="TextAppearance.App.Custom" parent="TextAppearance.MaterialComponents.*">
    ...
</style>

<!-- In res/values/themes.xml -->
<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="textAppearanceCustom">@style/TextAppearance.App.Custom</item>
</style>

Overwrite the font style in the application theme

Next, let's discuss how to add the font style you choose to the application theme by overwriting the corresponding attributes.

First of all, we recommend that you set the theme to handle light and dark palettes gracefully, while also reducing duplication with the basic theme. For more information on this topic, see Chris Banes written dark theme articles , and he and Nick Butcher speech - " use style development topics ."

After the setting is complete, overwrite the font style attributes you want to change in the basic theme of your application:

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/themes.xml -->
<style name="Theme.App.Base" parent="Theme.MaterialComponents.*">
    ...
    <item name="textAppearanceHeadline6">
        @style/TextAppearance.App.Headline6
    </item>
    <item name="textAppearanceBody2">
        @style/TextAppearance.App.Body2
    </item>
    <item name="textAppearanceButton">
        @style/TextAppearance.App.Button
    </item>
    <!-- Using default values for textAppearanceSubtitle1, textAppearanceCaption, etc. -->
</style>

The Material component will respond to theme-level font style overrides:

△ Material component responds to theme-level font style override

Font style in MDC component

You already know that the MDC component responds to theme-level style overrides. But how do you know that a button uses textAppearanceButton as its text label style? Let's take a look at the following ways.

Build Material theme

Build Material Theme is an interactive Android project, you can use it to modify the color, font style, shape value to create your own Material theme. It also contains a catalog of all theme parameters and components. You can determine which components will respond to changes in theme font style properties as follows:

• Clone the project and run it in Android Studio
• Adjust the res/values/type.xml and res/values/themes.xml files
• Re-run the application and observe the visual changes

△ Font style changes in building Material theme

MDC Developer Document

The MDC developer documentation has been updated recently. In this update, we have added an attribute table, covering the design terms and attribute default values used in the development library. For example, the following is the "Anatomy and key properties" button document

△ The attribute table in the MDC button developer document contains the default value of the font style

source code

Retrieving the MDC source code is arguably the most reliable way. MDC uses default styles to implement the Material theme, so you can view these styles as well as any styleable properties and Java files. For example, MaterialButton's 1610e6ec1142a4 style , attributes and Java files .

△ The font style used in the default style of the MDC button

Customize the font style in View

Your application may introduce custom components from your own development or existing libraries. When they are used with standard MDC components, it is necessary to ensure that they can respond to Material theme changes. The following are considerations for supporting style theming for custom components.

Use MDC attributes in <declare-styleable> and default styles

When the custom View uses the <declare-styleable> tag, it can be styled. Reusing the attr name in the MDC helps maintain uniformity. Using <declare-styleable> tag can also refer to the attributes of the MDC theme style as their values.

<!-- Copyright 2020 Google LLC.
   SPDX-License-Identifier: Apache-2.0 -->

<!-- In res/values/attrs.xml -->
<declare-styleable name="AppCustomView">
    <attr name="titleTextAppearance" />
    <attr name="subtitleTextAppearance" />
    ...
</declare-styleable>

<!-- In res/values/styles.xml -->
<style name="Widget.App.CustomView" parent="android:Widget">
    <item name="titleTextAppearance">?attr/textAppearanceHeadline6</item>
    <item name="subtitleTextAppearance">?attr/textAppearanceBody2</item>
    ...
</style>

Next

We have implemented the MDC font style theme in the Android application. For other topics on the Material theme, please read other articles in this series.

• Create Material Color Theme | Implementation
• Create Material Shape Theme | Implementation
• Use Material Design components to implement dark theme
• Use Material Design components to implement Material motion effects
• Recommend developers to use Material Design component

As always, we look forward to your submission of bug reports and feature requirements . Also be sure to check out the Android sample application .

You are share with us 1610e6ec11448e the font style theme you have implemented in If you encounter any problems, please submit feedback to us via the QR code below: