Jetpack Compose Listview - How to create Listview in Jetpack Compose with LazyColumn widget

Last updated Aug 05, 2022

In this Jetpack compose example we will cover how to display list of items in compose project. Generally to display list of items in android we will use Listview/RecyclerView widgets. Listview/RecyclerView is a type of view which will display the data in Vertically scrollable. While working with Jetpack Compose project to display list of data we will use LazyColumn compose function.

Learn about how to display Horizontal Listview in Jetpack Compose
The vertically scrolling list that only composes and lays out the currently visible items.
 The [content] block defines a DSL which allows you to emit items of different types. For
 example you can use [LazyListScope.item] to add a single item and [LazyListScope.items] to add a list of items

 

Common Attributes of LazyColumn compose widget

  • modifier: Modifier -> Which will used for set custom style to the listview,
  • reverseLayout: Boolean display data in revers order or not,
  • verticalArrangement: Arrangement.Vertical which will used to set the items in vertical arrangement,
  • horizontalAlignment: Alignment.Horizontal  which will used to set the items in horizontal arrangement,
  • flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
  • items: which will use to set the layout for the child items

 

Let see how to create listview in Jetpack compose application. 

Step 1: To create new Jetpack project in Android studio please refer how to create new Project in Android studio using Jetpack compose

 

Step 2: In this compose example we are going to display list of Platforms with their Name and Icon. To save this data we will use a custom class called Platform.

Let create a data class called Platform

data  class Platform (val title:String, val icon:String)

 

Step 3: Let create List of platforms data

val platformList = ArrayList()
 platformList.add(  Platform(title = "Android", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
 platformList.add(  Platform(title = "Kotlin", icon = "https://pbs.twimg.com/profile_images/1399329694340747271/T5fbWxtN_400x400.png"))
 platformList.add(  Platform(title = "Java", icon = "https://upload.wikimedia.org/wikipedia/en/thumb/3/30/Java_programming_language_logo.svg/1200px-Java_programming_language_logo.svg.png"))
 platformList.add(  Platform(title = "Flutter", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
   

 

Step 4: Now Create List Item compose function which contains Text and Image compose widgets

In this we are show image from URL, refer How to show Image in Jetpack compose from url

Card(
    elevation = (5f.dp),
    modifier = Modifier
        .padding(8.dp)

) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(all = 8.dp), verticalAlignment = Alignment.CenterVertically) {
        val bitmap = remember { mutableStateOf(null) }
        val context = LocalContext.current
        Image(
            // on below line we are adding the image url
            // from which we will  be loading our image.
            painter = rememberAsyncImagePainter(item.icon),

            // on below line we are adding content
            // description for our image.
            contentDescription = "gfg image",


            // on below line we are adding modifier for our
            // image as wrap content for height and width.
            modifier = Modifier
                .height(100.dp)
                .width(100.dp)
                .wrapContentWidth()
        )
        Spacer(modifier = Modifier.width(50.dp))
        Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp))
    }
}

 

Step 5: Now create LazyColumn with list of Platforms data

setContent {
    ComposeListviewTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            lazyColumn(platforms =platformList )
        }
    }
}

 

Step 6: Let run application you can see the Listview which will display all platforms list in vertically

Compose Listview android kotlin

Complete example code for Compose Listview with LazyColumn compose widget

package com.example.composelistview

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
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.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import com.example.composelistview.ui.theme.ComposeListviewTheme

class MainActivity : ComponentActivity() {
    val platformList = ArrayList()
    @OptIn(ExperimentalUnitApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


        platformList.add(  Platform(title = "Android", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
        platformList.add(  Platform(title = "Kotlin", icon = "https://pbs.twimg.com/profile_images/1399329694340747271/T5fbWxtN_400x400.png"))
        platformList.add(  Platform(title = "Java", icon = "https://upload.wikimedia.org/wikipedia/en/thumb/3/30/Java_programming_language_logo.svg/1200px-Java_programming_language_logo.svg.png"))
        platformList.add(  Platform(title = "Flutter", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
        setContent {
            ComposeListviewTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    lazyColumn(platforms =platformList )
                }
            }
        }
    }

@ExperimentalUnitApi
@Composable
fun lazyColumn(platforms:ArrayList) {
    LazyColumn(){
        items(platforms, itemContent = {item ->
            Card(
                elevation = (5f.dp),
                modifier = Modifier
                    .padding(8.dp)

            ) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(all = 8.dp), verticalAlignment = Alignment.CenterVertically) {
                    val bitmap = remember { mutableStateOf(null) }
                    val context = LocalContext.current
                    Image(
                        // on below line we are adding the image url
                        // from which we will  be loading our image.
                        painter = rememberAsyncImagePainter(item.icon),

                        // on below line we are adding content
                        // description for our image.
                        contentDescription = "gfg image",


                        // on below line we are adding modifier for our
                        // image as wrap content for height and width.
                        modifier = Modifier
                            .height(100.dp)
                            .width(100.dp)
                            .wrapContentWidth()
                    )
                    Spacer(modifier = Modifier.width(50.dp))
                    Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp))
                }
            }
        })
    }
}
}

 

 

Conclusion: In this Jetpack compose example we covered how to create a Listview in Compose project with LazyColumn compose widget.

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

115 Views