Mastering Material Design 3 Components in Jetpack Compose

Material Design 3 (M3), also known as Material You, is Google’s latest design system, focusing on personalized and adaptive UI. Jetpack Compose, Android’s modern UI toolkit, fully supports Material Design 3, enabling developers to create beautiful, consistent, and user-centric applications. This blog post explores how to use Material Design 3 components in Jetpack Compose, providing practical examples and guidance.

What is Material Design 3?

Material Design 3 is an evolution of Google’s Material Design system, emphasizing customization, accessibility, and seamless adaptation to various screen sizes and devices. It includes updated components, typography, color palettes, and motion effects, making it easier to build cohesive and engaging UIs.

Why Use Material Design 3 in Jetpack Compose?

• Enhanced Aesthetics: Provides a modern and appealing visual style.
• Improved Usability: Ensures a consistent and intuitive user experience.
• Accessibility: Offers better support for accessibility features, making apps usable for everyone.
• Customization: Allows deep personalization to match branding and user preferences.

Getting Started with Material Design 3 in Jetpack Compose

To start using Material Design 3 components in Jetpack Compose, you need to add the Material 3 dependency to your project.

Step 1: Add Dependency

Include the Material 3 dependency in your build.gradle file:

dependencies {
    implementation("androidx.compose.material3:material3:1.2.0-beta01") // Or the latest version
}

Step 2: Set Up Your Theme

To apply Material Design 3 styles to your app, wrap your composables in a MaterialTheme. You can also customize the theme’s color, typography, and shapes.

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun MyApp(content: @Composable () -> Unit) {
    MaterialTheme {
        Surface {
            content()
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApp {
        // Your content here
    }
}

Using Material Design 3 Components

Jetpack Compose offers a variety of Material Design 3 components. Let’s explore some common ones with examples.

1. Buttons

Material Design 3 provides different button styles, including Filled, Outlined, and Text buttons.

import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun M3Buttons() {
    Button(onClick = { /* Handle click */ }) {
        Text("Filled Button")
    }
    OutlinedButton(onClick = { /* Handle click */ }) {
        Text("Outlined Button")
    }
    TextButton(onClick = { /* Handle click */ }) {
        Text("Text Button")
    }
}

@Preview(showBackground = true)
@Composable
fun ButtonsPreview() {
    MyApp {
        M3Buttons()
    }
}

2. Text Fields

Use TextField and OutlinedTextField for input forms, aligning with Material Design 3 styles.

import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun M3TextFields() {
    var textValue by remember { mutableStateOf("") }
    
    TextField(
        value = textValue,
        onValueChange = { textValue = it },
        label = { Text("Enter text") }
    )

    var outlinedTextValue by remember { mutableStateOf("") }
    
    OutlinedTextField(
        value = outlinedTextValue,
        onValueChange = { outlinedTextValue = it },
        label = { Text("Enter text") }
    )
}

@Preview(showBackground = true)
@Composable
fun TextFieldsPreview() {
    MyApp {
        M3TextFields()
    }
}

3. Cards

Cards are a versatile component for displaying information. Material Design 3 cards come with elevated and outlined variants.

import androidx.compose.material3.Card
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.padding
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun M3Cards() {
    ElevatedCard(modifier = Modifier.padding(8.dp)) {
        Text("Elevated Card", modifier = Modifier.padding(16.dp))
    }

    OutlinedCard(modifier = Modifier.padding(8.dp)) {
        Text("Outlined Card", modifier = Modifier.padding(16.dp))
    }
}

@Preview(showBackground = true)
@Composable
fun CardsPreview() {
    MyApp {
        M3Cards()
    }
}

4. Navigation Bar

The NavigationBar component provides a bottom navigation bar for easy navigation.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun M3NavigationBar() {
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("Home", "Settings")
    val icons = listOf(Icons.Filled.Home, Icons.Filled.Settings)

    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(icons[index], contentDescription = item) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun NavigationBarPreview() {
    MyApp {
        M3NavigationBar()
    }
}

5. TopAppBar

The TopAppBar component can be used as an action bar with different implementations available (e.g., CenterAlignedTopAppBar, SmallTopAppBar, MediumTopAppBar, and LargeTopAppBar).

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun M3TopAppBar() {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("My App") },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(Icons.Filled.Menu, "Menu")
                    }
                },
                scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
            )
        },
        content = { padding ->
            // Your content here
            Text(text = "Content", modifier = Modifier.padding(padding))
        }
    )
}

@Preview(showBackground = true)
@Composable
fun TopAppBarPreview() {
    MyApp {
        M3TopAppBar()
    }
}

Customizing Material Design 3 Components

One of the key features of Material Design 3 is its customizability. You can easily adapt components to match your brand using the MaterialTheme.

import androidx.compose.ui.graphics.Color
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val customColorScheme = ColorScheme(
    primary = Color(0xFF6750A4),
    secondary = Color(0xFF625B71),
    tertiary = Color(0xFF7D5260),
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    primaryContainer = Color(0xFFEADDFF),
    onPrimaryContainer = Color(0xFF21005F),
    inverseOnSurface = Color(0xFFF4EFF4)

    // Add other color definitions as needed
)

val customTypography = Typography(
    bodyLarge = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    // Define other text styles as needed
)

@Composable
fun CustomTheme(content: @Composable () -> Unit) {
    androidx.compose.material3.MaterialTheme(
        colorScheme = customColorScheme,
        typography = customTypography,
        content = content
    )
}

@Preview(showBackground = true)
@Composable
fun CustomThemePreview() {
    CustomTheme {
        Button(onClick = {}) {
            Text("Custom Button")
        }
    }
}

In this example, customColorScheme and customTypography are used to define a new theme with custom colors and text styles. You can extend this approach to customize shapes and other aspects of the theme.

Conclusion

Material Design 3 components in Jetpack Compose provide a powerful and flexible way to create modern, user-friendly Android applications. By leveraging M3 components and customization options, developers can build visually appealing and consistent UIs that enhance the overall user experience. Start integrating Material Design 3 into your Compose projects today to take advantage of its advanced features and capabilities.