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 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 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>() 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)) { // on below line we are adding content Step 8: Add List data to LazyRow() compose function LazyRow(modifier = Modifier items(platforms, itemContent = { item -> Card(elevation = 8.dp, modifier = Modifier.padding(8.dp)) { // on below line we are adding content 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 package com.example.compose_horizontal_listview import android.os.Bundle class MainActivity : ComponentActivity() { setContent { ) { Column ( } @OptIn(ExperimentalUnitApi::class) items(platforms, itemContent = { item -> Card(elevation = 8.dp, modifier = Modifier.padding(8.dp)) { // on below line we are adding content @Preview(showBackground = true) } Conclusion: In this Compose example we covered how to create Horizontal Listview with LazyRow compose and how to display list data in reverse order.
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
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"))
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),
// 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))
}
}
.fillMaxWidth()
.padding(10.dp), reverseLayout = revers){
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),
// 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))
}
} })
}
Complete code for Horizontal Listview with compose application
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
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"))
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) }) {
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)
}
}
}
}
}
}
@Composable
fun lazyRow(platforms:ArrayList<Platform>,revers:Boolean) {
LazyRow(modifier = Modifier
.fillMaxWidth()
.padding(10.dp), reverseLayout = revers){
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),
// 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))
}
} })
}
}
@Composable
fun DefaultPreview() {
Compose_Horizontal_listviewTheme {
}
Article Contributed By :
|
|
|
|
183 Views |