Design with Material Design 3

Material Design is a design system developed by Google. It helps us create beautiful UIs. It provides a set of guidelines and components for us to use as we’re developing our Android apps.

In this chapter, we’ll introduce ourselves to Material 3. We will also cover the features that Material 3 offers. Lastly, we will learn how to use Material 3 in our Android apps and some of the components in Material 3.

In this chapter, we’re going to cover the following main topics:

• Material Design 3 and its features
• Using Material Design 3 in our apps
• Building for large screens and foldables
• Making our app accessible

Technical requirements

To follow the instructions in this chapter, you will need to have Android Studio Hedgehog or later (https://developer.android.com/studio) downloaded.

You can find the code for this chapter at https://github.com/PacktPublishing/Mastering-Kotlin-for-Android/tree/main/chapterfour.

Material Design 3 and its features

The release of Material Design 3 (Material 3) came with lots of new features to help us build UIs for our apps. Here are some of the features of Material Design 3:

• Dynamic color: This is a color system that sets the color of our apps to the color of the user’s wallpaper. The System UI also adapts to this color. This enables users to have that personalized feel for their apps. Please note that dynamic color only works for Android 12 and above devices.
• More components: Material 3 has a new set of improved components that are available for use. Some components have new UIs and others have been added to the APIs.
• Simplified typography: Material 3 has a much more simplified naming and grouping for typography. We have the following types: display, headline, title, body, and label, with each supporting small, medium, and large sizes. This makes it easier for us to define styles all across our apps.
• Improved color scheme: The color...

Using Material Design in our apps

To take advantage of the Material 3 features that we looked at in the previous section, we need to add it to our app. Luckily, with Android Studio Hedgehog, we have Material 3 templates. Even the sample apps we have been using already use Material 3. So cool, right? Let us quickly scan the dependencies to understand what is happening:

implementation 'androidx.core:core-ktx:1.10.1'
implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
implementation 'androidx.activity:activity-compose:1.7.2'
implementation platform('androidx.compose:compose-bom:2022.10.00')
implementation 'androidx.compose.ui:ui'
implementation 'androidx.compose.ui:ui-graphics'
implementation 'androidx.compose.ui:ui-tooling-preview'
implementation 'androidx.compose.material3:material3'
testImplementation 'junit:junit...

Designing UIs for large screens and foldables

In recent years and with the release of Material 3, there has been an increased focus on tablets and foldable devices. As such, we, as developers, must make our apps work well on these devices. In this section, we will look at how we can make our apps work well on large screens and foldables. We need to ensure our apps adapt to the different screen sizes. Making our apps responsive provides a good user experience.

Material 3 offers canonical layouts to serve as guidelines for creating UIs for large screens and foldables. These layouts are as follows:

• List-detail view: Here, we place a list of items on the left and, on the right, we show the details of a single item.
• Feed: Here, we arrange content elements such as cards in a customizable grid, which provides a good view of a large amount of content.
• Supporting pane: Here, we organize app content into primary and secondary display areas. The primary area shows the main...

Making our app accessible

Making the apps that we develop accessible is extremely important. It ensures that our apps can be used by everyone. In this section, we will look at how we can make our apps accessible. Jetpack Compose uses semantics to make our apps accessible. Semantics are used to describe the UI elements in our apps. They are used by accessibility services to make our apps accessible. Semantics are also used by automated testing tools to test our apps. Some of the best practices for making our apps accessible are as follows:

• We should always ensure that all clickable or touchable elements or those that require user interaction are large enough to be easily tapped or clicked. Most Material components out of the box have a default size that is large enough to be easily tapped or clicked. If we must size by ourselves, we should ensure that the size is at least 48 dp by 48 dp.
• We should add content descriptions to our composables. Components such as Icon and Image...

Summary

In this chapter, we introduced Material 3. We also covered the features that Material 3 offers. We saw how to use Material 3 in our apps. Additionally, we covered how to design and develop our apps for large screens and, finally, we saw how to make our Jetpack Compose UIs accessible.

In the next chapter, we will continue building upon the skills that we’ve gained from the previous chapters. We will be looking at how to architect our app and the different architectures available. We will learn how to use Jetpack libraries in our apps and how to tackle dependency injection.