Modify items in paginated list in Jetpack Compose

Md . Jahid Hasan Naiem — Fri, 03 Mar 2023 02:45:42 +0000

When utilizing the paging library to retrieve a list and subsequently populate the user interface with the paging list, modifying individual items from the list can pose considerable challenges. This tutorial aims to present a solution to this issue by demonstrating how custom pagination can be used to accomplish the same task with ease in Jetpack Compose.

Let's get started...

For this tutorial I have followed one of the tutorial by Philipp Lackner. How to Implement Pagination With Jetpack Compose - Android Studio Tutorial

So, I have replaced paging 3 library with this custom pagination. Also declared a data class for updating screen state. Also declared a CompositionLocal key that can be provided using CompositionLocalProvider.

After that used that screen state as a composable state in the ViewModel. Also declared a paginator of type DefaultPaginator.

I have used CompositionLocalProvider and wraped the root composable function with the provider. You can learn about CompositionLocalProvider from here..

So, whenever a clip gets played the value of the state declared in the ViewModel getting updated and causing Compose to recompose the screen.And the item from the list get modified.

This is it for today!

Getting started with jetpack compose from XML

Md . Jahid Hasan Naiem — Tue, 07 Feb 2023 08:52:53 +0000

As developers specializing in Android, we are well-versed in creating user interfaces using XML. However, it is worth noting that Google is currently advocating the use of Jetpack Compose for developing native user interfaces. Jetpack Compose represents a contemporary toolkit designed for creating native user interfaces on the Android platform.

Why adopt Compose?

This article aims to demonstrate the process of incorporating Jetpack Compose into an existing project that utilizes XML for building the user interface. To facilitate this tutorial, the same project will be utilized throughout. Without further ado, let us commence...

Initially, it is necessary to include the Jetpack Compose dependency within the build.gradle file of the application. However, this can be a tedious process when integrating the dependency into an existing project due to the requisite matching of various dependency versions, compilation SDK versions, and Kotlin versions. After several iterations of modifying the dependency versions, I was eventually able to successfully integrate Jetpack Compose into one of my existing projects. Below is a code snippet outlining the configuration:

composeOptions {
        kotlinCompilerExtensionVersion = "1.3.1"
    }
kotlinOptions {
        jvmTarget = '1.8'
    }
buildFeatures {
        compose true
        dataBinding true
        viewBinding true
    }

ext.versions = [
            'navigation'         : '2.5.1',
            'lifecycle_version'  : '2.4.0',
            'retrofit_version'   : '2.9.0',
            'glide'              : '4.12.0',
            'hilt'               : '2.44.2',
            'paging'             : '3.1.1',
            'timber'             : '5.0.1',
            'compose_version'    : '1.2.0',
            'hilt_navigation'    : '1.0.0',
            'accompanist_version': '0.25.1'
    ]

//Paging Library
    implementation "androidx.paging:paging-runtime:${versions.paging}"
    implementation "androidx.paging:paging-compose:1.0.0-alpha14"

    //logger
    implementation "com.jakewharton.timber:timber:${versions.timber}"

    //compose
    implementation "androidx.compose.animation:animation:${versions.compose_version}"
    implementation "androidx.compose.foundation:foundation:${versions.compose_version}"
    implementation "androidx.compose.material:material:${versions.compose_version}"
    implementation "androidx.compose.material:material:${versions.compose_version}"
    implementation "androidx.compose.runtime:runtime:${versions.compose_version}"
    implementation "androidx.lifecycle:lifecycle-runtime-compose:2.6.0-alpha01"
    implementation "androidx.compose.ui:ui:${versions.compose_version}"
    debugImplementation "androidx.compose.ui:ui-tooling:${versions.compose_version}"
    implementation "androidx.compose.ui:ui-tooling-preview:${versions.compose_version}"
    implementation('io.coil-kt:coil-compose:2.2.2')
    implementation "androidx.hilt:hilt-navigation-compose:${versions.hilt_navigation}"
    implementation "androidx.navigation:navigation-compose:1.0.0"
    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"
    // Accompanist
    implementation "com.google.accompanist:accompanist-placeholder-material:${versions.accompanist_version}"
    implementation "com.google.accompanist:accompanist-navigation-animation:${versions.accompanist_version}"
    implementation "com.google.accompanist:accompanist-permissions:${versions.accompanist_version}"

