{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"9720ef25-7d81-5307-9ea5-229d55ec766f","frontmatter":{"category":"Engineering","title":"Android JetPack Compose + Paging 3","date":"2024-03-29","summary":"A short trip around the AUTO1 Application Cockpit data model","thumbnail":null,"authorName":"Sergey Bakhtiarov","authorDescription":"Senior Android Developer at AUTO1 Group","authorAvatar":{"relativePath":"pages/android-compose-pagination/avatar_Sergey.jpeg","childImageSharp":{"resolutions":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEBgX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgD/2gAMAwEAAhADEAAAAessVEW4wzlnkZ2tJg3/xAAdEAACAQQDAAAAAAAAAAAAAAABAgMABCExECIz/9oACAEBAAEFAsAAq1EVIe0OSdtKzEXEgbfMHh//xAAXEQADAQAAAAAAAAAAAAAAAAAQERIh/9oACAEDAQE/AZxhj//EABURAQEAAAAAAAAAAAAAAAAAABEg/9oACAECAQE/AWP/xAAdEAACAgEFAAAAAAAAAAAAAAABEQAQAiAhImFx/9oACAEBAAY/AtzOJt9U3GCtGHk//8QAGxABAAIDAQEAAAAAAAAAAAAAAQARECExQVH/2gAIAQEAAT8hd4gIS0NTZPIjUV1DC40rgQLqvDjL0fpeUqrP/9oADAMBAAIAAwAAABD/APKz/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8QBR//xAAXEQEBAQEAAAAAAAAAAAAAAAABEBEh/9oACAECAQE/EOnIBP/EAB0QAQEBAAMAAwEAAAAAAAAAAAERACExQVFhcdH/2gAIAQEAAT8QaCJVXrPnop5ivjMtoBBeM7oBFG2x3Zjtir0D+518AlC+E9yQMgcPsxpw/mVwqOXf/9k=","width":50,"height":50,"src":"/static/27c2b15cdd840519c853a653e9b049f0/d2d31/avatar_Sergey.jpeg","srcSet":"/static/27c2b15cdd840519c853a653e9b049f0/d2d31/avatar_Sergey.jpeg 1x,\n/static/27c2b15cdd840519c853a653e9b049f0/0b804/avatar_Sergey.jpeg 1.5x,\n/static/27c2b15cdd840519c853a653e9b049f0/753c3/avatar_Sergey.jpeg 2x,\n/static/27c2b15cdd840519c853a653e9b049f0/31ca8/avatar_Sergey.jpeg 3x"}}},"headerImage":null},"html":"

Android JetPack Compose + Paging 3

\n

About pagination

\n

Paginated APIs, often encountered when dealing with servers and databases, break down large datasets into manageable chunks or pages. This methodology not only optimizes resource usage but also enhances the overall user experience by delivering content progressively. However, integrating and managing paginated data in a mobile app can be a challenge, from maintaining loading states to ensuring a seamless transition between pages and supporting content filtering.

\n

In this guide I will show you how to work with paginated APIs in Android with Jetpack Compose and Paging 3 libraries.

\n

\"Paging

\n

Basics, architecture overview

\n



\n\"Paging

\n

The key components of the Paging 3 architecture include

\n

PagingSource

\n\n

Remote Mediator

\n\n

Paging Data

\n\n

Pager

\n\n

Data layer

\n

We start with the data layer and define a Retrofit API for fetching movies from network service.

\n
interface MoviesApi {\n  @GET(\"/3/discover/movie?language=en-US&sort_by=popularity.desc\")\n  suspend fun discover(\n    @Query(\"api_key\") api_key: String,\n    @Query(\"page\") page: Int,\n    @Query(\"with_genres\") genres: String,\n  ): Response<MoviesNetworkResponse>\n}
\n

Next, we will leverage the Room library, which is compatible with Paging 3, to create a local paging source.

\n
@Dao\ninterface MoviesDao {\n  @Query(\"SELECT * FROM movies ORDER BY id ASC\")\n  fun getMovies(): DataSource.Factory<Int, MovieDbEntity>\n}
\n

It's important to highlight that we utilize DataSource.Factory as the return type instead of PagingSource. This choice is made specifically because DataSource.Factory offers the map() method, enabling us to map MovieDbEntity instances into domain layer models.

\n

Now we need to put together local and remote data sources in Remote mediator.

\n
    \n
  1. Determine which page to load depending on the loadType and next page value. Next page number (getRemoteKey().nextPage) is stored in the database after each successful network request.
    2. \n
\n
val page = when (loadType) {\n        LoadType.REFRESH -> 1\n        LoadType.PREPEND -> null\n        LoadType.APPEND -> repository.getRemoteKey()?.nextPage\n      } ?: return Success(endOfPaginationReached = true)
\n

For bidirectional pagination support, provide the preceding page number for the PREPEND load type. The REFRESH load type is employed when content is refreshed, initiating loading from the initial page.

\n
    \n
  1. Request data from network
    2. \n
\n

Call our network data source method to fetch a page of data from the server.

\n
val movies = moviesDataSource.discover(page)
\n
    \n
  1. Insert data into the database or refresh database if loadType is refresh
    2. \n
\n

The RemoteMediator code will appear as follows:

\n
class MoviesRemoteMediator(\n  private val repository: MoviesRepository,\n  private val moviesDataSource: NetworkMoviesDataSource,\n) : RemoteMediator<Int, Movie>() {\n\n  override suspend fun load(loadType: LoadType, state: PagingState<Int, Movie>): MediatorResult {\n\n    return try {\n\n      val page = when (loadType) {\n        LoadType.REFRESH -> 1\n        LoadType.PREPEND -> null\n        LoadType.APPEND -> repository.getRemoteKey()?.nextPage\n      } ?: return Success(endOfPaginationReached = true)\n\n      val movies = moviesDataSource.getMovies(page)\n\n      val nextPage = if (movies.isNotEmpty()) page + 1 else null\n\n      repository.insertMovies(movies, nextPage, loadType == LoadType.REFRESH)\n\n      Success(endOfPaginationReached = movies.isEmpty())\n\n    } catch (e: Exception) {\n      MediatorResult.Error(e)\n    }\n  }\n}
\n

RemoteMediator uses the repository to store movies list and next page number in the database.\nRepository also takes care of clearing the database table when data is refreshed:

\n
class MoviesRepositoryImpl(\n  private val database: MoviesDatabase\n): MoviesRepository {\n\n  override fun getMovies() = database.movies().getMovies().map { it.toDomain() }\n\n  override suspend fun insertMovies(movies: List<Movie>, nextPage: Int?, clear: Boolean){\n\n    database.withTransaction {\n      if (clear) {\n        database.movies().clear()\n      }\n\n      database.movies().putMovies(movies.map { it.toDbEntity() })\n\n      if (nextPage != null) {\n        database.remoteKey().insertKey(RemoteKey(MoviesDatabase.MOVIES_REMOTE_KEY, nextPage))\n      }\n    }\n  }\n}
\n

UI layer

\n

The Pager object serves as a bridge between remote and local data sources. It is managing the page loading, prefetching, and handling the transitions between various data sources to provide a seamless and responsive flow of paginated content within your application. You can configure the page loading behavior with the following parameters:

\n\n
class MoviesScreenViewModel(\n  moviesSource: MoviesRemoteMediator,\n  repository: MoviesRepository,\n  private val movieDetails: MovieDetailsApi,\n) : ViewModel() {\n   val moviesFlow = Pager(\n      config = PagingConfig(\n        pageSize = PAGE_SIZE,\n        prefetchDistance = PREFETCH_DISTANCE,\n        initialLoadSize = INITIAL_LOAD,\n      ),\n      remoteMediator = moviesSource,\n      pagingSourceFactory = repository.getMovies().asPagingSourceFactory()\n    ).flow.cachedIn(viewModelScope)\n}
\n

Consuming paging data in Jetpack Compose UI

\n

Now, let's explore how to consume the paginated data in your Compose UI.

\n

Use the collectAsLazyPagingItems extension function to collect the PagingData and observe changes.

\n
val movies = viewModel.moviesFlow.collectAsLazyPagingItems()
\n

Use the LazyColumn or LazyVerticalGrid to efficiently display paginated data in your Compose UI.

\n
LazyVerticalGrid(\n      modifier = Modifier\n        .fillMaxSize()\n        .padding(16.dp),\n      columns = GridCells.Fixed(3),\n      horizontalArrangement = Arrangement.spacedBy(16.dp),\n      verticalArrangement = Arrangement.spacedBy(16.dp),\n    ) {\n\n      items(\n        count = movies.itemCount,\n        key = movies.itemKey { it.id },\n      ) { index ->\n\n        movies[index]?.let { movie ->\n          MovieCardSmall(\n            movie = movie,\n            onClick = { onClick(movie.id) },\n          )\n        }\n      }\n    }
\n
\n
\n

Note the usage of the key property for items. The key property uniquely identifies each item, allowing Compose to efficiently update and recycle composables as data changes.

\n
\n
\n

Paging state handling

\n

LazyPagingItems offers insights into the ongoing data loading process, allowing you to effectively manage errors during pagination. By examining the loadState.append property, you can determine the loading state when appending new items and present a user-friendly indication of the current status.

\n

For instance, the following code snippet demonstrates how to react to different loading states during item appending:

\n
when (movies.loadState.append) {\n  is LoadState.Loading -> { ProgressFooter() }\n  is LoadState.Error -> { ErrorFooter(onRetryClick = { movies.retry() } }\n}
\n

Similarly, you can assess the loading status when the list data is refreshed by checking the loadState.refresh property. Extension functions isError() and isLoading() provide convenient checks for error and loading states, respectively.

\n
fun LazyPagingItems<Movie>.isError(): Boolean = \n    loadState.refresh is LoadState.Error && itemSnapshotList.isEmpty()\n\nfun LazyPagingItems<Movie>.isLoading(): Boolean = \n    loadState.refresh is LoadState.Loading && itemSnapshotList.isEmpty()
\n

Incorporate these checks into your UI logic to display appropriate screens based on the loading or error states. The following code snippet demonstrates how to handle loading and error states along with providing a retry option:

\n
when {\n   movies.isLoading() -> LoadingScreen()\n   movies.isError() -> ErrorScreen { movies.retry() }\n   else -> MoviesGrid(movies = movies, onClick = viewModel::onMovieClick)\n}
\n

Additionally, LazyPagingItems offers a convenient retry() method, allowing you to retry the last failed data loading attempt with ease.

\n

Adding filters

\n

Now lets add filters to our movie list to see paginated list of movies filtered by genre.

\n

\"Filters

\n

We start with requesting genres from the server and saving them in our database. We will keep genre data and selection in the database so that we can observe it from our domain and UI layers.

\n
interface MoviesApi {\n  @GET(\"/3/genre/movie/list?language=en-US\")\n  suspend fun genres(@Query(\"api_key\") api_key: String): Response<GenresNetworkResponse>\n}\n\n@Dao\ninterface GenresDao {\n\n  @Insert(onConflict = OnConflictStrategy.REPLACE)\n  suspend fun putGenres(genres: List<GenreDbEntity>)\n\n  @Upsert(entity = GenreDbEntity::class)\n  suspend fun updateGenres(genres: List<GenreDbUpdateEntity>)\n\n  @Query(\"SELECT * FROM genres\")\n  suspend fun getGenres(): List<GenreDbEntity>\n\n  @Query(\"SELECT * FROM genres\")\n  fun observeGenres(): Flow<List<GenreDbEntity>>\n}
\n

Now we can add with_genres parameter to our network request:

\n
  @GET(\"/3/discover/movie?language=en-US&sort_by=popularity.desc\")\n  suspend fun discover(\n    @Query(\"page\") page: Int,\n    @Query(\"with_genres\") genres: String,\n    @Query(\"api_key\") api_key: String,\n  ): Response<MoviesNetworkResponse>
\n

Remote mediator will get selected genres from the repository

\n
  ...\n  val genres = repository.getGenreSelection()\n  val movies = moviesDataSource.getMovies(page, genres)\n  ...
\n

Every time user selects a new filter we stave it in the database and restart pagination by clearing movies in the database and resetting the page to 1.

\n
class MoviesScreenViewModel {\n\n  fun onGenreClick(genreItem: GenreItem) = viewModelScope.launch {\n    genresProvider.setSelection(genreItem.id, !genreItem.isSelected)\n    repository.clearMovies()\n  }\n  \n}
\n
class MoviesRepositoryImpl {\n\n  override suspend fun clearMovies() = withContext(Dispatchers.IO) {\n    database.withTransaction {\n      database.movies().clear()\n      database.remoteKey().insertKey(RemoteKey(MoviesDatabase.MOVIES_REMOTE_KEY, 1))\n    }\n  }\n\n}
\n

Links

\n


Source code: https://github.com/auto1-oss/android-compose-paging
\n
Official documentation: https://developer.android.com/topic/libraries/architecture/paging/v3-overview

","fields":{"slug":"/android-compose-pagination/","tags":["auto1","mobile","Android"]}}}]}},"pageContext":{"slug":"/tags/Android","tag":"Android","categories":["Architecture","Coding","DevOps","Engineering","ProjectManagement","QA","Social","TechRadar"]}}