Profile Settings

A profile screen with an avatar header and grouped account and general settings rows over a bottom nav.

9:41

Profile

Marie T Wiedman

marie@gmail.con

Account Setting

Personal Information

Change Password

Delivery Address

General settings

Synced Calendars

App Settings

Activity

Invite Others

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 ProfileSettingsScreen(
    name: String,
    email: String,
    account: List<Pair<ImageVector, String>>,
    general: List<Pair<ImageVector, String>>,
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Profile", fontWeight = FontWeight.Bold) },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
                    }
                },
                actions = { IconButton(onClick = {}) { Icon(Icons.Filled.Edit, "Edit") } },
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(false, {}, { Icon(Icons.Filled.Home, null) })
                NavigationBarItem(false, {}, { Icon(Icons.Filled.CalendarToday, null) })
                NavigationBarItem(false, {}, { Icon(Icons.AutoMirrored.Filled.List, null) })
                NavigationBarItem(true, {}, { Icon(Icons.Filled.Person, null) })
            }
        },
    ) { padding ->
        Column(
            Modifier.fillMaxSize().padding(padding)
                .verticalScroll(rememberScrollState()).padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Surface(shape = CircleShape, color = MaterialTheme.colorScheme.primaryContainer,
                modifier = Modifier.size(64.dp)) {}
            Text(name, Modifier.padding(top = 8.dp),
                style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
            Text(email, color = MaterialTheme.colorScheme.onSurfaceVariant,
                style = MaterialTheme.typography.labelSmall)
            Text("Account Setting", Modifier.fillMaxWidth().padding(top = 16.dp),
                style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
            account.forEach { (icon, label) ->
                ListItem(
                    leadingContent = { Icon(icon, null) },
                    headlineContent = { Text(label) },
                )
                HorizontalDivider()
            }
            Text("General settings", Modifier.fillMaxWidth().padding(top = 16.dp),
                style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
            general.forEach { (icon, label) ->
                ListItem(
                    leadingContent = { Icon(icon, null) },
                    headlineContent = { Text(label) },
                )
                HorizontalDivider()
            }
        }
    }
}