Material Design 3 for Android. (XML)
About 8 years ago ( June 25, 2014), Google published Material Design. Its main purpose is to combine good design principles together. Of course, over time the first MD ( Material Design ) become less useful and needed new features which let to MD2( Material Design 2 or Google Material Theme) in 2018. Today we have even a newer version, MD3( Material Design 3 or Material You) which is published with Android 12. In this article I will talk about MD3 and talk about whether or not you should migrate your app.
First of all, What is wrong with MD2 ? Nothing actually. MD2 is still used in many applications and I think there is nothing wrong with it. It provides a consistent UI and allow us to switch between any design much easier. But, MD3 introduces new capabilities and features on top of MD2 such as more personalisable styles, adaptiveness for every screen ( at least most of them). Thus, there is no reason for not to migrate MD3 ( also it is recommended to do so ).
To read more about MD3 click here
Now, Let’s talk more aboutMD3 from Android perspective.
Application of this differs between Xml based apps and Compose based apps. In this article, I will talk about the xml side of the coin. However do not worry about Jetpack Compose side, I will write about that too.
So enough for talk? Let’s get into it.
Color
In MD3 color system includes way more colors than we have in MD2 . To make it clear, MD3 has primary ,onPrimary just like MD2 but it also includes additional colors like primaryContainer ,onPrimaryContainer . MD3 includes way more new colors that do not exists MD2 , if you want to go into details click here.If you need a tool to build your theme or just visualize it, here is a really good tool to help you.
After you build your color theme for your application. You can apply those as this :
What is more interesting is that Dynamic colors was introduced with Android 12. What promised by the colors is simply the Android system can generate a color schema by the current wallpaper of the device. Moreover, Any application that uses MD3 can enable Dynamic colors so that it can also adapt the generated color schema. (details are here)
You can enable dynamic colors for your application as :
Do not forget to declare the application class in the manifest otherwise Dynamic colors will not work. Other than that, this is all you need.
Shape
Shape system more or less the same.
Typography
Type system changed a lot but the general idea is the same (details are here).
After applying all of these to your theme.xml file, you are good to go. Similar to the MD2 you can apply them with attr fields. For instance, a TextViews text appearance can be changed with
android:textAppearance="?attr/textAppearanceBodyMedium"The general logic is the same with MD2 .
Overall, Now you know how to use MD3 in your application. In the next article I will talk about how to apply all of these in Jetpack Compose. So, stay tune.
Resources
Love you all.
Stay tune for upcoming blogs.
Take care.
