Designing for Android Compose: Material 3 Patterns That Feel Native

// build.gradle.kts
implementation("androidx.compose.material3:material3")

MaterialTheme

@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = LightColorScheme,
        typography = AppTypography,
        shapes = AppShapes
    ) {
        AppNavHost()
    }
}

@Composable
fun MyApp() {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (isSystemInDarkTheme()) dynamicDarkColorScheme(context)
            else dynamicLightColorScheme(context)
        }
        isSystemInDarkTheme() -> DarkColorScheme
        else -> LightColorScheme
    }
    
    MaterialTheme(colorScheme = colorScheme) {
        AppNavHost()
    }
}

// DO use semantic roles — they adapt to light/dark and dynamic color
Text(
    text = "Primary content",
    color = MaterialTheme.colorScheme.onSurface
)

Icon(
    imageVector = Icons.Default.Check,
    contentDescription = null,
    tint = MaterialTheme.colorScheme.primary
)

// DON'T hardcode colors — they don't adapt
Text(
    text = "Primary content",
    color = Color(0xFF1A1A1A) // Breaks in dark mode
)

// Material 3 type scale — use these consistently
Text(text = title, style = MaterialTheme.typography.headlineMedium)
Text(text = body, style = MaterialTheme.typography.bodyMedium)
Text(text = caption, style = MaterialTheme.typography.labelSmall)
Text(text = buttonText, style = MaterialTheme.typography.labelLarge)

AppTypography

val AppTypography = Typography(
    bodyMedium = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    )
)

// ElevatedCard naturally handles elevation tinting
ElevatedCard(
    elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp)
) {
    // Content
}

// Surface with explicit elevation
Surface(
    tonalElevation = 3.dp,
    shape = MaterialTheme.shapes.medium
) {
    // Content
}

val AppShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(28.dp)
)

// Use in composables
Surface(shape = MaterialTheme.shapes.medium) { ... }

// Visibility changes with animation
AnimatedVisibility(
    visible = isExpanded,
    enter = expandVertically() + fadeIn(),
    exit = shrinkVertically() + fadeOut()
) {
    ExpandedContent()
}

// Animated content change
AnimatedContent(
    targetState = currentTab,
    transitionSpec = {
        fadeIn(animationSpec = tween(300)) togetherWith 
        fadeOut(animationSpec = tween(300))
    }
) { tab ->
    when (tab) {
        Tab.Tasks -> TaskListContent()
        Tab.Calendar -> CalendarContent()
    }
}

// Smooth value transitions
val elevation by animateDpAsState(
    targetValue = if (isScrolled) 4.dp else 0.dp,
    label = "header_elevation"
)

// Automatically correct in light and dark
Icon(
    imageVector = Icons.Default.Favorite,
    tint = MaterialTheme.colorScheme.primary // Correct in both modes
)

// Conditionally adjust only for non-color-scheme content
val iconAsset = if (isSystemInDarkTheme()) {
    painterResource(R.drawable.logo_light) // Logo variant for dark mode
} else {
    painterResource(R.drawable.logo_dark)
}