1---
2name: mobile-android-design
3description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
4---
5 
6# Android Mobile Design
7 
8Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.
9 
10## When to Use This Skill
11 
12- Designing Android app interfaces following Material Design 3
13- Building Jetpack Compose UI and layouts
14- Implementing Android navigation patterns (Navigation Compose)
15- Creating adaptive layouts for phones, tablets, and foldables
16- Using Material 3 theming with dynamic colors
17- Building accessible Android interfaces
18- Implementing Android-specific gestures and interactions
19- Designing for different screen configurations
20 
21## Core Concepts
22 
23### 1. Material Design 3 Principles
24 
25**Personalization**: Dynamic color adapts UI to user's wallpaper
26**Accessibility**: Tonal palettes ensure sufficient color contrast
27**Large Screens**: Responsive layouts for tablets and foldables
28 
29**Material Components:**
30 
31- Cards, Buttons, FABs, Chips
32- Navigation (rail, drawer, bottom nav)
33- Text fields, Dialogs, Sheets
34- Lists, Menus, Progress indicators
35 
36### 2. Jetpack Compose Layout System
37 
38**Column and Row:**
39 
40```kotlin
41// Vertical arrangement with alignment
42Column(
43    modifier = Modifier.padding(16.dp),
44    verticalArrangement = Arrangement.spacedBy(12.dp),
45    horizontalAlignment = Alignment.Start
46) {
47    Text(
48        text = "Title",
49        style = MaterialTheme.typography.headlineSmall
50    )
51    Text(
52        text = "Subtitle",
53        style = MaterialTheme.typography.bodyMedium,
54        color = MaterialTheme.colorScheme.onSurfaceVariant
55    )
56}
57 
58// Horizontal arrangement with weight
59Row(
60    modifier = Modifier.fillMaxWidth(),
61    horizontalArrangement = Arrangement.SpaceBetween,
62    verticalAlignment = Alignment.CenterVertically
63) {
64    Icon(Icons.Default.Star, contentDescription = null)
65    Text("Featured")
66    Spacer(modifier = Modifier.weight(1f))
67    TextButton(onClick = {}) {
68        Text("View All")
69    }
70}
71```
72 
73**Lazy Lists and Grids:**
74 
75```kotlin
76// Lazy column with sticky headers
77LazyColumn {
78    items.groupBy { it.category }.forEach { (category, categoryItems) ->
79        stickyHeader {
80            Text(
81                text = category,
82                modifier = Modifier
83                    .fillMaxWidth()
84                    .background(MaterialTheme.colorScheme.surface)
85                    .padding(16.dp),
86                style = MaterialTheme.typography.titleMedium
87            )
88        }
89        items(categoryItems) { item ->
90            ItemRow(item = item)
91        }
92    }
93}
94 
95// Adaptive grid
96LazyVerticalGrid(
97    columns = GridCells.Adaptive(minSize = 150.dp),
98    contentPadding = PaddingValues(16.dp),
99    horizontalArrangement = Arrangement.spacedBy(12.dp),
100    verticalArrangement = Arrangement.spacedBy(12.dp)
101) {
102    items(items) { item ->
103        ItemCard(item = item)
104    }
105}
106```
107 
108### 3. Navigation Patterns
109 
110**Bottom Navigation:**
111 
112```kotlin
113@Composable
114fun MainScreen() {
115    val navController = rememberNavController()
116 
117    Scaffold(
118        bottomBar = {
119            NavigationBar {
120                val navBackStackEntry by navController.currentBackStackEntryAsState()
121                val currentDestination = navBackStackEntry?.destination
122 
123                NavigationDestination.entries.forEach { destination ->
124                    NavigationBarItem(
125                        icon = { Icon(destination.icon, contentDescription = null) },
126                        label = { Text(destination.label) },
127                        selected = currentDestination?.hierarchy?.any {
128                            it.route == destination.route
129                        } == true,
130                        onClick = {
131                            navController.navigate(destination.route) {
132                                popUpTo(navController.graph.findStartDestination().id) {
133                                    saveState = true
134                                }
135                                launchSingleTop = true
136                                restoreState = true
137                            }
138                        }
139                    )
140                }
141            }
142        }
143    ) { innerPadding ->
144        NavHost(
145            navController = navController,
146            startDestination = NavigationDestination.Home.route,
147            modifier = Modifier.padding(innerPadding)
148        ) {
149            composable(NavigationDestination.Home.route) { HomeScreen() }
150            composable(NavigationDestination.Search.route) { SearchScreen() }
151            composable(NavigationDestination.Profile.route) { ProfileScreen() }
152        }
153    }
154}
155```
156 
157**Navigation Drawer:**
158 
159```kotlin
160@Composable
161fun DrawerNavigation() {
162    val drawerState = rememberDrawerState(DrawerValue.Closed)
163    val scope = rememberCoroutineScope()
164 
165    ModalNavigationDrawer(
166        drawerState = drawerState,
167        drawerContent = {
168            ModalDrawerSheet {
169                Spacer(Modifier.height(12.dp))
170                Text(
171                    "App Name",
172                    modifier = Modifier.padding(16.dp),
173                    style = MaterialTheme.typography.titleLarge
174                )
175                HorizontalDivider()
176 
177                NavigationDrawerItem(
178                    icon = { Icon(Icons.Default.Home, null) },
179                    label = { Text("Home") },
180                    selected = true,
181                    onClick = { scope.launch { drawerState.close() } }
182                )
183                NavigationDrawerItem(
184                    icon = { Icon(Icons.Default.Settings, null) },
185                    label = { Text("Settings") },
186                    selected = false,
187                    onClick = { }
188                )
189            }
190        }
191    ) {
192        Scaffold(
193            topBar = {
194                TopAppBar(
195                    title = { Text("Home") },
196                    navigationIcon = {
197                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
198                            Icon(Icons.Default.Menu, contentDescription = "Menu")
199                        }
200                    }
201                )
202            }
203        ) { innerPadding ->
204            Content(modifier = Modifier.padding(innerPadding))
205        }
206    }
207}
208```
209 
210### 4. Material 3 Theming
211 
212**Color Scheme:**
213 
214```kotlin
215// Dynamic color (Android 12+)
216val dynamicColorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
217    val context = LocalContext.current
218    if (darkTheme) dynamicDarkColorScheme(context)
219    else dynamicLightColorScheme(context)
220} else {
221    if (darkTheme) DarkColorScheme else LightColorScheme
222}
223 
224// Custom color scheme
225private val LightColorScheme = lightColorScheme(
226    primary = Color(0xFF6750A4),
227    onPrimary = Color.White,
228    primaryContainer = Color(0xFFEADDFF),
229    onPrimaryContainer = Color(0xFF21005D),
230    secondary = Color(0xFF625B71),
231    onSecondary = Color.White,
232    tertiary = Color(0xFF7D5260),
233    onTertiary = Color.White,
234    surface = Color(0xFFFFFBFE),
235    onSurface = Color(0xFF1C1B1F),
236)
237```
238 
239**Typography:**
240 
241```kotlin
242val AppTypography = Typography(
243    displayLarge = TextStyle(
244        fontFamily = FontFamily.Default,
245        fontWeight = FontWeight.Normal,
246        fontSize = 57.sp,
247        lineHeight = 64.sp
248    ),
249    headlineMedium = TextStyle(
250        fontFamily = FontFamily.Default,
251        fontWeight = FontWeight.Normal,
252        fontSize = 28.sp,
253        lineHeight = 36.sp
254    ),
255    titleLarge = TextStyle(
256        fontFamily = FontFamily.Default,
257        fontWeight = FontWeight.Normal,
258        fontSize = 22.sp,
259        lineHeight = 28.sp
260    ),
261    bodyLarge = TextStyle(
262        fontFamily = FontFamily.Default,
263        fontWeight = FontWeight.Normal,
264        fontSize = 16.sp,
265        lineHeight = 24.sp
266    ),
267    labelMedium = TextStyle(
268        fontFamily = FontFamily.Default,
269        fontWeight = FontWeight.Medium,
270        fontSize = 12.sp,
271        lineHeight = 16.sp
272    )
273)
274```
275 
276### 5. Component Examples
277 
278**Cards:**
279 
280```kotlin
281@Composable
282fun FeatureCard(
283    title: String,
284    description: String,
285    imageUrl: String,
286    onClick: () -> Unit
287) {
288    Card(
289        onClick = onClick,
290        modifier = Modifier.fillMaxWidth(),
291        shape = RoundedCornerShape(16.dp),
292        colors = CardDefaults.cardColors(
293            containerColor = MaterialTheme.colorScheme.surfaceVariant
294        )
295    ) {
296        Column {
297            AsyncImage(
298                model = imageUrl,
299                contentDescription = null,
300                modifier = Modifier
301                    .fillMaxWidth()
302                    .height(180.dp),
303                contentScale = ContentScale.Crop
304            )
305            Column(modifier = Modifier.padding(16.dp)) {
306                Text(
307                    text = title,
308                    style = MaterialTheme.typography.titleMedium
309                )
310                Spacer(modifier = Modifier.height(8.dp))
311                Text(
312                    text = description,
313                    style = MaterialTheme.typography.bodyMedium,
314                    color = MaterialTheme.colorScheme.onSurfaceVariant
315                )
316            }
317        }
318    }
319}
320```
321 
322**Buttons:**
323 
324```kotlin
325// Filled button (primary action)
326Button(onClick = { }) {
327    Text("Continue")
328}
329 
330// Filled tonal button (secondary action)
331FilledTonalButton(onClick = { }) {
332    Icon(Icons.Default.Add, null)
333    Spacer(Modifier.width(8.dp))
334    Text("Add Item")
335}
336 
337// Outlined button
338OutlinedButton(onClick = { }) {
339    Text("Cancel")
340}
341 
342// Text button
343TextButton(onClick = { }) {
344    Text("Learn More")
345}
346 
347// FAB
348FloatingActionButton(
349    onClick = { },
350    containerColor = MaterialTheme.colorScheme.primaryContainer,
351    contentColor = MaterialTheme.colorScheme.onPrimaryContainer
352) {
353    Icon(Icons.Default.Add, contentDescription = "Add")
354}
355```
356 
357## Quick Start Component
358 
359```kotlin
360@Composable
361fun ItemListCard(
362    item: Item,
363    onItemClick: () -> Unit,
364    modifier: Modifier = Modifier
365) {
366    Card(
367        onClick = onItemClick,
368        modifier = modifier.fillMaxWidth(),
369        shape = RoundedCornerShape(12.dp)
370    ) {
371        Row(
372            modifier = Modifier
373                .padding(16.dp)
374                .fillMaxWidth(),
375            verticalAlignment = Alignment.CenterVertically
376        ) {
377            Box(
378                modifier = Modifier
379                    .size(48.dp)
380                    .clip(CircleShape)
381                    .background(MaterialTheme.colorScheme.primaryContainer),
382                contentAlignment = Alignment.Center
383            ) {
384                Icon(
385                    imageVector = Icons.Default.Star,
386                    contentDescription = null,
387                    tint = MaterialTheme.colorScheme.onPrimaryContainer
388                )
389            }
390 
391            Spacer(modifier = Modifier.width(16.dp))
392 
393            Column(modifier = Modifier.weight(1f)) {
394                Text(
395                    text = item.title,
396                    style = MaterialTheme.typography.titleMedium
397                )
398                Text(
399                    text = item.subtitle,
400                    style = MaterialTheme.typography.bodyMedium,
401                    color = MaterialTheme.colorScheme.onSurfaceVariant
402                )
403            }
404 
405            Icon(
406                imageVector = Icons.Default.ChevronRight,
407                contentDescription = null,
408                tint = MaterialTheme.colorScheme.onSurfaceVariant
409            )
410        }
411    }
412}
413```
414 
415## Best Practices
416 
4171. **Use Material Theme**: Access colors via `MaterialTheme.colorScheme` for automatic dark mode support
4182. **Support Dynamic Color**: Enable dynamic color on Android 12+ for personalization
4193. **Adaptive Layouts**: Use `WindowSizeClass` for responsive designs
4204. **Content Descriptions**: Add `contentDescription` to all interactive elements
4215. **Touch Targets**: Minimum 48dp touch targets for accessibility
4226. **State Hoisting**: Hoist state to make components reusable and testable
4237. **Remember Properly**: Use `remember` and `rememberSaveable` appropriately
4248. **Preview Annotations**: Add `@Preview` with different configurations
425 
426## Common Issues
427 
428- **Recomposition Issues**: Avoid passing unstable lambdas; use `remember`
429- **State Loss**: Use `rememberSaveable` for configuration changes
430- **Performance**: Use `LazyColumn` instead of `Column` for long lists
431- **Theme Leaks**: Ensure `MaterialTheme` wraps all composables
432- **Navigation Crashes**: Handle back press and deep links properly
433- **Memory Leaks**: Cancel coroutines in `DisposableEffect`
434