I this blog, we’ll learn how to create a scrollable list using Jetpack Compose. In this comprehensive tutorial, , you’ll be able to create a smooth and responsive ListView using Jetpack Compose that will enhance your user’s experience.
Jetpack Compose List
Jetpack Compose is a modern toolkit for building native Android UI. It simplifies UI development with concise and effortlessly. Creating scrollable lists using Jetpack Compose is an essential feature for a better app user experience. How exactly do it let start,
Setting up the project and adding dependencies.
Before you can create a scrollable ListView in Jetpack Compose, you need to set up the project and add the necessary dependencies. Let open AndroidStudio create a new project named with ComposeListExample . Next, add the following dependency to your app-level build.gradle file, use latest version
// For Jetpack Compose
implementation "androidx.compose.ui:ui:1.3.3"
implementation "androidx.compose.ui:ui-tooling-preview:1.3.3"
implementation 'androidx.compose.material:material:1.3.1'
// For Image
implementation("io.coil-kt:coil-compose:2.2.2")
In this tutorial, we are going to show actor list as per feature image, For loading image from network, so let add network permission in AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
Creating Jetpack Compose ListItems with Composables.
I am creating composable functions for actor list item, That contains actor name, birthplace and photo of the actor.
Create Actor data class
package com.compose.listexample data class Actor( val id: Long?, val name: String, val birthPlace: String, val photo: String, )
Write ListItems with Composable
To create the items in your scrollable list, you will use Jetpack Compose’s composable functions. You can define what should be displayed for that item, such as text, button or an image. You can also specify onItemClick() parameter to the ListItem(). With these composable functions and parameters like below.
package com.compose.listexample
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
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 coil.compose.AsyncImage
@Preview
@Composable
fun ListItem(
actor: Actor = Actor(1, "Surya", "New Delhi, IN", "https://androidwave.com"),
backgroundColor:Color=Color.LightGray,
onItemClick: () -> Unit= {},
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.clip(RoundedCornerShape(5.dp))
.clickable { onItemClick() }
.padding(8.dp)
.background(backgroundColor)
) {
Row(
modifier = modifier
.padding(16.dp)
) {
AsyncImage(
model = actor.photo,
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(80.dp)
.border(
width = 1.dp,
color = Color.LightGray,
shape = CircleShape
)
.padding(3.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.width(8.dp))
Column(
modifier = Modifier.fillMaxWidth()
) {
Text(
text = actor.name,
fontWeight = FontWeight.SemiBold,
fontSize = 20.sp
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = actor.birthPlace,
fontSize = 16.sp,
fontWeight = FontWeight.Light
)
}
}
}
}
Building the ListView and making it scrollable.
The Jetpack Compose framework offers an easy and efficient way to build a scrollable list using Jetpack Compose. Let see how exactly do that.
@Composable
fun ActorList(actors: List<Actor>) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(8.dp)
) {
LazyColumn {
items(actors) { actor ->
ListItem(
actor,
backgroundColor = Color.White,
onItemClick = {
Log.i("ActorList", "Info $actor")
},
)
}
}
}
}
To create a scrollable list, you can use the LazyColumn() composable function which creates a column with children views only when they are needed. This results in more efficient memory usage and faster rendering of items.
Finishing Touch Jetpack compose ListView
Open the MainActivity and use the ActorList composable function, just like below. Finally, let run it and check whether it work or not
package com.compose.listexample
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.compose.listexample.ui.theme.ComposeListExampleTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeListExampleTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(), color = Color(0xFFF1F1F1)
) {
val actorList = fetchActorList()
ActorList(actorList)
}
}
}
}
}
@Composable
fun ActorList(actors: List<Actor>) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(8.dp)
) {
LazyColumn {
items(actors) { actor ->
ListItem(
actor,
backgroundColor = Color.White,
onItemClick = {
Log.i("ActorList", "Info $actor")
},
)
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeListExampleTheme {
//Greeting("Android")
}
}
Conclusion
Once you have created a basic scrollable list using Jetpack Compose. Let run this app and see I hope it will run perfectly in your system also.
I have added interactivity just like onItemClick() function. You can manipulate data within the list, you can create a mutable list of items and modify them based on user interactions. Overall, adding interactivity can greatly enhance the functionality of your Jetpack Compose scrollable ListView and provide an even better user experience.
You have any query let me know, Follow us on social media for upcoming blog on Jetpack compose.