Compose Recyclerview - How to set Adapter to recyclerview

Last updated Aug 08, 2021

In this Jetpack compose tutorial we will learn to set Adapter to recyclerview in Android application with Jetpack Compose.

RecyclerView will be used to load and display large sets of data. We just supply the data and it will make how each item looks, and the RecyclerView library dynamically creates the elements when they're needed.But to display vertical scrolling lists in the RecycleView, we have to write a lot of code such as declare a layout file to show RecyclerView,create an adapter class, create a layout file to show adapter item,activity or fragment class.But with new ui approach i.e Jetpack Compose, it takes a single function to display a list. When it comes to Compose, the main advantage is concise code with less manual work. A simple approach to a common to display a list of items is LazyColumn

A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It’s similar to a Recyclerview in the classic Android View system...

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: Create a data class User

data class User(val id: String = "", val name: String = "", val emailId: String = "")

Step 4: Add lazyColumnDemo composable function to display list of users

@Composable
fun LazyColumnDemo() {

    val users = listOf(
        User(id = "1", name = "Ankit Singh", emailId = "abc@gmail.com"),
        User(id = "2", name = "Rishabh Shaw", emailId = "xyz@gmail.com"),
        User(id = "3", name = "Neha Shaw", emailId = "abc@gmail.com"),
        User(id = "4", name = "Ekta Gupta", emailId = "xyz@gmail.com"),
        User(id = "5", name = "Rahul Jaiswal", emailId = "abc@gmail.com"),
        User(id = "6", name = "Anindita Chatterjee", emailId = "xyz@gmail.com"),
        User(id = "7", name = "Aakash Raj", emailId = "abc@gmail.com"),
        User(id = "8", name = "Arpita Ghosh", emailId = "xyz@gmail.com"),
        User(id = "9", name = "Arvind Patel", emailId = "abc@gmail.com"),
        User(id = "10", name = "Akash Tiwari", emailId = "xyz@gmail.com")
    )
    LazyColumn() {
        items(
            items = users,
            itemContent = {
                UserListItem(user = it)
            })
    }
}

@Composable
fun UserListItem(user: User) {
    Card(
        modifier = Modifier
            .fillMaxWidth(),
        elevation = 4.dp
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = user.name,
                style = TextStyle(
                    color = Color.Blue,
                    fontSize = 21.sp,
                    fontWeight = FontWeight.Bold
                )
            )
            Text(text = user.emailId, modifier = Modifier.padding(top = 8.dp))
        }
    }
}

contentPadding

Used to add the padding to the list.

LazyColumn(contentPadding = PaddingValues(horizontal = 16.dp)) {
    items(
        items = users,
        itemContent = {
            UserListItem(user = it)
        })
}

Compose recyclerview Example

reverseLayout

Reverse the direction of scrolling when true.

Full code

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetpack.datamodels.User
import com.example.jetpack.ui.theme.JetPackTheme
import com.example.jetpack.widget.CheckBoxDemo

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    LazyColumnDemo()
                }
            }
        }
    }
}

@Composable
fun LazyColumnDemo() {

    val users = listOf(
        User(id = "1", name = "Ankit Singh", emailId = "abc@gmail.com"),
        User(id = "2", name = "Rishabh Shaw", emailId = "xyz@gmail.com"),
        User(id = "3", name = "Neha Shaw", emailId = "abc@gmail.com"),
        User(id = "4", name = "Ekta Gupta", emailId = "xyz@gmail.com"),
        User(id = "5", name = "Rahul Jaiswal", emailId = "abc@gmail.com"),
        User(id = "6", name = "Anindita Chatterjee", emailId = "xyz@gmail.com"),
        User(id = "7", name = "Aakash Raj", emailId = "abc@gmail.com"),
        User(id = "8", name = "Arpita Ghosh", emailId = "xyz@gmail.com"),
        User(id = "9", name = "Arvind Patel", emailId = "abc@gmail.com"),
        User(id = "10", name = "Akash Tiwari", emailId = "xyz@gmail.com")
    )
    LazyColumn(contentPadding = PaddingValues(horizontal = 16.dp)) {
        items(
            items = users,
            itemContent = {
                UserListItem(user = it)
            })
    }
}

@Composable
fun UserListItem(user: User) {
    Card(
        modifier = Modifier.padding(top = 16.dp)
            .fillMaxWidth(),
        elevation = 4.dp
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = user.name,
                style = TextStyle(
                    color = Color.Blue,
                    fontSize = 21.sp,
                    fontWeight = FontWeight.Bold
                )
            )
            Text(text = user.emailId, modifier = Modifier.padding(top = 8.dp))
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetPackTheme {
        LazyColumnDemo()
    }
}

Article Contributed By :

1071 Views

Projects By category