![](\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/1pgp1zic4YivNH4X0C1PM7g.webp\")
\nDuring the development journey, we may require to show unlimited data as no of users of a particular mobile application grows, so does the data associated with that application.<\/p>\n
\nDuring the development journey, we may require to show unlimited data as no of users of a particular mobile application grows, so does the data associated with that application.<\/p>\n
Consider the image application, the user scrolls to the bottom of the screen and wants to be able to fetch more data from the server to display it, but what if the user scrolls up the screen at the same time? As a result, we will have to deal with a large number of cases and error handling.<\/p>\n
We require an approach to do this task that loads all data efficiently from the local database or network, allows caching, reduces resource utilization, and also saves development time.<\/p>\n
Paging does this work for you. Paging is a Jetpack library that manages and load data efficiently from different data source; it is compatible with Kotlin and works with threading solutions i.e. Flow, Coroutine, etc. It is designed to follow the Android app architecture. Also, it supports RxJava and LiveData.<\/p>\n
Paging3 & Application architecture:<\/strong><\/p>\n Paging3 uses the Android app architecture basic layer like repository->View Model -> Ui component.<\/p>\n Paging Source: <\/strong>Paging source is a generic abstract class that takes two type page keys Type and Response Type.<\/p>\n Pager: <\/strong>This Api consumes a Paging source or remote mediator data source and returns a stream of paged data; it can be flow, Observable, or Live Data.<\/p>\n PagingDataAdapter: <\/strong>This is a UI component that is responsible for presenting paged data in the recycler view; it has some additional methods to manage the header and footer at runtime.<\/p>\n Paging config:<\/strong> Here, you can define how much data it load for each page.<\/p>\n Add the required dependency in app level gradle:<\/p>\n implementation ‘androidx.paging:paging-runtime:3.1.1’<\/span><\/p>\n<\/blockquote>\n Image Paging Source:<\/span><\/p>\n Images View Model:<\/p>\n Images Fragment:<\/p>\n If you run the above code, it will produce output like below:<\/p>\n If you are facing some use cases, feel free to comment and clap if you enjoyed.<\/p>\n Find the complete code on Github<\/a>.<\/p>\n![](\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/1IlYEUmcmqJUG4zYc53PBlg.webp\")
<\/p>\nLet us code and achieve it<\/strong><\/h2>\n
\n
\nImage Repository:<\/span><\/p>\nclass<\/span> ImageRepository<\/span>(\r\nprivate<\/span> val<\/span> apiService: ApiService = RemoteInjector.injectApiService(),\r\n) {\r\ncompanion<\/span> object<\/span> {\r\nconst<\/span> val<\/span> DEFAULT_PAGE_INDEX = 1<\/span>\r\nconst<\/span> val<\/span> DEFAULT_PAGE_SIZE = 20<\/span>\r\nfun<\/span> getInstance<\/span>()<\/span><\/span> = ImageRepository()\r\n}\r\n\r\nfun<\/span> letImagesFlow<\/span>(pagingConfig: PagingConfig<\/span> = getDefaultPageConfig()<\/span><\/span>): Flow<PagingData<ImageModel>> {\r\nreturn<\/span> Pager(\r\nconfig = pagingConfig,\r\npagingSourceFactory = { ImagePagingSource(apiService) }\r\n).flow\r\n}\r\n\r\nprivate<\/span> fun<\/span> getDefaultPageConfig<\/span>()<\/span><\/span>: PagingConfig {\r\nreturn<\/span> PagingConfig(pageSize = DEFAULT_PAGE_SIZE, enablePlaceholders = false<\/span>)\r\n}\r\n}<\/pre>\nclass<\/span> ImagePagingSource<\/span>(var<\/span> apiService: ApiService) : PagingSource<Int<\/span>, ImageModel>() {\r\n\r\noverride<\/span> suspend<\/span> fun<\/span> load<\/span>(params: LoadParams<\/span><Int<\/span>>)<\/span><\/span>: LoadResult<Int<\/span>, ImageModel> {\r\nval<\/span> page = params.key ?: DEFAULT_PAGE_INDEX\r\nreturn<\/span> try<\/span> {\r\nval<\/span> response = apiService.getImages(page, params.loadSize)\r\n\r\nLoadResult.Page(\r\nresponse, prevKey = if<\/span> (page == DEFAULT_PAGE_INDEX) null<\/span> else<\/span> page - 1<\/span>,\r\nnextKey = if<\/span> (response.isEmpty()) null<\/span> else<\/span> page + 1<\/span>\r\n)\r\n\r\n} catch<\/span> (exception: IOException) {\r\nreturn<\/span> LoadResult.Error(exception)\r\n} catch<\/span> (exception: HttpException) {\r\nreturn<\/span> LoadResult.Error(exception)\r\n}\r\n}\r\n\r\noverride<\/span> fun<\/span> getRefreshKey<\/span>(state: PagingState<\/span><Int<\/span>, ImageModel>)<\/span><\/span>: Int<\/span>? {\r\n\r\n}\r\n}<\/pre>\nclass<\/span> ImagesViewModel<\/span>(private<\/span> val<\/span> repository: ImageRepository = ImageRepository.getInstance()) :\r\nViewModel() {\r\nfun<\/span> fetchImages<\/span>()<\/span><\/span>: Flow<PagingData<String>> {\r\nreturn<\/span> repository.letImagesFlow()\r\n.map { it -> it.map { it.url } }\r\n.cachedIn(viewModelScope)\r\n}\r\n}\r\n\r\nImages Adapter:\r\nclass<\/span> ImagesAdapter<\/span> :\r\nPagingDataAdapter<\/span><String, UserViewHolder<\/span>>(object<\/span> : DiffUtil.ItemCallback<String>() {\r\noverride<\/span> fun<\/span> areItemsTheSame<\/span>(oldItem: String<\/span>, newItem: String<\/span>)<\/span><\/span>: Boolean<\/span> {\r\nreturn<\/span> oldItem == newItem\r\n}\r\n\r\noverride<\/span> fun<\/span> areContentsTheSame<\/span>(oldItem: String<\/span>, newItem: String<\/span>)<\/span><\/span>: Boolean<\/span> {\r\nreturn<\/span> oldItem == newItem\r\n}\r\n}) {\r\noverride<\/span> fun<\/span> onCreateViewHolder<\/span>(\r\nparent: ViewGroup<\/span>,\r\nviewType: Int<\/span>\r\n)<\/span><\/span>: UserViewHolder {\r\nval<\/span> inflater = LayoutInflater.from(parent.context)\r\n\r\nreturn<\/span> UserViewHolder(inflater.inflate(R.layout.item_image_view, parent,false<\/span>))\r\n}\r\n\r\noverride<\/span> fun<\/span> onBindViewHolder<\/span>(holder: UserViewHolder<\/span>, position: Int<\/span>)<\/span><\/span> {\r\nval<\/span> item = getItem(position)\r\nholder.bind(item)\r\n\r\n}\r\n}\r\n\r\nclass<\/span> UserViewHolder<\/span>(itemView: View) : RecyclerView.ViewHolder(itemView) {\r\nfun<\/span> bind<\/span>(url: String<\/span>?)<\/span><\/span> {\r\nval<\/span> image = itemView.findViewById<ImageView>(R.id.ivMain)\r\nGlide.with(itemView.context).load(url).into(image)\r\n}\r\n}<\/pre>\nclass<\/span> ImagesFragment<\/span> : Fragment<\/span>() {\r\n\r\nprivate<\/span> lateinit<\/span> var<\/span> viewModel: ImagesViewModel\r\nprivate<\/span> var<\/span> _binding: FragmentImagesBinding? = null<\/span>\r\nprivate<\/span> lateinit<\/span> var<\/span> adapter: ImagesAdapter\r\nprivate<\/span> lateinit<\/span> var<\/span> loaderAdapter: LoaderStateAdapter\r\n\r\nprivate<\/span> val<\/span> binding get<\/span>() = _binding!!\r\n\r\noverride<\/span> fun<\/span> onCreateView<\/span>(\r\ninflater: LayoutInflater<\/span>, container: ViewGroup<\/span>?,\r\nsavedInstanceState: Bundle<\/span>?\r\n)<\/span><\/span>: View {\r\n_binding = FragmentImagesBinding.inflate(inflater, container, false<\/span>)\r\nreturn<\/span> binding.root\r\n\r\n}\r\n\r\noverride<\/span> fun<\/span> onViewCreated<\/span>(view: View<\/span>, savedInstanceState: Bundle<\/span>?)<\/span><\/span> {\r\nsuper<\/span>.onViewCreated(view, savedInstanceState)\r\ninit<\/span>()\r\nsetupUi()\r\nlifecycleScope.launch {\r\nviewModel.fetchImages().distinctUntilChanged().collectLatest {\r\nadapter.submitData(it)\r\n}\r\n}\r\n}\r\n\r\noverride<\/span> fun<\/span> onDestroyView<\/span>()<\/span><\/span> {\r\nsuper<\/span>.onDestroyView()\r\n_binding = null<\/span>\r\n}\r\n\r\nprivate<\/span> fun<\/span> init<\/span>()<\/span><\/span> {\r\nviewModel = defaultViewModelProviderFactory.create(ImagesViewModel::class<\/span>.java)\r\nadapter = ImagesAdapter()\r\nloaderAdapter = LoaderStateAdapter()\r\n}\r\n\r\nprivate<\/span> fun<\/span> setupUi<\/span>()<\/span><\/span> {\r\nval<\/span> manager = GridLayoutManager(context, 2<\/span>)\r\n\r\nbinding.rvImages.layoutManager = manager\r\nbinding.rvImages.adapter = adapter.withLoadStateFooter(loaderAdapter)\r\n\r\n}\r\n}<\/pre>\n![](\"\/blog\/wp-ttn-blog\/uploads\/2024\/01\/1DcPckg7b6zZAoUkq2TKiug.gif\")
<\/p>\n