From AppCompat to Material Components + Applying Dark theme to Android (Part 3/4)

Using the Shape design system in your Android apps.

Hey readers,

This is the 3rd part of how to move from AppCompat to Material Theming Components. Check out the 1st part and the 2nd part:

From AppCompat to Material Components + Applying Dark theme to Android (Part 1)

From AppCompat to Material Components + Applying Dark theme to Android (Part 2)

Till now we have implemented the Color and Typography into our apps and taken the second step to implement the new Material Design library. The next step is to implement a consistent Shape system in our apps.

Shape

With Material Theming we can implement shapes easily. Previously we used to do various tricks to provide a rounded or a cut corner like using shape drawable. This comes inbuilt now.

Shapes are categorized into 3 types. The Material Design Components (aka MDC) falls into one of these categories as shown below:

3 categories: Small, Medium, and Large (credits: Google)

Thus, if you change the shape appearance of the Medium components, components such as Card, Dialog, and Menu will change their shape as well. This provides consistency across our app.

Steps to use the Shape system:

1. Create a new shape.xml file under res folder i.e. res/values/shape.xml — This file will contain all the shape appearances for all the categories.
2. Override the default shape appearances —Here’s an example:

In the above example, every button will have our own custom styles. It will look something like this:

Custom button on a light theme (using colorPrimary as the background)

Custom button on a default dark theme(without adding dark styles)

With these, you have learned how to customize shapes. In the next part, you will learn about various Material Design Components which are available by default and also apply a dark theme.

From AppCompat to Material Components + Applying Dark theme to Android (Part 4/4)

References:

1. https://material.io/design/shape/about-shape.html#
2. https://medium.com/over-engineering/setting-up-a-material-components-theme-for-android-fbf7774da739 by Nick Rout
3. Build your own material theme