LazyRow and LazyColumn In Jetpack Compose

Introduction

Hi friends !! Are you new to jetpack compose and want to learn how to display large data in a list representation? This article is surely good for you. If you are an Android developer, so LazyColumn is exactly the same as Recycler View in Android but using Jetpack compose. We don't need to create an adapter class, item layout, and other efforts, like an Android. In jetpack compose simply, we have to write 5 to 10 lines of code, and we can represent our data on UI.

Jetpack Compose

Prerequisite

Having the latest version of Android Studio
Having a basic knowledge of components such as Text, Image, etc.

Let's Start With Android Studio

Create a new project, select the empty compose activity, and change the application name, project location, and minimum SDK as per your requirement.

New project Android studio

What is LazyColumn?

LazyColumn is one of the core components in Jetpack Compose that allows you to create a vertically scrolling list of items efficiently, especially when dealing with a large dataset. It's similar to the traditional RecyclerView in Android but with a more concise and composable syntax.

Example

@Composable
fun LazyColumnExample() {

    // Person list
    val dataList = listOf("Abhishek", "Harshit", "Gaurav", "Avin", "Avish", "Tanu","Manu","Swarnim","Surbhi","Swati","Shruti","Pranav",)

    LazyColumn {
        items(dataList) { item ->
            // This lambda will be called for each item in the dataList
            // and create a composable UI element for that item.
            ListItem(text = item)
        }
    }
}

@Composable
fun ListItem(text: String) {
    // A composable representing a single item in the list
    // Customize it to display the data as per your requirement.
    // For simplicity, we'll just display the text here.
    Text(
        text,
        fontSize = 30.sp,
        fontWeight = FontWeight.SemiBold,
        fontStyle = FontStyle.Normal,
        modifier = Modifier.padding(vertical = 20.dp, horizontal = 30.dp)
    )
}

Explanation

In this example, we create a LazyColumn with a list of items (dataList). The items function inside the LazyColumn is used to create a composable UI element for each item in the list. It takes two parameters: the list of data and a lambda that defines how to display each item in the list. LazyColumn helps optimize performance when dealing with large datasets.

Output

What is LazyRow?

LazyRow is another core component that allows you to create a horizontally scrolling list of items efficiently. It's similar to LazyColumn but arranges items horizontally instead of vertically. The LazyRow component is useful when you want to create a horizontally scrolling list of items, such as a carousel of images, a horizontal list of products, or any other scenario where horizontal scrolling is needed.

Example

@Composable
fun LazyRowExample() {
    // Person list
    val dataList = listOf("Abhishek", "Harshit", "Gaurav", "Avin", "Avish", "Tanu","Manu","Swarnim","Surbhi","Swati","Shruti","Pranav",)

    LazyRow {
        items(dataList) { item ->
            // This lambda will be called for each item in the dataList
            // and create a composable UI element for that item.
            HorizontalListItem(text = item)
        }
    }
}

@Composable
fun HorizontalListItem(text: String) {
    // A composable representing a single item in the horizontal list
    // Customize it to display the data as per your requirement.
    // For simplicity, we'll just display the text here.
    Text(
        text,
        fontSize = 30.sp,
        fontWeight = FontWeight.SemiBold,
        fontStyle = FontStyle.Normal,
        modifier = Modifier.padding(vertical = 20.dp, horizontal = 30.dp)
    )
}

Explanation

In this example, we use LazyRow to create a horizontal scrolling list. Similar to LazyColumn, the items function is used to create a composable UI element for each item in the list.

Output

Full Code Snippet

package com.example.lazycolumandrowexample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontStyle
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.lazycolumandrowexample.ui.theme.LazyColumAndRowExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazyColumAndRowExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LazyRowExample()
                }
            }
        }
    }
}

@Composable
fun LazyColumnExample() {

    // Person list
    val dataList = listOf("Abhishek", "Harshit", "Gaurav", "Avin", "Avish", "Tanu","Manu","Swarnim","Surbhi","Swati","Shruti","Pranav",)

    LazyColumn {
        items(dataList) { item ->
            // This lambda will be called for each item in the dataList
            // and create a composable UI element for that item.
            ListItem(text = item)
        }
    }
}

@Composable
fun ListItem(text: String) {
    // A composable representing a single item in the list
    // Customize it to display the data as per your requirement.
    // For simplicity, we'll just display the text here.
    Text(
        text,
        fontSize = 30.sp,
        fontWeight = FontWeight.SemiBold,
        fontStyle = FontStyle.Normal,
        modifier = Modifier.padding(vertical = 20.dp, horizontal = 30.dp)
    )
}

@Composable
fun LazyRowExample() {
    // Person list
    val dataList = listOf("Abhishek", "Harshit", "Gaurav", "Avin", "Avish", "Tanu","Manu","Swarnim","Surbhi","Swati","Shruti","Pranav",)

    LazyRow {
        items(dataList) { item ->
            // This lambda will be called for each item in the dataList
            // and create a composable UI element for that item.
            HorizontalListItem(text = item)
        }
    }
}

@Composable
fun HorizontalListItem(text: String) {
    // A composable representing a single item in the horizontal list
    // Customize it to display the data as per your requirement.
    // For simplicity, we'll just display the text here.
    Text(
        text,
        fontSize = 30.sp,
        fontWeight = FontWeight.SemiBold,
        fontStyle = FontStyle.Normal,
        modifier = Modifier.padding(vertical = 20.dp, horizontal = 30.dp)
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    LazyColumAndRowExampleTheme {
       LazyColumnExample()
    }
}

Conclusion

In this article, we have seen how to use LazyRow and LazyColumn in Android. Thanks for reading, and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!