Android compose list examples

Android compose simple list displaying a list of text items using Column and repeat.

@Composable
fun SimpleList() {
    // We save the scrolling position with this state
    val scrollState = rememberScrollState()

    Column(Modifier.verticalScroll(scrollState)) {
        repeat(100) {
            Text("Item #$it", style = MaterialTheme.typography.subtitle1)
        }
    }
}

@Preview
@Composable
fun SimpleListPreview() {
    SimpleList()
}

Android compose simple list displaying a list of text items using LazyColumn and items.

@Composable
fun LazyList() {
    // We save the scrolling position with this state
    val scrollState = rememberLazyListState()

    LazyColumn(state = scrollState) {
        items(100) {
            Text("Item #$it", style = MaterialTheme.typography.subtitle1)
        }
    }
}

@Preview
@Composable
fun LazyListPreview() {
    LazyList()
}

Android compose displaying a list of remote images and texts using image library coil.

// build.gradle
implementation 'io.coil-kt:coil-compose:1.4.0'

@OptIn(ExperimentalCoilApi::class)
@Composable
fun ImageListItem(index: Int) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = rememberImagePainter(
                data = "https://developer.android.com/images/brand/Android_Robot.png"
            ),
            contentDescription = "Android Logo",
            modifier = Modifier.size(50.dp)
        )
        Spacer(Modifier.width(10.dp))
        Text("Item #$index", style = MaterialTheme.typography.subtitle1)
    }
}

@Preview
@Composable
fun ImageListItemPreview() {
    ImageListItem(1)
}

@Composable
fun ImageList() {
    // We save the scrolling position with this state
    val scrollState = rememberLazyListState()

    LazyColumn(state = scrollState) {
        items(100) {
            ImageListItem(it)
        }
    }
}

@Preview
@Composable
fun ImageListPreview() {
    ImageList()
}

Reference:
https://github.com/googlecodelabs/android-compose-codelabs