Your Second Kotlin Android App

Every Material Design version adds new amazing features to help developers create even better UIs for their apps. Material Design 3 is no different. It introduces a new set of capabilities to adapt to users’ preferences, allowing users to customize the appearance of most things on their phones. It also provides app support in a more personal feeling, something that wasn’t possible before.

Material Design 3 also includes updated shapes, typography and the addition of more components. There are new components as well as the existing ones being more polished. Typography has been simplified into this major grouping: Display, headline, title, body and label. Shapes as well have undergone a similar grouping and simplification.

With Material Design 3 came the new Dynamic color system. This derives the color from the user’s wallpaper. These colors can be applied to apps and system UI as well. Android phones with android version 12 and above will be able to use this feature.

It also brings more fine-grained color schemes to help you create more beautiful UIs. In the color additions, it brings a new concept known as Material You. It focuses more on aspects like personalization and adaptability. Material You makes it easy to customize your app, and it’s also very responsive. The ColorScheme provides functions to create both dynamic, dark and light color schemes. You do this in your Theme.kt file.

With the new age of tablets and foldable devices, Compose and Material Design 3 also brings support for larger screens. It also brings support for different screen sizes and orientations. It provides a window size class for you which enables you to optimize your UI for different screen sizes.

To generate the color scheme that can map with your newly used Material Design 3 components, you’ll use the Material Theme Builder tool(https://m3.material.io/theme-builder).

Head over to your browser app and open the Material Theme Builder tool. You can see you have two tabs on this page labeled Dynamic and Custom*. With the first, you can generate colors based on your wallpaper. It even enables you to add your wallpaper. With the second, you can generate colors based on your own custom colors. For this course, we’ll use the Custom tab. Tap the Custom tab. By default, the screen shows a set of custom colors. You can change these colors by tapping on the colors section on the left to change each color type.

Tap on the Primary color circle. Here, you can change your primary color. For this course the app uses this:

#5F6200

You put this hex code in the input that shows up. Notice that your color scheme in the tool changes, even on the sample previews shown on the right. On your right, there’s also an option to toggle between light and dark modes. This enables you to see the previews in both modes and you can make adjustments per your designs. This tool is really handy for creating color schemes for your apps. You can as well change the secondary and tertiary colors as you wish.

Lastly, you’re going to export these colors and use them in your app. Tap Export at the top right. It brings you several options like Jetpack Compose, Android Views(XML), web(CSS), Flutter(Dart) and Material Tokens(DSP). Tap the Jetpack Compose option. This will download a zip file containing the colors you’ve created.