This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate.
Ui tiles
| Component | Screenshot |
|---|---|
| SettingsMenuLink |  |
| SettingsCheckbox |  |
| SettingsTriStateCheckbox |  |
| SettingsRadioButton |  |
| SettingsSwitch |  |
| SettingsGroup |  |
Ui tiles expanded
| Component | Screenshot |
|---|---|
| SettingsSlider |  |
Ui tiles expressive
| Component | Screenshot |
|---|---|
| SettingsButtonGroup |  |
##// groovy
implementation 'com.github.alorma.compose-settings:ui-tiles:$version'
implementation 'com.github.alorma.compose-settings:ui-tiles-extended:$version'
implementation 'com.github.alorma.compose-settings:ui-tiles-expressive:$version'
[...]
// kotlin DSL
implementation("com.github.alorma.compose-settings:ui-tiles:$version")
implementation("com.github.alorma.compose-settings:ui-tiles-extended:$version")
implementation("com.github.alorma.compose-settings:ui-tiles-expressive:$version")
[...]
// Catalog versions:
[versions]
compose-settings = "{{libVersion}}"
[libraries]
composeSettings-ui = { group = "com.github.alorma.compose-settings", name = "ui-tiles", version.ref = "compose-settings" }
composeSettings-ui-extended = { group = "com.github.alorma.compose-settings", name = "ui-tiles-extended", version.ref = "compose-settings" }
composeSettings-ui-expressive = { group = "com.github.alorma.compose-settings", name = "ui-tiles-expressive", version.ref = "compose-settings" }
All settings components support customization through common parameters:
Customize the shape of any settings component using the shape parameter:
SettingsSwitch(
state = switchState,
title = { Text("Rounded corners") },
shape = RoundedCornerShape(16.dp), // Custom shape
onCheckedChange = { switchState = it },
)Available shapes include:
RoundedCornerShape(size)- Rounded cornersCutCornerShape(size)- Cut cornersCircleShape- Fully circular- Custom shapes implementing the
Shapeinterface
Customize title and subtitle text styles using the textStyles parameter:
SettingsCheckbox(
state = checkboxState,
title = { Text("Custom styled title") },
subtitle = { Text("Custom styled subtitle") },
textStyles = SettingsTileDefaults.textStyles(
titleStyle = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.Bold),
subtitleStyle = MaterialTheme.typography.bodyLarge,
),
onCheckedChange = { checkboxState = it },
)This allows you to:
- Change font sizes, weights, and families
- Adjust letter spacing and line height
- Apply custom colors and decorations
- Match your app's typography system
SettingsMenuLink(
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
action = { IconButton() },
onClick = { ... },
)
SettingsCheckbox(
state = false / true,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onCheckedChange = { newState: Boolean -> },
)
SettingsTriStateCheckbox(
state = false / true / null,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onCheckedChange = { newState: Boolean -> },
)
SettingsRadioButton(
state = false / true,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onClick = { },
)
SettingsSwitch(
state = false / true,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onCheckedChange = { newState: Boolean -> },
)
SettingsSlider(
value = x.xf,
valueRange = X.f..Y.f,
steps = X,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onValueChange = { newValue: Float -> },
)
Updates on
enabledwill be reflected on it's internal components unless you change theirenabledstate manually.
SettingsGroup(
modifier = Modifier,
enabled = false / true,
title = { Text(text = "SettingsGroup") },
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), // Spacing between items (default: 8.dp)
) {
SettingsMenuLink(...)
SettingsCheckbox(...)
SettingsSwitch(...)
...
}Spacing customization:
Control the spacing between items in the group using the verticalArrangement parameter:
// Compact spacing
SettingsGroup(
verticalArrangement = Arrangement.spacedBy(4.dp),
) { ... }
// No spacing (tightly packed items)
SettingsGroup(
verticalArrangement = Arrangement.Top,
) { ... }
// Large spacing
SettingsGroup(
verticalArrangement = Arrangement.spacedBy(16.dp),
) { ... }
Requires Material 3 Expressive components (uses
OutlinedToggleButtonfrom Material 3 Expressive API).
SettingsButtonGroup(
title = { Text(text = "Setting title") },
items = listOf(1, 2, 3),
selectedItem = 2,
itemTitleMap = { item -> "#$item" },
onItemSelected = { selectedItem -> },
modifier = Modifier,
enabled = false / true,
subtitle = { Text(text = "Setting subtitle") },
icon = { Icon(...) },
)
