android-design-system-m3

Android Design Systems (Material 3) 🎨🛠️

Advanced strategies for building scalable, cohesive, and professional design systems for modern Android applications using the Material 3 (M3) framework.

⚡ When to Use

• Branding Architecture: Defining custom color tokens, typography, and shapes.
• Dark Mode Support: Implementing unified themes that swap automatically.
• Dynamic Color: Using DynamicColor for personalized system-wide tinting.
• Component Libraries: Building reusable Atom/Molecule components.
• Multi-Brand Support: Creating one app code for multiple visual identities.

🏗️ The 3 Pillars of M3 Design Systems

1. Color Scheme: Light/Dark palettes, surface variations, and semantic tokens (Primary, Error, OnPrimary).
2. Typography: Defined scales (HeadlineLarge, BodyMedium, LabelSmall) based on modern fonts.
3. Shapes: Corner radii for cards, buttons, and surfaces.

🧱 Creating Your Theme

• Rule: NEVER use hex codes in your UI code. ALWAYS use semantic tokens from your theme.
• Bad: color = Color(0xFFAA44CC)
• Good: color = MaterialTheme.colorScheme.primary

1. The Theme Composable

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(colorScheme = colorScheme, typography = Typography, shapes = Shapes, content = content)

2. Mandatory Scaffold Files

When a user asks to "create a new project" or "set up a screen", ALWAYS ensure these three files are explicitly created in the ui/theme package to prevent Theme not found errors:

1. Theme.kt (containing the main Theme composable)
2. Color.kt (containing hex colors and M3 ColorSchemes)
3. Type.kt (containing Compose Typography)

• Provide these files outright if they are missing.