Theming In Android Revisited: Part 2 - Typography

Theming your Android app is not just about choosing a color scheme and that was one of the mistakes that I made. Theming is composed of other factors such as Typography.

You would think typography is just about choosing a font and slapping it not the the app right? Well, that's the second mistake that I made 😊.

What is Typography?

Typography can be defined as the art and technique of arranging type. Although it is an area we usually depend on designers to attend to, I believe as developers, we should have a clue to how it works under the hood.

Material Design has a really cool guide to typography which can be found here.

Styling Text

Using the Material Design Type Scale to style text in the app aids in creating a uniform look and feel across your app. It provides the following styles to apply to your texts:

Headline

Headline styled text appear the largest on the screen.

Attributes:

• textAppearanceHeadline1
• textAppearanceHeadline2
• textAppearanceHeadline3
• textAppearanceHeadline4
• textAppearanceHeadline5
• textAppearanceHeadline6

Subtitle

Subtitle styled text appears smaller than Headline texts.

Attributes:

• textAppearanceSubtitle1
• textAppearanceSubtitle2

Body

Body styled text is commonly used for long-from writing such as articles.

Attributes:

• textAppearanceBody1
• textAppearanceBody2

Caption and Overline

These have the smallest font sizes.

Attributes:

• textAppearanceCaption and textAppearanceOverline respectively.

Button

Used to style text that appears on buttons.

Attributes:

• textAppearanceButton

Material Design Type Scale In Action

You can use type scale, Headline for example, in your app as follows:

	<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3">
	<item name="android:letterSpacing">0</item>
	<item name="android:textAllCaps">false</item>
	<item name="android:textSize">24sp</item>
	<item name="android:textStyle">normal</item>
	</style>

view raw HeadlineStyle.xml hosted with ❤ by GitHub

And for text on buttons, you can style it as follows:

	<style name="PrimaryActionButtonTextAppearance" parent="TextAppearance.MaterialComponents.Button">
	<item name="android:fontFamily">@font/roboto_medium</item>
	<item name="android:textSize">35sp</item>
	</style>ndroid:textAllCaps">false</item>
	</style>

view raw ButtonStyle.xml hosted with ❤ by GitHub

This allows you to edit the attributes to better suit your app's look and feel.

A full list of Material Design Type Scale can be found here.

Comment with a pic of how you styled text for your app.

References and Resources

• Creative Bloq :What Is Typography?
• Material Design Typography

Cover Image: Florian Klauer on Unsplash