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))
}
} })
}
|
 |
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
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.