How to Use Material3 in Jetpack Compose for Android

To use Material3 in Jetpack Compose, add the material3 dependency and wrap your UI in MaterialTheme from androidx.compose.material3. This enables Material3 design components and theming in your Compose app.

Syntax

To use Material3 in Compose, you need to import MaterialTheme and other components from androidx.compose.material3. Wrap your UI content inside MaterialTheme to apply Material3 theming.

Key parts:

• MaterialTheme: Applies Material3 colors, typography, and shapes.
• Surface: Provides background surface with Material3 styling.
• Material3 components like Button, Text, etc., come from the same package.

kotlin

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun MyApp() {
  MaterialTheme {
    Surface {
      Text(text = "Hello Material3")
    }
  }
}

Output

A screen showing the text 'Hello Material3' styled with Material3 theme colors and typography.

Example

This example shows a simple Compose app using Material3 theme with a button and text. It demonstrates how to set up Material3 and use its components.

kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Material3App()
    }
  }
}

@Composable
fun Material3App() {
  val count = remember { mutableStateOf(0) }
  MaterialTheme {
    Surface {
      Button(onClick = { count.value++ }) {
        Text(text = "Clicked ${count.value} times")
      }
    }
  }
}

Output

A button labeled 'Clicked 0 times' that increments the count and updates the label each time it is clicked, styled with Material3 theme.

Common Pitfalls

Common mistakes when using Material3 in Compose include:

• Not adding the material3 dependency in build.gradle.
• Importing components from androidx.compose.material instead of androidx.compose.material3.
• Not wrapping UI in MaterialTheme, so Material3 styles are not applied.
• Mixing Material2 and Material3 components causing inconsistent UI.

kotlin

/* Wrong: Using Material2 Button with Material3 theme */
import androidx.compose.material.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun WrongUsage() {
  MaterialTheme {
    Button(onClick = {}) { // This Button is from Material2
      Text("Wrong Button")
    }
  }
}

/* Right: Use Material3 Button */
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun RightUsage() {
  MaterialTheme {
    Button(onClick = {}) { // This Button is from Material3
      Text("Right Button")
    }
  }
}

Output

WrongUsage shows a Material2 button inside a Material3 theme causing style mismatch; RightUsage shows consistent Material3 button styling.

Quick Reference

Summary tips for using Material3 in Compose:

• Add implementation "androidx.compose.material3:material3:1.1.0" to your dependencies.
• Import components from androidx.compose.material3.
• Wrap your UI in MaterialTheme { ... } to apply Material3 styles.
• Use Surface for background surfaces.
• Use Material3 components like Button, Text, Card, etc.

Key Takeaways

Add the Material3 dependency and import from androidx.compose.material3 to use Material3 in Compose.

Wrap your UI in MaterialTheme from Material3 to apply the new design system styles.

Avoid mixing Material2 and Material3 components to keep UI consistent.

Use Surface for backgrounds and Material3 components like Button and Text for UI elements.

Check your imports and dependencies carefully to prevent common mistakes.