Recycler View in Jetpack Compose

Govind Singh

7 December 2023

In this blog, we are going to learn about “How to create a Recycler view in jetpack compose”. Jetpack compose is a modern tool kit building native UIs for Android using Kotlin. Directly in jetpack compose does not support recycler view like the android app. but we can achieve this create lazy rows and columns. so now we are starting to create a recycler view in jetpack compose.

Create Data Class

First of all, we are creating a Data class with the all field for using the employee’s details.

data class EmployDetails(val id: Int,
                         val title: String,
                         val sex: String,
                         val age: Int,
                         val description: String,
                         val ImageId: Int = 0)

data class EmployDetails(val id: Int,

val title: String,

val sex: String,

val age: Int,

val description: String,

val ImageId: Int = 0)

Create Model Class

After create data class we are creating a new Details class. Write an object declaration and create a list with information about each employees to showing the recyclerview.

object Details {

    val EmployDetailsList = listOf(
        EmployDetails(
            id = 1,
            title = "Rohan",
            sex = "Male",
            age = 24,
            description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",
            ImageId = R.drawable.rohan
        ),
        EmployDetails(
            id = 2,
            title = "Roy",
            sex = "male",
            age = 25,
            description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",
            ImageId = R.drawable.roy
        ),
        EmployDetails(
            id = 3,
            title = "Vishal",
            sex = "Male",
            age = 29,
            description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",
            ImageId = R.drawable.vishal
        ),
        EmployDetails(
            id = 4,
            title = "Nikhil",
            sex = "Male",
            age = 27,
            description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",
            ImageId = R.drawable.nikhil
        ),
}

object Details {

val EmployDetailsList = listOf(

EmployDetails(

id = 1,

title = "Rohan",

sex = "Male",

age = 24,

description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",

ImageId = R.drawable.rohan

EmployDetails(

id = 2,

title = "Roy",

sex = "male",

age = 25,

description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",

ImageId = R.drawable.roy

EmployDetails(

id = 3,

title = "Vishal",

sex = "Male",

age = 29,

description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",

ImageId = R.drawable.vishal

EmployDetails(

id = 4,

title = "Nikhil",

sex = "Male",

age = 27,

description = " Don't judge each day by the harvest you reap but by the seeds that you plant.” - ...",

ImageId = R.drawable.nikhil

}

Design Card

We are showing employees details so now we are create a composble function “EmployeeCard”. In this function we are create a cardview wirth all employees details like- name,age,photo and description.

@Composable
fun EmployeeCard(emp: EmployDetails) {
    Card(
        modifier = Modifier
            .padding(horizontal = 8.dp, vertical = 8.dp)
            .fillMaxWidth(),
        elevation = 2.dp,
        backgroundColor = Color.LightGray,
        shape = RoundedCornerShape(corner = CornerSize(16.dp))

    ) {

        Row(modifier = Modifier.padding(20.dp)) {
            Column(modifier = Modifier.weight(1f),
            Arrangement.Center) {
                Text(
                    text = emp.title,
                    style = TextStyle(
                        color = Color.Black,
                        fontSize = 22.sp,
                        fontWeight = FontWeight.Bold,
                    )
                )
                Text(
                    text = "Age :- "+emp.age.toString(),
                    style = TextStyle(
                        color = Color.Black,
                        fontSize = 15.sp
                    )
                )
                Text(
                    text = "Sex :- "+emp.sex,
                    style = TextStyle(
                        color = Color.Black,
                        fontSize = 15.sp
                    )
                )

                Text(
                    text = "Description :- "+emp.description,
                    style = TextStyle(
                        color = Color.Black,
                        fontSize = 15.sp
                    )
                )
            }
            Image(painter = painterResource(emp.ImageId), contentDescription = "Profile Image",
                contentScale = ContentScale.FillHeight,
                modifier = Modifier
                    .padding(8.dp)
                    .size(110.dp)
                    .clip((CircleShape)  ))
        }
    }
}

@Composable

fun EmployeeCard(emp: EmployDetails) {

Card(

modifier = Modifier

.padding(horizontal = 8.dp, vertical = 8.dp)

.fillMaxWidth(),

elevation = 2.dp,

backgroundColor = Color.LightGray,

shape = RoundedCornerShape(corner = CornerSize(16.dp))

) {

Row(modifier = Modifier.padding(20.dp)) {

Column(modifier = Modifier.weight(1f),

Arrangement.Center) {

Text(

text = emp.title,

style = TextStyle(

color = Color.Black,

fontSize = 22.sp,

fontWeight = FontWeight.Bold,

)

Text(

text = "Age :- "+emp.age.toString(),

style = TextStyle(

color = Color.Black,

fontSize = 15.sp

)

Text(

text = "Sex :- "+emp.sex,

style = TextStyle(

color = Color.Black,

fontSize = 15.sp

)

Text(

text = "Description :- "+emp.description,

style = TextStyle(

color = Color.Black,

fontSize = 15.sp

)

}

Image(painter = painterResource(emp.ImageId), contentDescription = "Profile Image",

contentScale = ContentScale.FillHeight,

modifier = Modifier

.padding(8.dp)

.size(110.dp)

.clip((CircleShape) ))

}

In this view we have created a cardview with the some text field and circuler imageview show the employee profile picture in the recycler view.

Display Employee Card

Now we are creating a composble function to display the employee card. In this function we have created a “Lazy column” .If you need to display a large number of items (or a list of an unknown length), using a layout such as Column can cause performance issues, since all the items will be composed and laid out whether or not they are visible.

@Composable
fun DetailsContent() {

    val employees = remember { Details.EmployDetailsList }
    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
    ) {
        items(
            employees
        ) {
            EmployeeCard(emp = it)
        }
    }
}

@Composable

fun DetailsContent() {

val employees = remember { Details.EmployDetailsList }

LazyColumn(

contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)

) {

items(

employees

) {

EmployeeCard(emp = it)

}

We have created a “DetailsContent()” composble function to display the list. There is also a variant of the items() extension function called itemsIndexed(), which provides the index. so in this function item length is the “employees” list length.

Preview

In this preview shows a list of employee details in recyclerview, not very nice looking. But there are easy steps to style employee cards and show them in recyclerview.

Conclusion

In this blog, we have learned about the ‘Recycler view’ in jetpack compose. we have learned how to implementation of the Lazy column and act on Android. this is the easy way to create a recycler view in jetpack compose.

For more information regarding the compose gesture in the android visit the link.

Thanks for reading this blog. You can also check other blogs from here.

Always be ready for learning 🙂