App Settings

A grouped settings screen with a profile row, preference toggles, and a red destructive account action.

Settings

🧑‍💻

Alfred Daniel

Product/UI Designer

Other settings

Profile details

Password

Notifications

Dark mode

About application

Help/FAQ

Deactivate my account

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppSettingsScreen(
    darkModeOn: Boolean,
    onDarkModeChange: (Boolean) -> Unit,
    onNavigate: (String) -> Unit,
    onDeactivate: () -> Unit,
    onBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        "Settings",
                        fontWeight = FontWeight.Bold,
                    )
                },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(
                            Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Back",
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.background,
                ),
            )
        },
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.4f))
                .verticalScroll(rememberScrollState())
                .padding(horizontal = 16.dp, vertical = 8.dp),
        ) {
            // Profile card
            ElevatedCard(
                onClick = { onNavigate("profile") },
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(16.dp),
            ) {
                ListItem(
                    leadingContent = {
                        Surface(
                            shape = CircleShape,
                            color = MaterialTheme.colorScheme.primaryContainer,
                            modifier = Modifier.size(44.dp),
                        ) {
                            Box(contentAlignment = Alignment.Center) {
                                Text("AD", fontWeight = FontWeight.Bold)
                            }
                        }
                    },
                    headlineContent = {
                        Text("Alfred Daniel", fontWeight = FontWeight.Bold)
                    },
                    supportingContent = {
                        Text("Product/UI Designer")
                    },
                    trailingContent = {
                        Icon(Icons.Filled.ChevronRight, contentDescription = null)
                    },
                )
            }

            Spacer(Modifier.height(20.dp))
            Text(
                "Other settings",
                modifier = Modifier.padding(start = 4.dp, bottom = 8.dp),
                style = MaterialTheme.typography.labelMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
            )

            // Main settings group
            ElevatedCard(
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(16.dp),
            ) {
                Column {
                    listOf("Profile details", "Password", "Notifications").forEach { label ->
                        ListItem(
                            headlineContent = { Text(label) },
                            trailingContent = {
                                Icon(Icons.Filled.ChevronRight, contentDescription = null)
                            },
                            modifier = Modifier.clickable { onNavigate(label) },
                        )
                        HorizontalDivider(Modifier.padding(horizontal = 16.dp))
                    }
                    ListItem(
                        headlineContent = { Text("Dark mode") },
                        trailingContent = {
                            Switch(
                                checked = darkModeOn,
                                onCheckedChange = onDarkModeChange,
                            )
                        },
                    )
                }
            }

            Spacer(Modifier.height(12.dp))

            // Info / destructive group
            ElevatedCard(
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(16.dp),
            ) {
                Column {
                    listOf("About application", "Help/FAQ").forEach { label ->
                        ListItem(
                            headlineContent = { Text(label) },
                            trailingContent = {
                                Icon(Icons.Filled.ChevronRight, contentDescription = null)
                            },
                            modifier = Modifier.clickable { onNavigate(label) },
                        )
                        HorizontalDivider(Modifier.padding(horizontal = 16.dp))
                    }
                    ListItem(
                        headlineContent = {
                            Text(
                                "Deactivate my account",
                                color = Color(0xFFDC2626),
                                fontWeight = FontWeight.Medium,
                            )
                        },
                        trailingContent = {
                            Icon(
                                Icons.Filled.ChevronRight,
                                contentDescription = null,
                                tint = Color(0xFFDC2626).copy(alpha = 0.7f),
                            )
                        },
                        modifier = Modifier.clickable { onDeactivate() },
                    )
                }
            }
        }
    }
}