ListHeader

Composable Component

A slot based composable for creating a list header item. ListHeaders are typically expected to be a few words of text on a single line. The contents will be start and end padded.

Android
@Composable
public fun ListHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.contentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit,
)

Parameters
modifier The modifier for the ListHeader.
backgroundColor The background color to apply - typically Color.Transparent
contentColor The color to apply to content.
contentPadding The spacing values to apply internally between the background and the content.
transformation Transformation to be used when header appears inside the container that needs to dynamically change its content separately from the background.
content Slot for ListHeader content, expected to be a single line of text.

Code Examples

ListHeaderSample

@Preview
@Composable
fun ListHeaderSample() {
    val scrollState = rememberScalingLazyListState()
    ScreenScaffold(scrollState = scrollState, modifier = Modifier.background(Color.Black)) {
        contentPadding ->
        ScalingLazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            contentPadding = contentPadding,
        ) {
            item { ListHeader { Text("Settings") } }
            item {
                ListSubHeader(
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_connectivity),
                            contentDescription = "Connectivity",
                        )
                    },
                    label = { Text("Connectivity") },
                )
            }
            item {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_bluetooth),
                            contentDescription = "Bluetooth",
                            modifier = Modifier.size(ButtonDefaults.IconSize),
                        )
                    },
                ) {
                    Text("Bluetooth")
                }
            }
            item {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_wifi),
                            contentDescription = "Wifi",
                            modifier = Modifier.size(ButtonDefaults.IconSize),
                        )
                    },
                ) {
                    Text("Wifi")
                }
            }
            item { ListSubHeader { Text("Display") } }
            item {
                Button(modifier = Modifier.fillMaxWidth(), onClick = {}) {
                    Text("Change Watchface")
                }
            }
            item { Button(modifier = Modifier.fillMaxWidth(), onClick = {}) { Text("Brightness") } }
        }
    }
}