mobile-android-design

Android Mobile Design

Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications.

When to Use This Skill

• Designing Android app interfaces following Material Design 3
• Building Jetpack Compose UI and layouts
• Implementing Android navigation patterns (Navigation Compose)
• Creating adaptive layouts for phones, tablets, and foldables
• Using Material 3 theming with dynamic colors
• Building accessible Android interfaces

Core Concepts

Material Design 3 Principles

• Personalization: Dynamic color adapts UI to user's wallpaper
• Accessibility: Tonal palettes ensure sufficient color contrast
• Large Screens: Responsive layouts for tablets and foldables

Jetpack Compose Layout

Column(
    modifier = Modifier.padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(12.dp),
    horizontalAlignment = Alignment.Start
) {
    Text(text = "Title", style = MaterialTheme.typography.headlineSmall)
    Text(
        text = "Subtitle",
        style = MaterialTheme.typography.bodyMedium,
        color = MaterialTheme.colorScheme.onSurfaceVariant
    )
}

Navigation: Bottom Navigation

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    Scaffold(
        bottomBar = {
            NavigationBar {
                NavigationDestination.entries.forEach { destination ->
                    NavigationBarItem(
                        icon = { Icon(destination.icon, contentDescription = null) },
                        label = { Text(destination.label) },
                        selected = /* check current destination */,
                        onClick = {
                            navController.navigate(destination.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { innerPadding ->
        NavHost(navController, startDestination = "home", Modifier.padding(innerPadding)) {
            composable("home") { HomeScreen() }
            composable("search") { SearchScreen() }
            composable("profile") { ProfileScreen() }
        }
    }
}