From AppCompat to Material Components + Applying Dark theme to Android (Part 2/4)
Using the Material Design Typography system in your Android apps
Hey readers,
This is the 2nd part of how to move from AppCompat to the Material Theming Components. Check out the 1st part here.
Till now we have implemented the color design system into our apps and taken the first step to implement the new Material Design library. The next step is to implement a consistent Typography(fonts/text size) in our apps.
Typography
Typography is like the fonts and font sizes applied to your views(Text Views, Buttons, etc.). You would want to achieve a common font either to all of the components or only a few of them. Material Design library helps us to achieve this easily. In the future, if anything changes, we can change the things in one place and it will be reflected throughout our project.
The Material Design type scale provides 13 typography styles for everything from headlines to body text and captions. Each style has a clear meaning and intended application within an interface.
Important attributes, such as the typeface, font-weight, and letter case, can be modified to match your brand and design.
Steps to use the Typography system:
- Create a new type.xml file under res folder i.e. res/values/type.xml — Though we can put our text styles in the styles.xml file, it is better to create a new file especially for the text appearance. It improves readability and separation of concerns. Therefore, anything related to text appearances will move into the type.xml file. Copy all the text appearances related styles into type.xml file.
- Remove/replace some attributes — With the new material design system, there are certain attributes that are mapped 1 to 1 with the old material design attributes. So some attributes can be used as it is. For others, you should replace them with their MDC counterparts. Check the below list to find out these attributes:
This means that:
textAppeanceHeadline4 = TextAppearance.AppCompat.Display1
android:textAppearance="@style/TextAppearance.AppCompat.Display1"
android:textAppearance="?attr/textAppearanceHeadline4"
// are equal so changing them is optional3. Override the default text appearances to implement your custom fonts and styles — You can create new text styles which override the default text styles. Here’s an example and its application:
4. Use consistent naming (optional but recommended)— Please notice how I name the text appearance. This resolves the ambiguity between the library text appearances and your app’s text appearances. It also helps to make the code review easier where a theme might be used instead of a widget style. The naming convention is:
Naming convention: StyleType.AppName.SubGroupName.Variant
Eg1: TextAppearance.MyAppName.Headline4
Eg2: Widget.MyAppName.Toolbar.Blue
Eg3: ShapeAppearance.MyModuleName.CardNote: Each textAppearance style defines a set of attributes such as: android:fontFamily, android:textStyle, android:letterSpacing, android:textAllCaps, fontFamily which you can customize. Trying to change textColor i.e. android:textColor=”?attr/colorPrimary” or changing android:ellipsize on a TextApperance style won’t work.
With this knowledge, you can extend the text appearances to follow your brand style. In the next post, we will see how to apply the Shape design system to our views and change the corners of our views.
References:
