Skip to main content

How to load data asynchronously with ViewPager2 in Kotlin Android

How to load data asynchronously with ViewPager2 in Kotlin Android.

Here's a step-by-step tutorial on how to load data asynchronously with ViewPager2 in Kotlin Android.

Step 1: Set up the project

Create a new Android project in Android Studio and add the necessary dependencies for ViewPager2 to your app-level build.gradle file:

implementation 'androidx.viewpager2:viewpager2:1.0.0'

Step 2: Create the layout

In your XML layout file, add a ViewPager2 widget to display the data asynchronously. For example, you can create a ViewPager2 with a RecyclerView as the item layout:

android:layout_height="match_parent" />

Step 3: Create the data model

Create a data class to represent the items you want to display in the ViewPager2. This data class should contain all the necessary information for each item. For example:

data class Item(val id: Int, val name: String)

Step 4: Create the adapter

Create an adapter class that extends RecyclerView.Adapter and RecyclerView.ViewHolder. This adapter will be responsible for binding the data to the ViewPager2.

class ItemAdapter(private val items: List<Item>) : RecyclerView.Adapter<ItemAdapter.ItemViewHolder>() {

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
return ItemViewHolder(view)

override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
val item = items[position]

override fun getItemCount() = items.size

inner class ItemViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bind(item: Item) {
// Bind the item data to the views
itemView.findViewById<TextView>( =

Step 5: Load data asynchronously

In your activity or fragment, create a function to load the data asynchronously. This function can use coroutines to perform the asynchronous operation. For example:

private fun loadDataAsync() {
// Show loading indicator

// Start a coroutine to load the data asynchronously
CoroutineScope(Dispatchers.Main).launch {
try {
// Simulate loading data from a remote source

// Retrieve the data
val data = retrieveData()

// Create the adapter with the loaded data
val adapter = ItemAdapter(data)

// Set the adapter to the ViewPager2
viewPager2.adapter = adapter
} catch (e: Exception) {
// Handle any errors
} finally {
// Hide the loading indicator

private suspend fun retrieveData(): List<Item> {
// Simulate loading data from a remote source

// Return the loaded data
return listOf(
Item(1, "Item 1"),
Item(2, "Item 2"),
Item(3, "Item 3")

private fun showLoadingIndicator() {
// Show a loading indicator to the user
// (e.g., display a progress bar)

private fun hideLoadingIndicator() {
// Hide the loading indicator

private fun showError(errorMessage: String?) {
// Display an error message to the user

Step 6: Call the loadDataAsync function

Finally, call the loadDataAsync function in your activity's onCreate method or fragment's onViewCreated method to load the data asynchronously:

override fun onCreate(savedInstanceState: Bundle?) {


That's it! You have now implemented loading data asynchronously with ViewPager2 in Kotlin Android. The data will be loaded in the background, and the ViewPager2 will be updated with the loaded data once it's available.