1# mobile-android-design — detailed sections
2 
3## Core Concepts
4 
5### 1. Material Design 3 Principles
6 
7**Personalization**: Dynamic color adapts UI to user's wallpaper
8**Accessibility**: Tonal palettes ensure sufficient color contrast
9**Large Screens**: Responsive layouts for tablets and foldables
10 
11**Material Components:**
12 
13- Cards, Buttons, FABs, Chips
14- Navigation (rail, drawer, bottom nav)
15- Text fields, Dialogs, Sheets
16- Lists, Menus, Progress indicators
17 
18### 2. Jetpack Compose Layout System
19 
20**Column and Row:**
21 
22```kotlin
23// Vertical arrangement with alignment
24Column(
25    modifier = Modifier.padding(16.dp),
26    verticalArrangement = Arrangement.spacedBy(12.dp),
27    horizontalAlignment = Alignment.Start
28) {
29    Text(
30        text = "Title",
31        style = MaterialTheme.typography.headlineSmall
32    )
33    Text(
34        text = "Subtitle",
35        style = MaterialTheme.typography.bodyMedium,
36        color = MaterialTheme.colorScheme.onSurfaceVariant
37    )
38}
39 
40// Horizontal arrangement with weight
41Row(
42    modifier = Modifier.fillMaxWidth(),
43    horizontalArrangement = Arrangement.SpaceBetween,
44    verticalAlignment = Alignment.CenterVertically
45) {
46    Icon(Icons.Default.Star, contentDescription = null)
47    Text("Featured")
48    Spacer(modifier = Modifier.weight(1f))
49    TextButton(onClick = {}) {
50        Text("View All")
51    }
52}
53```
54 
55**Lazy Lists and Grids:**
56 
57```kotlin
58// Lazy column with sticky headers
59LazyColumn {
60    items.groupBy { it.category }.forEach { (category, categoryItems) ->
61        stickyHeader {
62            Text(
63                text = category,
64                modifier = Modifier
65                    .fillMaxWidth()
66                    .background(MaterialTheme.colorScheme.surface)
67                    .padding(16.dp),
68                style = MaterialTheme.typography.titleMedium
69            )
70        }
71        items(categoryItems) { item ->
72            ItemRow(item = item)
73        }
74    }
75}
76 
77// Adaptive grid
78LazyVerticalGrid(
79    columns = GridCells.Adaptive(minSize = 150.dp),
80    contentPadding = PaddingValues(16.dp),
81    horizontalArrangement = Arrangement.spacedBy(12.dp),
82    verticalArrangement = Arrangement.spacedBy(12.dp)
83) {
84    items(items) { item ->
85        ItemCard(item = item)
86    }
87}
88```
89 
90### 3. Navigation Patterns
91 
92**Bottom Navigation:**
93 
94```kotlin
95@Composable
96fun MainScreen() {
97    val navController = rememberNavController()
98 
99    Scaffold(
100        bottomBar = {
101            NavigationBar {
102                val navBackStackEntry by navController.currentBackStackEntryAsState()
103                val currentDestination = navBackStackEntry?.destination
104 
105                NavigationDestination.entries.forEach { destination ->
106                    NavigationBarItem(
107                        icon = { Icon(destination.icon, contentDescription = null) },
108                        label = { Text(destination.label) },
109                        selected = currentDestination?.hierarchy?.any {
110                            it.route == destination.route
111                        } == true,
112                        onClick = {
113                            navController.navigate(destination.route) {
114                                popUpTo(navController.graph.findStartDestination().id) {
115                                    saveState = true
116                                }
117                                launchSingleTop = true
118                                restoreState = true
119                            }
120                        }
121                    )
122                }
123            }
124        }
125    ) { innerPadding ->
126        NavHost(
127            navController = navController,
128            startDestination = NavigationDestination.Home.route,
129            modifier = Modifier.padding(innerPadding)
130        ) {
131            composable(NavigationDestination.Home.route) { HomeScreen() }
132            composable(NavigationDestination.Search.route) { SearchScreen() }
133            composable(NavigationDestination.Profile.route) { ProfileScreen() }
134        }
135    }
136}
137```
138 
139**Navigation Drawer:**
140 
141```kotlin
142@Composable
143fun DrawerNavigation() {
144    val drawerState = rememberDrawerState(DrawerValue.Closed)
145    val scope = rememberCoroutineScope()
146 
147    ModalNavigationDrawer(
148        drawerState = drawerState,
149        drawerContent = {
150            ModalDrawerSheet {
151                Spacer(Modifier.height(12.dp))
152                Text(
153                    "App Name",
154                    modifier = Modifier.padding(16.dp),
155                    style = MaterialTheme.typography.titleLarge
156                )
157                HorizontalDivider()
158 
159                NavigationDrawerItem(
160                    icon = { Icon(Icons.Default.Home, null) },
161                    label = { Text("Home") },
162                    selected = true,
163                    onClick = { scope.launch { drawerState.close() } }
164                )
165                NavigationDrawerItem(
166                    icon = { Icon(Icons.Default.Settings, null) },
167                    label = { Text("Settings") },
168                    selected = false,
169                    onClick = { }
170                )
171            }
172        }
173    ) {
174        Scaffold(
175            topBar = {
176                TopAppBar(
177                    title = { Text("Home") },
178                    navigationIcon = {
179                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
180                            Icon(Icons.Default.Menu, contentDescription = "Menu")
181                        }
182                    }
183                )
184            }
185        ) { innerPadding ->
186            Content(modifier = Modifier.padding(innerPadding))
187        }
188    }
189}
190```
191 
192### 4. Material 3 Theming
193 
194**Color Scheme:**
195 
196```kotlin
197// Dynamic color (Android 12+)
198val dynamicColorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
199    val context = LocalContext.current
200    if (darkTheme) dynamicDarkColorScheme(context)
201    else dynamicLightColorScheme(context)
202} else {
203    if (darkTheme) DarkColorScheme else LightColorScheme
204}
205 
206// Custom color scheme
207private val LightColorScheme = lightColorScheme(
208    primary = Color(0xFF6750A4),
209    onPrimary = Color.White,
210    primaryContainer = Color(0xFFEADDFF),
211    onPrimaryContainer = Color(0xFF21005D),
212    secondary = Color(0xFF625B71),
213    onSecondary = Color.White,
214    tertiary = Color(0xFF7D5260),
215    onTertiary = Color.White,
216    surface = Color(0xFFFFFBFE),
217    onSurface = Color(0xFF1C1B1F),
218)
219```
220 
221**Typography:**
222 
223```kotlin
224val AppTypography = Typography(
225    displayLarge = TextStyle(
226        fontFamily = FontFamily.Default,
227        fontWeight = FontWeight.Normal,
228        fontSize = 57.sp,
229        lineHeight = 64.sp
230    ),
231    headlineMedium = TextStyle(
232        fontFamily = FontFamily.Default,
233        fontWeight = FontWeight.Normal,
234        fontSize = 28.sp,
235        lineHeight = 36.sp
236    ),
237    titleLarge = TextStyle(
238        fontFamily = FontFamily.Default,
239        fontWeight = FontWeight.Normal,
240        fontSize = 22.sp,
241        lineHeight = 28.sp
242    ),
243    bodyLarge = TextStyle(
244        fontFamily = FontFamily.Default,
245        fontWeight = FontWeight.Normal,
246        fontSize = 16.sp,
247        lineHeight = 24.sp
248    ),
249    labelMedium = TextStyle(
250        fontFamily = FontFamily.Default,
251        fontWeight = FontWeight.Medium,
252        fontSize = 12.sp,
253        lineHeight = 16.sp
254    )
255)
256```
257 
258### 5. Component Examples
259 
260**Cards:**
261 
262```kotlin
263@Composable
264fun FeatureCard(
265    title: String,
266    description: String,
267    imageUrl: String,
268    onClick: () -> Unit
269) {
270    Card(
271        onClick = onClick,
272        modifier = Modifier.fillMaxWidth(),
273        shape = RoundedCornerShape(16.dp),
274        colors = CardDefaults.cardColors(
275            containerColor = MaterialTheme.colorScheme.surfaceVariant
276        )
277    ) {
278        Column {
279            AsyncImage(
280                model = imageUrl,
281                contentDescription = null,
282                modifier = Modifier
283                    .fillMaxWidth()
284                    .height(180.dp),
285                contentScale = ContentScale.Crop
286            )
287            Column(modifier = Modifier.padding(16.dp)) {
288                Text(
289                    text = title,
290                    style = MaterialTheme.typography.titleMedium
291                )
292                Spacer(modifier = Modifier.height(8.dp))
293                Text(
294                    text = description,
295                    style = MaterialTheme.typography.bodyMedium,
296                    color = MaterialTheme.colorScheme.onSurfaceVariant
297                )
298            }
299        }
300    }
301}
302```
303 
304**Buttons:**
305 
306```kotlin
307// Filled button (primary action)
308Button(onClick = { }) {
309    Text("Continue")
310}
311 
312// Filled tonal button (secondary action)
313FilledTonalButton(onClick = { }) {
314    Icon(Icons.Default.Add, null)
315    Spacer(Modifier.width(8.dp))
316    Text("Add Item")
317}
318 
319// Outlined button
320OutlinedButton(onClick = { }) {
321    Text("Cancel")
322}
323 
324// Text button
325TextButton(onClick = { }) {
326    Text("Learn More")
327}
328 
329// FAB
330FloatingActionButton(
331    onClick = { },
332    containerColor = MaterialTheme.colorScheme.primaryContainer,
333    contentColor = MaterialTheme.colorScheme.onPrimaryContainer
334) {
335    Icon(Icons.Default.Add, contentDescription = "Add")
336}
337```
338