Pagination in Jetpack Compose with and with out Paging 3

By admin

December 18, 2022

0

6

Desk of Contents

We’ll use Retrofit & Hilt on this article, so it’s higher you know the way they work.

Additionally, we’ll use this API for testing. I like to recommend you register and get your API key.

def paging_version = "3.1.1"
implementation "androidx.paging:paging-runtime:$paging_version"
implementation "androidx.paging:paging-compose:1.0.0-alpha17"//Different Dependencies
def retrofit_version = "2.9.0"
implementation "com.squareup.retrofit2:retrofit:$retrofit_version"
implementation "com.squareup.retrofit2:converter-gson:$retrofit_version"
def hilt_version = "2.44"
implementation "com.google.dagger:hilt-android:$hilt_version"
kapt "com.google.dagger:hilt-compiler:$hilt_version"
implementation "androidx.hilt:hilt-navigation-compose:1.0.0"

Don’t overlook so as to add Web permission in AndroidManifest.xml,

<uses-permission android:title="android.permission.INTERNET" />

Earlier than we setup Retrofit, let’s see the response of the endpoint that we’ll use. Endpoint, https://newsapi.org/v2/every little thing?q=apple&sortBy=recognition&apiKey=APIKEY&pageSize=20&web page=1

{
"standing": "okay",
"totalResults": 65739,
"articles": [
{
"source": {
"id": "wired",
"name": "Wired"
},
"author": "Parker Hall",
"title": "Apple Music Sing Adds 'Karaoke Mode' to Streaming Songs",
"description": "America's most popular music streaming service is adding the ability to turn down the vocals and sing along.",
"url": "https://www.wired.com/story/apple-music-sing/",
"urlToImage": "https://media.wired.com/photos/638f959b54aee410695ffa12/191:100/w_1280,c_limit/Apple-Music-Sing-Featured-Gear.jpg",
"publishedAt": "2022-12-06T20:51:11Z",
"content": "When it comes to advanced technical features and seamless compatibility with iOS devices, Apple Music has Spotify well and truly beaten. The Swedish streaming giant has essentially the same content l… [+3348 chars]"
},
]
}

Response fashions,

Please put them into totally different information. I’ve put them into one code block to make it simpler to learn.

information class NewsResponse(
val articles: Listing<Article>,
val standing: String,
val totalResults: Int
)
information class Supply(
val id: String,
val title: String
)
information class Article(
val writer: String,
val content material: String,
val description: String,
val publishedAt: String,
val supply: Supply,
val title: String,
val url: String,
val urlToImage: String
)

Now let’s create API Service & repository, it’s going to be a easy one,

interface NewsApiService {
@GET("every little thing?q=apple&sortBy=recognition&apiKey=${Constants.API_KEY}&pageSize=20")
droop enjoyable getNews(
@Question("web page") web page: Int
): NewsResponse
}

That’s it. Now we are able to begin implementing pagination.

Paging Supply

Let’s begin by creating Paging Supply,

class NewsPagingSource(
non-public val newsApiService: NewsApiService,
): PagingSource<Int, Article>() {
override enjoyable getRefreshKey(state: PagingState<Int, Article>): Int? {
return state.anchorPosition?.let { anchorPosition ->
state.closestPageToPosition(anchorPosition)?.prevKey?.plus(1)
?: state.closestPageToPosition(anchorPosition)?.nextKey?.minus(1)
}
}override droop enjoyable load(params: LoadParams<Int>): LoadResult<Int, Article> {
return attempt {
val web page = params.key ?: 1
val response = newsApiService.getNews(web page = web page)
LoadResult.Web page(
information = response.articles,
prevKey = if (web page == 1) null else web page.minus(1),
nextKey = if (response.articles.isEmpty()) null else web page.plus(1),
)
} catch (e: Exception) {
LoadResult.Error(e)
}
}
}

The first Paging library part within the repository layer is PagingSource. Every PagingSource object defines a supply of knowledge and methods to retrieve information from that supply. A PagingSource object can load information from any single supply, together with community sources and native databases.

In our instance, PagingSource extends <Int, Article>,

Int is the kind of paging key, for our case it’s index numbers for pages.

Article is the kind of information loaded.

getRefreshKey, offers a key used for the preliminary load for the subsequent PagingSource attributable to invalidation of this PagingSource.

load, perform will probably be referred to as by the Paging library to asynchronously fetch extra information to be displayed because the consumer scrolls round.

That’s it for PagingSource, we are able to create repository & view mannequin.

Repository & View Mannequin

It’s probably not essential to have repository since PagingSource acts like one, you’ll be able to take away repository and make the identical perform calls in view mannequin.

class NewsRepository @Inject constructor(
non-public val newsApiService: NewsApiService
) {
enjoyable getNews() = Pager(
config = PagingConfig(
pageSize = 20,
),
pagingSourceFactory = {
NewsPagingSource(newsApiService)
}
).stream
}

@HiltViewModel
class NewsViewModel @Inject constructor(
non-public val repository: NewsRepository,
): ViewModel() {enjoyable getBreakingNews(): Circulate<PagingData<Article>> = repository.getNews().cachedIn(viewModelScope)
}

The Pager part offers a public API for setting up situations of PagingData which can be uncovered in reactive streams, based mostly on a PagingSource object and a PagingConfig configuration object.

PagingConfig, this class units choices concerning methods to load content material from a PagingSource resembling how far forward to load, the dimensions request for the preliminary load, and others. The one obligatory parameter it’s a must to outline is the web page measurement

pagingSourceFactory, perform that defines methods to create the PagingSource.

That’s it. Now we are able to implement UI and see the outcomes.