Android Jetpack Compose RecyclerView Example
In this article, we are going to integrate recyclerview or listview in android application using jetpack compose. You can also check out jetpack compose related articles.
In this example, we are displaying football players info in list with the help of jetpack compose components. If you are new to jetpack compose, check out jetpack compose basics UI. We are using static football players data to display in android list.
Main Activity Layout
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.codingwithdhrumil.jetpackcomposerecyclerviewdemo.ui.theme.JetpackComposeRecyclerViewDemoTheme
import com.codingwithdhrumil.jetpackcomposerecyclerviewsample.FootballPlayerList
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeRecyclerViewDemoTheme {
Surface(color = MaterialTheme.colors.background) {
MainActivityLayout()
}
}
}
}
}
@Composable
fun MainActivityLayout() {
FootballPlayerList()
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackComposeRecyclerViewDemoTheme {
MainActivityLayout()
}
}
Create Model Class to handle data
data class FootballPlayer( val name:String, val imgUrl: String, val clubName:String, val countryName: String)
Add static data in array to display in android list
object FootballPlayersData {
val listPlayers = listOf(
FootballPlayer(“Cristiano Ronaldo”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p14937.png”, “Manchester United”, “Portugal”),
FootballPlayer(“Kevin De Bruyne”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p61366.png”, “Manchester City”, “Belgium”),
FootballPlayer(“Harry Kane”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p78830.png”, “Tottenham Hotspur”, “England”),
FootballPlayer(“Romelu Lukaku”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p66749.png”, “Chelsea”, “Belgium”),
FootballPlayer(“Mohamed Salah”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p118748.png”, “Liverpool”, “Egypt”),
FootballPlayer(“Bruno Fernandes”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p141746.png”, “Manchester United”, “Portugal”),
FootballPlayer(“Raheem Sterling”, “https://resources.premierleague.com/premierleague/photos/players/40×40/p103955.png”, “Manchester City”, “England”),
FootballPlayer(“Virgil van Dijk”,”https://resources.premierleague.com/premierleague/photos/players/40×40/p97032.png”, “Liverpool”, “Netherlands”),
)
}
Android Jetpack Compose RecyclerView
If we want to display list items in vertical direction, we need to use LazyColumn of jetpack compose. for horizontal direction, LazyRow is used to display items in list. We can add our static data in items function under LazyColumn. Using itemContent parameter, we can customize our list view row.
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@Composable
fun FootballPlayerList() {
val listFootballPlayers = remember {
FootballPlayersData.listPlayers
}
LazyColumn() {
items(
items = listFootballPlayers,
itemContent = {
FootballPlayerListItem(footballPlayer = it)
})
}
}
Custom Jetpack Compose Layout Row
To display image from url in android app, we are using coil library. We need to add coil library under dependencies section in app level build.gradle file as below.
We also need to use internet to download image from url using coil library. We must add internet permission in android manifest file as below.
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.rememberImagePainter
@Composable
fun FootballPlayerListItem(footballPlayer: FootballPlayer){
Card(
modifier = Modifier.padding(horizontal = 15.dp, vertical = 10.dp).fillMaxWidth(),
elevation = 2.dp,
shape = RoundedCornerShape(corner = CornerSize(15.dp))
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(horizontal = 15.dp, vertical = 10.dp)
){
Image(
painter = rememberImagePainter(footballPlayer.imgUrl),
modifier = Modifier
.size(40.dp)
.clip(shape = CircleShape),
contentScale = ContentScale.Crop,
contentDescription = null
)
Column(
modifier = Modifier.padding(start = 10.dp)
){
Text(text = footballPlayer.name, fontSize = 22.sp)
Text(text = footballPlayer.clubName + ” ” + footballPlayer.countryName, fontSize = 18.sp)
}
}
}
}
