RecylerView Using Jetpack Compose

Hi Lets see how to implement recylerview using jetpack compose in a step by step manner

First we will be creating an empty project for that we need android studio

Android Studio Arctic Fox | 2020.3.1 Patch 2

Since it contain the empty compose activity

From the list we choose empty compose Activity

After selecting we will be having default implementation code we can run and check that code to check our sample project work perfectly.

Lets jump in to our code with no further delay in this example we will be creating a list of puppies

First will be creating our model class Puppy.kt for holding data of puppies this data class contain information about title,sex,age,description etc

//Model data class which holds datas of puppy
data class Puppy(val id:Int,
val title:String,
val sex:String,
val age:Int,
val description:String,
val puppyImageId:Int)

And next one is data provider class it may be from Api or from local database but in our case we create list of data inside the DataProvider.kt as list

//For Providing dummy data to recylerview
object DataProvider {
val puppyList = listOf(Puppy(id=1,title = "Puppy 1",sex = "Male",age = 14,description = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",puppyImageId = R.drawable.dummypuppy),
Puppy(id=2,title = "Puppy 2",sex = "Male",age = 14,description = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",puppyImageId = R.drawable.dummytwo))
}

in below class the puppyList variable hold two data

Next step we have to create BarkHome.kt this class contain design for our recylerview so inside this class we have our design Composable function

@Composable
fun BarkHomeContent() {

// the remeber function in Composable function stores the current state of the variable
// in our case its puppies variable if the puppyList changes it will maintain the current state.
val puppies = remember { DataProvider.puppyList }

//This was the recylerview that we as an android developer are quite familar with it.
LazyColumn
(
// we are providing space by using padding
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
) {
// the items function - that takes puppies item as our first params
// itemContent - that take our list item and populate with each item in list
items
(
items = puppies,
itemContent = {
PuppyListItem(puppy = it)
})
}
}

lets see our first composable function BarkHomeContent() inside our BarkHome.kt class

the remeber function in Composable function stores the current state of the variable in our case its puppies variable if the puppyList changes it will maintain the current state.

LazyColumnThis was the recylerview that we as an android developer are quite familar with it.// we are providing space by using padding
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)

Next comes items which holds item list as first params and itemContent as second

next we create single item design

@ComposabledeS
fun PuppyListItem(puppy: Puppy) {

Card(modifier = Modifier
.padding(horizontal = 8.dp, vertical = 8.dp)
.fillMaxWidth(),
elevation = 2.dp,
backgroundColor = Color.White,
shape = RoundedCornerShape(corner = CornerSize(16.dp))
)
{
//Row - represent row in a list
Row {
//Inside row create coloumn of two text that take puppy title and view details
// as the second text
PuppyImage
(puppy)
Column (modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.align(Alignment.CenterVertically))
{
Text(text = puppy.title, fontFamily = noromalrobofonts)
Text(text = "View Details", fontFamily = noromalrobofonts)
}
}
}
}

in the above program i mention the use of each line by starting with double slash

next we add image using PuppyImage composable function

@Composable
private fun PuppyImage(puppy: Puppy) {
Image(
painter = painterResource(id = puppy.puppyImageId),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.padding(8.dp)
.size(84.dp)
.clip(RoundedCornerShape(corner = CornerSize(16.dp)))
)
}

Final coe of entire recylerview design BarkHome.kt class

package com.example.myapplication.presentation.viewpuppies

import android.graphics.Paint
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.unit.dp
import com.example.myapplication.data.data_source.DataProvider
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
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.res.painterResource
import com.example.myapplication.domain.model.Puppy
import com.example.myapplication.ui.theme.noromalrobofonts


@Composable
fun BarkHomeContent() {

// the remeber function in Composable function stores the current state of the variable
// in our case its puppies variable if the puppyList changes it will maintain the current state.
val puppies = remember { DataProvider.puppyList }

//This was the recylerview that we as an android developer are quite familar with it.
LazyColumn
(
// we are providing space by using padding
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
) {
// the items function - that takes puppies item as our first params
// itemContent - that take our list item and populate with each item in list
items
(
items = puppies,
itemContent = {
PuppyListItem(puppy = it)
})
}
}

@Composable
fun PuppyListItem(puppy: Puppy) {

Card(modifier = Modifier
.padding(horizontal = 8.dp, vertical = 8.dp)
.fillMaxWidth(),
elevation = 2.dp,
backgroundColor = Color.White,
shape = RoundedCornerShape(corner = CornerSize(16.dp))
)
{
//Row - represent row in a list
Row {
//Inside row create coloumn of two text that take puppy title and view details
// as the second text
PuppyImage
(puppy)
Column (modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.align(Alignment.CenterVertically))
{
Text(text = puppy.title, fontFamily = noromalrobofonts)
Text(text = "View Details", fontFamily = noromalrobofonts)
}
}
}
}

@Composable
private fun PuppyImage(puppy: Puppy) {
Image(
painter = painterResource(id = puppy.puppyImageId),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.padding(8.dp)
.size(84.dp)
.clip(RoundedCornerShape(corner = CornerSize(16.dp)))
)
}

And our MainActivity.kt code look like

package com.example.myapplication.presentation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

import com.example.myapplication.presentation.viewpuppies.BarkHomeContent
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
Recylerviewdatas()
}
}
}
}
}


@Composable
fun Recylerviewdatas() {
Scaffold( //implement the basic material design visual layout structure in compose.
content = {
BarkHomeContent()
}
)
}

Final ouput look like

Final source code

git clone https://bitbucket.org/PandiyanMani100/recylerviewjetpack.git