Jetpack Compose - List View & Divider

Jetpack Compose Lazy Column with Divider in Android

A divider is a thin line that groups content in lists and layouts.

This example demonstrates how to make a Jetpack Compose RecyclerView (LazyColumn) with Material Design Divider.


LazyColumn {
                items(25) {

                    // * Card
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            ,
                        content = {
                            Text("Card ", modifier = Modifier.padding(16.dp),style = MaterialTheme.typography.labelLarge)
                        }
                    )

                    // * List Dividers
                    ListDivider()

                    // * List Divider Padding
                    // ListDividerPadding()

                }
            }


@Composable
fun ListDivider() {
    Divider(
        modifier = Modifier.padding(horizontal = 14.dp),
        color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f)
    )
}


@Composable
fun ListDividerPadding() {
    Divider(
        modifier = Modifier.padding(20.dp),
        color = MaterialTheme.colors.primary.copy(alpha = 0.09f)
    )
}

..

Comments