How to implement ViewPager2 in Kotlin Android

How to implement ViewPager2 in Kotlin Android.

Here is a detailed step-by-step tutorial on how to implement ViewPager2 in Kotlin Android:

Step 1: Set up your project

1. Create a new project in Android Studio.
2. Choose an appropriate project name, package name, and other project settings.
3. Select Kotlin as the programming language.

Step 2: Add the ViewPager2 dependency

1. Open your app-level build.gradle file.
2. Add the following line to the dependencies block:

implementation 'androidx.viewpager2:viewpager2:1.0.0'

3. Sync your project to download the dependency.

Step 3: Create the layout file

1. Open the activity_main.xml file in the layout folder.
2. Replace the existing code with the following code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. Save the file.

Step 4: Create the adapter class

1. Right-click on the package where you want to create the adapter class.
2. Select New -> Kotlin File/Class.
3. Enter the name "ViewPagerAdapter" for the class and click OK.
4. Replace the existing code with the following code:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView

class ViewPagerAdapter(private val images: List<Int>) :
    RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageView)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.imageView.setImageResource(images[position])
    }

    override fun getItemCount(): Int {
        return images.size
    }
}

5. Save the file.

Step 5: Create the item layout file

1. Right-click on the res folder.
2. Select New -> Android Resource File.
3. Enter the name "item_image" for the file and click OK.
4. Select "Layout" as the resource type and click OK.
5. Replace the existing code with the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/placeholder" />

</LinearLayout>

6. Save the file.

Step 6: Update the MainActivity

1. Open the MainActivity.kt file.
2. Replace the existing code with the following code:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2

class MainActivity : AppCompatActivity() {

    private lateinit var viewPager: ViewPager2
    private val images = listOf(
        R.drawable.image1,
        R.drawable.image2,
        R.drawable.image3
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPager = findViewById(R.id.viewPager)
        val adapter = ViewPagerAdapter(images)
        viewPager.adapter = adapter
    }
}

3. Save the file.

Step 7: Add images to the drawable folder

1. Copy the images you want to display in the ViewPager2.
2. Right-click on the res folder.
3. Select New -> Image Asset.
4. Choose "Image" as the asset type and click Next.
5. Click on "Path" to browse and select the image file.
6. Click Next and Finish to add the image to the drawable folder.
7. Repeat these steps for each image you want to add.

That's it! You have successfully implemented ViewPager2 in your Kotlin Android project.