Jetpack Compose Horizontal Listview with LazyRow Component

Published August 18, 2022

In this Jetpack compose we will cover how to create Horizontal Listview with Jetpack compose. To display list of items, compose library provided two widgets LazyColumn and LazyRow. LazyColumn will use to display list of items in Vertical scroll direction. Learn about how to display Vertical Listview in Jetpack Compose. where as, to display Horizontal Listview we will use LazyRow compose function.

Here are the common Attributes of LazyRow compose function

  • modifier - Apply modifier to current layout
  • state - The State object used to control the list's state
  • reverseLayout - This is a boolean value which will used to display items in reverse order. If it true will display in reverse order.
  • horizontalArrangement - Set alignment of items on horizontal direction
  • verticalAlignment - Set alignment of items on vertical direction
  • userScrollEnabled - Scroll option to allow for user
  • content - This property will be used to set content to display list of items

 

Lets get started to Create Horizontal Listview with Compose

Step 1: Create Compose application using Android studio. To create new Jetpack project in Android studio please refer how to create first Project in Android studio using Jetpack compose

 

Step 2: Add Image Loading dependencies
In this example we are showing List of Programming languages which contains Title and Image, we are loading images from internet, To load images we are using methods rememberAsyncImagePainter() painter which will be implemented from coil image loading library. 
Let add coil dependency in build.gradle file

implementation("io.coil-kt:coil-compose:2.2.0")

 

Step 3: Add Internet Permission in Manifest file

<uses-permission android:name="android.permission.INTERNET"/>

 

Step 4: Create Data class which will holds the data (Title and Image)

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

 

Step 5: Let create List of platforms data

val platformList = ArrayList<Platform>()
 
  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 = "Flutter2", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
        platformList.add(  Platform(title = "Android3", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
        platformList.add(  Platform(title = "Kotlin4", icon = "https://pbs.twimg.com/profile_images/1399329694340747271/T5fbWxtN_400x400.png"))
        platformList.add(  Platform(title = "Java5", 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 = "Flutter6", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))

 

Step 6:  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

 

Step 7: Let design Items which will display the Title and Image. In this we are show image from URL, refer How to show Image in Jetpack compose from url

Card(elevation = 8.dp, modifier = Modifier.padding(8.dp)) {
                        Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
                            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(140.dp)
                                    .width(140.dp)
                                    .wrapContentWidth()
                            )
                            Spacer(modifier = Modifier.height(10.dp))
                            Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp), textAlign = TextAlign.Center,)
                            Spacer(modifier = Modifier.height(10.dp))
                        }
                }

 

Step 8: Add List data to LazyRow() compose function

LazyRow(modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp), reverseLayout = revers){

                items(platforms, itemContent = { item -> Card(elevation = 8.dp, modifier = Modifier.padding(8.dp)) {
                        Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
                            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(140.dp)
                                    .width(140.dp)
                                    .wrapContentWidth()
                            )
                            Spacer(modifier = Modifier.height(10.dp))
                            Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp), textAlign = TextAlign.Center,)
                            Spacer(modifier = Modifier.height(10.dp))
                        }
                }  })
        }

 

Compose Horizontal Listview

 

Step 9: To Display Horizontal Listview in reverse order we will set the reverseLayout property value to true. this will display the items in reverse order.

 

Step 10: Let run application you will see the below output on the device/emulator

Compose Horizontal Listview reverse order

 


Complete code for Horizontal Listview with compose application

package com.example.compose_horizontal_listview

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.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import coil.compose.rememberAsyncImagePainter
import com.example.compose_horizontal_listview.ui.theme.Compose_Horizontal_listviewTheme

class MainActivity : ComponentActivity() {
    val platformList = ArrayList<Platform>()
    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 = "Flutter2", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
        platformList.add(  Platform(title = "Android3", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))
        platformList.add(  Platform(title = "Kotlin4", icon = "https://pbs.twimg.com/profile_images/1399329694340747271/T5fbWxtN_400x400.png"))
        platformList.add(  Platform(title = "Java5", 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 = "Flutter6", icon = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/300px-Android_robot_head.svg.png"))

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

                ) {
                    Scaffold(topBar = {TopAppBar(title = {Text("Compose Listview",color = Color.White)},backgroundColor = MaterialTheme.colors.secondary)  }) {

                        Column (
                            Modifier
                                .fillMaxWidth()
                                .padding(start = 16.dp)){
                            Text(text = "Horizontal Listview", fontSize = 20.sp,color = Color.Gray)
                            lazyRow(platformList, false)
                            Divider(Modifier.height(1.dp), color = Color.Gray)
                            Spacer(modifier = Modifier.height(10.dp))
                            Text(text = "Reverse Order Horizontal Listview",fontSize = 20.sp, color = Color.Gray)
                            lazyRow(platformList, true)
                        }
                    }

                }
            }
        }
    }
}

    @OptIn(ExperimentalUnitApi::class)
    @Composable
    fun lazyRow(platforms:ArrayList<Platform>,revers:Boolean) {


        LazyRow(modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp), reverseLayout = revers){

                items(platforms, itemContent = { item -> Card(elevation = 8.dp, modifier = Modifier.padding(8.dp)) {
                        Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
                            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(140.dp)
                                    .width(140.dp)
                                    .wrapContentWidth()
                            )
                            Spacer(modifier = Modifier.height(10.dp))
                            Text(text = item.title, fontSize= TextUnit(value = 20f, type = TextUnitType.Sp), textAlign = TextAlign.Center,)
                            Spacer(modifier = Modifier.height(10.dp))
                        }
                }  })
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        Compose_Horizontal_listviewTheme {

        }
    }

 

Conclusion: In this Compose example we covered how to create Horizontal Listview with LazyRow compose and how to display list data in reverse order.

 

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

486 Views
Projects By category
Categories