mobile-android-design

Android Mobile Design

Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.

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
• Implementing Android-specific gestures and interactions
• Designing for different screen configurations

Core Concepts

For Material Design 3 principles, layout, navigation, theming and component examples, read references/details.md.

Quick Start Component

@Composable
fun ItemListCard(
    item: Item,
    onItemClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onItemClick,
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onPrimaryContainer
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = item.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = item.subtitle,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }

            Icon(
                imageVector = Icons.Default.ChevronRight,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

This example uses the ChevronRight icon, which comes from the extended Material icons library rather than the core icon set. Add that library through your pinned Compose dependency versions from a trusted repository, and confirm the source with the user before adding any new dependency.

Best Practices

1. Use Material Theme: Access colors via MaterialTheme.colorScheme for automatic dark mode support
2. Support Dynamic Color: Enable dynamic color on Android 12+ for personalization
3. Adaptive Layouts: Use WindowSizeClass for responsive designs
4. Content Descriptions: Give icon only interactive elements such as IconButton a contentDescription; decorative icons inside a labeled clickable parent should use null, with the label on the interactive element
5. Touch Targets: Minimum 48dp touch targets for accessibility
6. State Hoisting: Hoist state to make components reusable and testable
7. Remember Properly: Use remember and rememberSaveable appropriately
8. Preview Annotations: Add @Preview with different configurations

Common Issues

• Recomposition Issues: Avoid passing unstable lambdas; use remember
• State Loss: Use rememberSaveable for configuration changes
• Performance: Use LazyColumn instead of Column for long lists
• Theme Leaks: Ensure MaterialTheme wraps all composables
• Navigation Crashes: Handle back press and deep links properly. Treat deep link and intent data as untrusted input from other apps and websites: validate and type check route arguments before loading data or performing actions, expose only intended routes through deep links, keep sensitive screens out of deep link graphs, and verify that https links belong to the app's own domain
• Memory Leaks: Launch coroutine work with LaunchedEffect or rememberCoroutineScope so it is cancelled when the composable leaves composition; use DisposableEffect to remove listeners and observers