Android Compose – Display List of Items

To display a List of items in Android Compose from a Kotlin List, we may use a Column composable. Inside Column we iterate over items of the list, and return a composable for each item.

The following code snippet shows how to achieve the above solution.

Column {
    myList.forEach { item ->
        ItemRow(item)
    }
}

Example

In this example, we display a list of students along with their credits.

  • To store the details of each student, we use the data class Student. And initialized the students list object with some dummy values.
  • Inside the composable StudentList, we have a Column in which we iterate over the students list using List.forEach{}. The Column is set to scroll vertically using modifier.
  • For each student, we return a StudentRow composable. Inside StudentRow we are using a Card to display the student details.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

</>
Copy
package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(color = MaterialTheme.colors.background) {
                    StudentList(students)
                }
            }
        }
    }
}

data class Student(val name: String, val credits: Int)
val students = listOf(
    Student("Student 1", 125),
    Student("Student 2", 75),
    Student("Student 3", 15),
    Student("Student 4", 87),
    Student("Student 5", 22),
    Student("Student 6", 96),
)

@Composable
fun StudentList(students: List<Student>) {
    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
        students.forEach { student ->
            StudentRow(student)
        }
    }
}

@Composable
fun StudentRow(student: Student) {
    Card(modifier = Modifier
        .padding(all = 10.dp)
        .fillMaxWidth()) {
        Column(modifier = Modifier.padding(all = 10.dp)) {
            Text(student.name, fontSize = 25.sp, fontWeight = FontWeight.W700, modifier = Modifier.padding(10.dp))
            Text(student.credits.toString(), color = Color.Gray, modifier = Modifier.padding(10.dp))
        }
    }
}

Screenshot

Android Compose - Display List of Items

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to display items from a Kotlin List as a list of items in Android UI.