Material Design 3 for Android. (Compose)
Last time I’ve written about Material Design 3 for Xml based applications (You can read it from here). Of course there is the compose side, in this article I will talk about that. So let’s get started.
When you open Android Studio and create a new application It will ask you about what are you going to use as the application base (xml or compose).
If you select compose, it will create everything you need to produce an application that follows MD3. Additionally, I should note that everything more or less is the same with applying MD3 in XML based application.
If you try to migrate from MD2 . Remove the line
implementation 'com.google.android.material:material:<version>'And add this line
implementation 'androidx.compose.material3:material3:<version>'After this you are good to go.
Color
Color theming includes the same colors that you see in the previous article. They are declared nearly same way but it just they use <light/dark>ColorScheme functions instead of <light/dark>Colors function of MD2 .
Also, dynamic colors supported as well. Good news is Android Studio generates the code to support dynamic colors. In theme function you will see code similar to this :
This when expression is for using dynamic colors on Android 13 and above. In lower versions using the app’s original color scheme.
And actually that is it for color theming.
Shape
shape theming is maybe the easiest side of MD3 in compose.
Typography
application of type system MD3 is also nearly same with MD2 .
As you can see above most of the stuff is the same just in the MD3 system. However there is one thing, there is a defaultFontFamily parameter that sets the font family to whole type system but It seems to be missing in MD3 . The work around that I found is passing the font family directly to each element of the typography, It may change in future but by the time I wrote this article this seems to be the solution.
