1# Jetpack Compose Component Library
2 
3## Lists and Collections
4 
5### Basic LazyColumn
6 
7```kotlin
8@Composable
9fun ItemList(
10    items: List<Item>,
11    onItemClick: (Item) -> Unit,
12    modifier: Modifier = Modifier
13) {
14    LazyColumn(
15        modifier = modifier.fillMaxSize(),
16        contentPadding = PaddingValues(16.dp),
17        verticalArrangement = Arrangement.spacedBy(8.dp)
18    ) {
19        items(
20            items = items,
21            key = { it.id }
22        ) { item ->
23            ItemRow(
24                item = item,
25                onClick = { onItemClick(item) }
26            )
27        }
28    }
29}
30```
31 
32### Pull to Refresh
33 
34```kotlin
35@OptIn(ExperimentalMaterial3Api::class)
36@Composable
37fun RefreshableList(
38    items: List<Item>,
39    isRefreshing: Boolean,
40    onRefresh: () -> Unit
41) {
42    val pullToRefreshState = rememberPullToRefreshState()
43 
44    PullToRefreshBox(
45        state = pullToRefreshState,
46        isRefreshing = isRefreshing,
47        onRefresh = onRefresh
48    ) {
49        LazyColumn(
50            modifier = Modifier.fillMaxSize()
51        ) {
52            items(items) { item ->
53                ItemRow(item = item)
54            }
55        }
56    }
57}
58```
59 
60### Swipe to Dismiss
61 
62```kotlin
63@OptIn(ExperimentalMaterial3Api::class)
64@Composable
65fun SwipeableItem(
66    item: Item,
67    onDelete: () -> Unit
68) {
69    val dismissState = rememberSwipeToDismissBoxState(
70        confirmValueChange = { value ->
71            if (value == SwipeToDismissBoxValue.EndToStart) {
72                onDelete()
73                true
74            } else {
75                false
76            }
77        }
78    )
79 
80    SwipeToDismissBox(
81        state = dismissState,
82        backgroundContent = {
83            Box(
84                modifier = Modifier
85                    .fillMaxSize()
86                    .background(MaterialTheme.colorScheme.errorContainer)
87                    .padding(horizontal = 20.dp),
88                contentAlignment = Alignment.CenterEnd
89            ) {
90                Icon(
91                    Icons.Default.Delete,
92                    contentDescription = "Delete",
93                    tint = MaterialTheme.colorScheme.onErrorContainer
94                )
95            }
96        }
97    ) {
98        ItemRow(item = item)
99    }
100}
101```
102 
103### Sticky Headers
104 
105```kotlin
106@OptIn(ExperimentalFoundationApi::class)
107@Composable
108fun GroupedList(
109    groups: Map<String, List<Item>>
110) {
111    LazyColumn {
112        groups.forEach { (header, items) ->
113            stickyHeader {
114                Surface(
115                    modifier = Modifier.fillMaxWidth(),
116                    color = MaterialTheme.colorScheme.surfaceVariant
117                ) {
118                    Text(
119                        text = header,
120                        modifier = Modifier.padding(16.dp),
121                        style = MaterialTheme.typography.titleSmall,
122                        color = MaterialTheme.colorScheme.onSurfaceVariant
123                    )
124                }
125            }
126            items(items, key = { it.id }) { item ->
127                ItemRow(item = item)
128            }
129        }
130    }
131}
132```
133 
134## Forms and Input
135 
136### Text Fields
137 
138```kotlin
139@Composable
140fun LoginForm(
141    onLogin: (email: String, password: String) -> Unit
142) {
143    var email by rememberSaveable { mutableStateOf("") }
144    var password by rememberSaveable { mutableStateOf("") }
145    var passwordVisible by rememberSaveable { mutableStateOf(false) }
146    var emailError by remember { mutableStateOf<String?>(null) }
147 
148    Column(
149        modifier = Modifier.padding(16.dp),
150        verticalArrangement = Arrangement.spacedBy(16.dp)
151    ) {
152        OutlinedTextField(
153            value = email,
154            onValueChange = {
155                email = it
156                emailError = if (it.isValidEmail()) null else "Invalid email"
157            },
158            label = { Text("Email") },
159            placeholder = { Text("[email protected]") },
160            leadingIcon = { Icon(Icons.Default.Email, null) },
161            isError = emailError != null,
162            supportingText = emailError?.let { { Text(it) } },
163            keyboardOptions = KeyboardOptions(
164                keyboardType = KeyboardType.Email,
165                imeAction = ImeAction.Next
166            ),
167            singleLine = true,
168            modifier = Modifier.fillMaxWidth()
169        )
170 
171        OutlinedTextField(
172            value = password,
173            onValueChange = { password = it },
174            label = { Text("Password") },
175            leadingIcon = { Icon(Icons.Default.Lock, null) },
176            trailingIcon = {
177                IconButton(onClick = { passwordVisible = !passwordVisible }) {
178                    Icon(
179                        if (passwordVisible) Icons.Default.VisibilityOff
180                        else Icons.Default.Visibility,
181                        contentDescription = "Toggle password visibility"
182                    )
183                }
184            },
185            visualTransformation = if (passwordVisible)
186                VisualTransformation.None
187            else
188                PasswordVisualTransformation(),
189            keyboardOptions = KeyboardOptions(
190                keyboardType = KeyboardType.Password,
191                imeAction = ImeAction.Done
192            ),
193            singleLine = true,
194            modifier = Modifier.fillMaxWidth()
195        )
196 
197        Button(
198            onClick = { onLogin(email, password) },
199            modifier = Modifier.fillMaxWidth(),
200            enabled = email.isNotEmpty() && password.isNotEmpty() && emailError == null
201        ) {
202            Text("Sign In")
203        }
204    }
205}
206```
207 
208### Search Bar
209 
210```kotlin
211@OptIn(ExperimentalMaterial3Api::class)
212@Composable
213fun SearchableScreen(
214    items: List<Item>,
215    onItemClick: (Item) -> Unit
216) {
217    var query by rememberSaveable { mutableStateOf("") }
218    var expanded by rememberSaveable { mutableStateOf(false) }
219 
220    val filteredItems = remember(query, items) {
221        if (query.isEmpty()) items
222        else items.filter { it.name.contains(query, ignoreCase = true) }
223    }
224 
225    SearchBar(
226        query = query,
227        onQueryChange = { query = it },
228        onSearch = { expanded = false },
229        active = expanded,
230        onActiveChange = { expanded = it },
231        placeholder = { Text("Search items") },
232        leadingIcon = { Icon(Icons.Default.Search, null) },
233        trailingIcon = {
234            if (query.isNotEmpty()) {
235                IconButton(onClick = { query = "" }) {
236                    Icon(Icons.Default.Clear, "Clear search")
237                }
238            }
239        },
240        modifier = Modifier
241            .fillMaxWidth()
242            .padding(horizontal = if (expanded) 0.dp else 16.dp)
243    ) {
244        LazyColumn(
245            modifier = Modifier.fillMaxWidth(),
246            contentPadding = PaddingValues(16.dp)
247        ) {
248            items(filteredItems) { item ->
249                ListItem(
250                    headlineContent = { Text(item.name) },
251                    supportingContent = { Text(item.description) },
252                    modifier = Modifier.clickable {
253                        onItemClick(item)
254                        expanded = false
255                    }
256                )
257            }
258        }
259    }
260}
261```
262 
263### Selection Controls
264 
265```kotlin
266@Composable
267fun SettingsScreen() {
268    var notificationsEnabled by rememberSaveable { mutableStateOf(true) }
269    var selectedOption by rememberSaveable { mutableStateOf(0) }
270    var expandedDropdown by remember { mutableStateOf(false) }
271    var selectedLanguage by rememberSaveable { mutableStateOf("English") }
272    val languages = listOf("English", "Spanish", "French", "German")
273 
274    Column {
275        // Switch
276        ListItem(
277            headlineContent = { Text("Enable Notifications") },
278            supportingContent = { Text("Receive push notifications") },
279            trailingContent = {
280                Switch(
281                    checked = notificationsEnabled,
282                    onCheckedChange = { notificationsEnabled = it }
283                )
284            }
285        )
286 
287        HorizontalDivider()
288 
289        // Radio buttons
290        Column {
291            Text(
292                "Theme",
293                modifier = Modifier.padding(16.dp),
294                style = MaterialTheme.typography.titleSmall
295            )
296            listOf("System", "Light", "Dark").forEachIndexed { index, option ->
297                Row(
298                    modifier = Modifier
299                        .fillMaxWidth()
300                        .selectable(
301                            selected = selectedOption == index,
302                            onClick = { selectedOption = index },
303                            role = Role.RadioButton
304                        )
305                        .padding(horizontal = 16.dp, vertical = 12.dp),
306                    verticalAlignment = Alignment.CenterVertically
307                ) {
308                    RadioButton(
309                        selected = selectedOption == index,
310                        onClick = null
311                    )
312                    Spacer(Modifier.width(16.dp))
313                    Text(option)
314                }
315            }
316        }
317 
318        HorizontalDivider()
319 
320        // Dropdown
321        ExposedDropdownMenuBox(
322            expanded = expandedDropdown,
323            onExpandedChange = { expandedDropdown = it },
324            modifier = Modifier.padding(16.dp)
325        ) {
326            OutlinedTextField(
327                value = selectedLanguage,
328                onValueChange = {},
329                readOnly = true,
330                label = { Text("Language") },
331                trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expandedDropdown) },
332                modifier = Modifier
333                    .fillMaxWidth()
334                    .menuAnchor()
335            )
336            ExposedDropdownMenu(
337                expanded = expandedDropdown,
338                onDismissRequest = { expandedDropdown = false }
339            ) {
340                languages.forEach { language ->
341                    DropdownMenuItem(
342                        text = { Text(language) },
343                        onClick = {
344                            selectedLanguage = language
345                            expandedDropdown = false
346                        },
347                        contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding
348                    )
349                }
350            }
351        }
352    }
353}
354```
355 
356## Dialogs and Bottom Sheets
357 
358### Alert Dialog
359 
360```kotlin
361@Composable
362fun DeleteConfirmationDialog(
363    itemName: String,
364    onConfirm: () -> Unit,
365    onDismiss: () -> Unit
366) {
367    AlertDialog(
368        onDismissRequest = onDismiss,
369        icon = {
370            Icon(
371                Icons.Default.Warning,
372                contentDescription = null,
373                tint = MaterialTheme.colorScheme.error
374            )
375        },
376        title = {
377            Text("Delete Item?")
378        },
379        text = {
380            Text("Are you sure you want to delete \"$itemName\"? This action cannot be undone.")
381        },
382        confirmButton = {
383            TextButton(
384                onClick = onConfirm,
385                colors = ButtonDefaults.textButtonColors(
386                    contentColor = MaterialTheme.colorScheme.error
387                )
388            ) {
389                Text("Delete")
390            }
391        },
392        dismissButton = {
393            TextButton(onClick = onDismiss) {
394                Text("Cancel")
395            }
396        }
397    )
398}
399```
400 
401### Modal Bottom Sheet
402 
403```kotlin
404@OptIn(ExperimentalMaterial3Api::class)
405@Composable
406fun OptionsBottomSheet(
407    onDismiss: () -> Unit,
408    onOptionSelected: (String) -> Unit
409) {
410    val sheetState = rememberModalBottomSheetState()
411 
412    ModalBottomSheet(
413        onDismissRequest = onDismiss,
414        sheetState = sheetState,
415        dragHandle = { BottomSheetDefaults.DragHandle() }
416    ) {
417        Column(
418            modifier = Modifier
419                .fillMaxWidth()
420                .padding(bottom = 32.dp)
421        ) {
422            Text(
423                "Options",
424                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
425                style = MaterialTheme.typography.titleMedium
426            )
427 
428            listOf(
429                Triple(Icons.Default.Share, "Share", "share"),
430                Triple(Icons.Default.Edit, "Edit", "edit"),
431                Triple(Icons.Default.FileCopy, "Duplicate", "duplicate"),
432                Triple(Icons.Default.Delete, "Delete", "delete")
433            ).forEach { (icon, label, action) ->
434                ListItem(
435                    headlineContent = { Text(label) },
436                    leadingContent = {
437                        Icon(
438                            icon,
439                            contentDescription = null,
440                            tint = if (action == "delete")
441                                MaterialTheme.colorScheme.error
442                            else
443                                MaterialTheme.colorScheme.onSurfaceVariant
444                        )
445                    },
446                    modifier = Modifier.clickable { onOptionSelected(action) }
447                )
448            }
449        }
450    }
451}
452```
453 
454### Date and Time Pickers
455 
456```kotlin
457@OptIn(ExperimentalMaterial3Api::class)
458@Composable
459fun DateTimePickerExample() {
460    var showDatePicker by remember { mutableStateOf(false) }
461    var showTimePicker by remember { mutableStateOf(false) }
462    val datePickerState = rememberDatePickerState()
463    val timePickerState = rememberTimePickerState()
464 
465    Column(modifier = Modifier.padding(16.dp)) {
466        OutlinedButton(onClick = { showDatePicker = true }) {
467            Icon(Icons.Default.CalendarToday, null)
468            Spacer(Modifier.width(8.dp))
469            Text(
470                datePickerState.selectedDateMillis?.let {
471                    SimpleDateFormat("MMM dd, yyyy", Locale.getDefault())
472                        .format(Date(it))
473                } ?: "Select Date"
474            )
475        }
476 
477        Spacer(Modifier.height(16.dp))
478 
479        OutlinedButton(onClick = { showTimePicker = true }) {
480            Icon(Icons.Default.Schedule, null)
481            Spacer(Modifier.width(8.dp))
482            Text(
483                String.format("%02d:%02d", timePickerState.hour, timePickerState.minute)
484            )
485        }
486    }
487 
488    if (showDatePicker) {
489        DatePickerDialog(
490            onDismissRequest = { showDatePicker = false },
491            confirmButton = {
492                TextButton(onClick = { showDatePicker = false }) {
493                    Text("OK")
494                }
495            },
496            dismissButton = {
497                TextButton(onClick = { showDatePicker = false }) {
498                    Text("Cancel")
499                }
500            }
501        ) {
502            DatePicker(state = datePickerState)
503        }
504    }
505 
506    if (showTimePicker) {
507        AlertDialog(
508            onDismissRequest = { showTimePicker = false },
509            confirmButton = {
510                TextButton(onClick = { showTimePicker = false }) {
511                    Text("OK")
512                }
513            },
514            dismissButton = {
515                TextButton(onClick = { showTimePicker = false }) {
516                    Text("Cancel")
517                }
518            },
519            text = {
520                TimePicker(state = timePickerState)
521            }
522        )
523    }
524}
525```
526 
527## Loading States
528 
529### Progress Indicators
530 
531```kotlin
532@Composable
533fun LoadingStates() {
534    Column(
535        modifier = Modifier.padding(16.dp),
536        verticalArrangement = Arrangement.spacedBy(24.dp)
537    ) {
538        // Indeterminate circular
539        CircularProgressIndicator()
540 
541        // Determinate circular
542        CircularProgressIndicator(
543            progress = { 0.7f },
544            strokeWidth = 4.dp
545        )
546 
547        // Indeterminate linear
548        LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
549 
550        // Determinate linear
551        LinearProgressIndicator(
552            progress = { 0.7f },
553            modifier = Modifier.fillMaxWidth()
554        )
555    }
556}
557```
558 
559### Skeleton Loading
560 
561```kotlin
562@Composable
563fun SkeletonLoader(
564    modifier: Modifier = Modifier
565) {
566    val infiniteTransition = rememberInfiniteTransition(label = "skeleton")
567    val alpha by infiniteTransition.animateFloat(
568        initialValue = 0.3f,
569        targetValue = 0.7f,
570        animationSpec = infiniteRepeatable(
571            animation = tween(1000, easing = LinearEasing),
572            repeatMode = RepeatMode.Reverse
573        ),
574        label = "alpha"
575    )
576 
577    Column(
578        modifier = modifier.padding(16.dp),
579        verticalArrangement = Arrangement.spacedBy(12.dp)
580    ) {
581        repeat(5) {
582            Row(
583                verticalAlignment = Alignment.CenterVertically,
584                horizontalArrangement = Arrangement.spacedBy(12.dp)
585            ) {
586                Box(
587                    modifier = Modifier
588                        .size(48.dp)
589                        .clip(CircleShape)
590                        .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = alpha))
591                )
592                Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
593                    Box(
594                        modifier = Modifier
595                            .height(16.dp)
596                            .fillMaxWidth(0.7f)
597                            .clip(RoundedCornerShape(4.dp))
598                            .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = alpha))
599                    )
600                    Box(
601                        modifier = Modifier
602                            .height(12.dp)
603                            .fillMaxWidth(0.5f)
604                            .clip(RoundedCornerShape(4.dp))
605                            .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = alpha))
606                    )
607                }
608            }
609        }
610    }
611}
612```
613 
614### Content Loading Pattern
615 
616```kotlin
617@Composable
618fun <T> AsyncContent(
619    state: AsyncState<T>,
620    onRetry: () -> Unit,
621    content: @Composable (T) -> Unit
622) {
623    when (state) {
624        is AsyncState.Loading -> {
625            Box(
626                modifier = Modifier.fillMaxSize(),
627                contentAlignment = Alignment.Center
628            ) {
629                CircularProgressIndicator()
630            }
631        }
632        is AsyncState.Success -> {
633            content(state.data)
634        }
635        is AsyncState.Error -> {
636            Column(
637                modifier = Modifier
638                    .fillMaxSize()
639                    .padding(32.dp),
640                horizontalAlignment = Alignment.CenterHorizontally,
641                verticalArrangement = Arrangement.Center
642            ) {
643                Icon(
644                    Icons.Default.Error,
645                    contentDescription = null,
646                    modifier = Modifier.size(64.dp),
647                    tint = MaterialTheme.colorScheme.error
648                )
649                Spacer(Modifier.height(16.dp))
650                Text(
651                    "Something went wrong",
652                    style = MaterialTheme.typography.titleMedium
653                )
654                Spacer(Modifier.height(8.dp))
655                Text(
656                    state.message,
657                    style = MaterialTheme.typography.bodyMedium,
658                    color = MaterialTheme.colorScheme.onSurfaceVariant,
659                    textAlign = TextAlign.Center
660                )
661                Spacer(Modifier.height(24.dp))
662                Button(onClick = onRetry) {
663                    Text("Try Again")
664                }
665            }
666        }
667    }
668}
669 
670sealed class AsyncState<out T> {
671    object Loading : AsyncState<Nothing>()
672    data class Success<T>(val data: T) : AsyncState<T>()
673    data class Error(val message: String) : AsyncState<Nothing>()
674}
675```
676 
677## Animations
678 
679### Animated Visibility
680 
681```kotlin
682@Composable
683fun ExpandableCard(
684    title: String,
685    content: String
686) {
687    var expanded by rememberSaveable { mutableStateOf(false) }
688 
689    Card(
690        modifier = Modifier.fillMaxWidth()
691    ) {
692        Column(
693            modifier = Modifier
694                .clickable { expanded = !expanded }
695                .padding(16.dp)
696        ) {
697            Row(
698                modifier = Modifier.fillMaxWidth(),
699                horizontalArrangement = Arrangement.SpaceBetween,
700                verticalAlignment = Alignment.CenterVertically
701            ) {
702                Text(title, style = MaterialTheme.typography.titleMedium)
703                Icon(
704                    if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
705                    contentDescription = if (expanded) "Collapse" else "Expand"
706                )
707            }
708 
709            AnimatedVisibility(
710                visible = expanded,
711                enter = expandVertically() + fadeIn(),
712                exit = shrinkVertically() + fadeOut()
713            ) {
714                Text(
715                    text = content,
716                    modifier = Modifier.padding(top = 12.dp),
717                    style = MaterialTheme.typography.bodyMedium,
718                    color = MaterialTheme.colorScheme.onSurfaceVariant
719                )
720            }
721        }
722    }
723}
724```
725 
726### Animated Content
727 
728```kotlin
729@Composable
730fun AnimatedCounter(count: Int) {
731    AnimatedContent(
732        targetState = count,
733        transitionSpec = {
734            if (targetState > initialState) {
735                slideInVertically { -it } + fadeIn() togetherWith
736                    slideOutVertically { it } + fadeOut()
737            } else {
738                slideInVertically { it } + fadeIn() togetherWith
739                    slideOutVertically { -it } + fadeOut()
740            }.using(SizeTransform(clip = false))
741        },
742        label = "counter"
743    ) { targetCount ->
744        Text(
745            text = "$targetCount",
746            style = MaterialTheme.typography.displayMedium
747        )
748    }
749}
750```
751 
752### Gesture-Based Animation
753 
754```kotlin
755@Composable
756fun SwipeableCard(
757    onSwipeLeft: () -> Unit,
758    onSwipeRight: () -> Unit,
759    content: @Composable () -> Unit
760) {
761    var offsetX by remember { mutableFloatStateOf(0f) }
762    val animatedOffset by animateFloatAsState(
763        targetValue = offsetX,
764        animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy),
765        label = "offset"
766    )
767 
768    Card(
769        modifier = Modifier
770            .fillMaxWidth()
771            .offset { IntOffset(animatedOffset.roundToInt(), 0) }
772            .pointerInput(Unit) {
773                detectHorizontalDragGestures(
774                    onDragEnd = {
775                        when {
776                            offsetX > 200f -> {
777                                onSwipeRight()
778                                offsetX = 0f
779                            }
780                            offsetX < -200f -> {
781                                onSwipeLeft()
782                                offsetX = 0f
783                            }
784                            else -> offsetX = 0f
785                        }
786                    },
787                    onHorizontalDrag = { _, dragAmount ->
788                        offsetX += dragAmount
789                    }
790                )
791            }
792    ) {
793        content()
794    }
795}
796```
797