1. First replace the part from the XML that you want to convert to Jetpack Compose with Compose view. Let's remove a recycler view and use Compose view there.

Compose view: It's view in XML which can host Jetpack
Compose UI content. Using this we can get familiar with
jetpack compose on our existing project. Basically all the
view drawn using Jetpack compose will be drawn over this
Compose view.

2. Create necessary UI component for the recyclerview you have replaced. We are going to replace recyclerview with LazyVerticalGrid in Compose and also create ItemView(PhotoItemCard) in Compose for the LazyVerticalGrid item.

// The UI for each item can be generated by a reusable composable

Here, I have created a UI for photo item. I have used Card to make the photo item clickable.

3. Now, I'll put this itemview(PhotoItemCard) inside a LazyVerticalGrid which is similar to RecyclerView with GridLayoutManager. Creating recyelerview in compose is so simple and easy. No adapters. No view holders. In Compose Recyclerview is replace with LazyColumn, LazyRow, LazyVerticalGrid and LazyHorizontalGrid appropriately.

Here, I am using the ViewModel (PhotoViewModel) to get the photos PagingData Flow object. After that inside the PhotoGriding UI composable convert it to PagingItem by using collectAsLazyPagingItem extension function. it collects the flow’s data as lazy items. And that’s exactly what we need. Compose knows how to handle this object and request more items when the user reaches the end of the list. I am loading this paginated data into the list using LazyVerticalGrid.

4. Lastly, define a function in the fragment on which view you are replacing and access the composeView in the xml using binding. set view composition strategy to DisposeOnViewTreeLifecycleDestroyed. Then inside setcontent call the composable function.

ViewCompositionStrategy that disposes the composition when the ViewTreeLifecycleOwner of the next window the view is attached to is destroyed.

Here, I have defined a lamda for item click to navigate to
PhotoFullScreen and passed it to the composable function as an argument. Also passed the ViewModel(PhotoViewModel) to access the data(photos).

--->
It's a good idea to start with small parts of your app and gradually convert more and more of it to Compose.That would be all for this article, I hope you liked it!
N.B. You may find Jetpack Compose app laggy in debug mode. You should always test Compose performance in release.
The full code with detailed implementation can be found on GitHub. Checkout the to-JetpackCompose branch:

jhnaiem / UnsplashPhotos

An android app that displays a list of photos as a gallery.

UnsplashPhotos

An android app that displays a list of photos as a gallery.

Feature List

Get a list of photos from “https://api.unsplash.com/”
A user can infinitely scroll on the gallery screen
A user can tap on a photo to see a full-screen photo
The app’s flavor/scheme can be changed easily from development API to production API
Caching images
Caching API response
Saving photos in JPEG format to the local gallery
Sharing the photo

The architectural pattern used in the app

In this app, I have adopted Clean architecture with MVVM. According to clean architecture, I have divided the code into three layers:

Presentation/UI layer
Domain layer
Data Layer

The Clean Code Blog by Robert C.Martin (Uncle Bob)

1. Domain layer

This is the center of Clean Architecture. It establishes communication between the data and the Presentation layer. This layer contains a Domain model and repository( interface). We can see…

View on GitHub

References:
https://developer.android.com/jetpack/compose/interop

https://developer.android.com/jetpack/compose/interop/interop-apis

DEV Community: Md . Jahid Hasan Naiem

Modify items in paginated list in Jetpack Compose

Getting started with jetpack compose from XML

jhnaiem / UnsplashPhotos

An android app that displays a list of photos as a gallery.

UnsplashPhotos

An android app that displays a list of photos as a gallery.

Feature List

The architectural pattern used in the app

1. Domain layer