How to handle ViewPager2 item selection in Kotlin Android

How to handle ViewPager2 item selection in Kotlin Android.

Here's a step-by-step tutorial on how to handle ViewPager2 item selection in Kotlin for Android.

Step 1: Setup ViewPager2

First, you'll need to set up the ViewPager2 in your layout XML file. Add the following code to your activity layout file (e.g., activity_main.xml):

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

Step 2: Create Adapter

Next, create an adapter class that extends RecyclerView.Adapter. This adapter will be responsible for providing the data to the ViewPager2. Here's an example:

class MyAdapter(private val items: List<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

    var selectedItem = 0

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // Your ViewHolder implementation
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        // Create and return your ViewHolder
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        // Bind data to your ViewHolder
    }

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

Step 3: Set Adapter to ViewPager2

In your activity or fragment, set the adapter to the ViewPager2. Here's an example:

val viewPager: ViewPager2 = findViewById(R.id.viewPager)
val adapter = MyAdapter(items)
viewPager.adapter = adapter

Step 4: Handle Item Selection

To handle item selection, you'll need to add a click listener to each item in the ViewPager2. Modify the onCreateViewHolder method in your adapter to include the click listener:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
    val viewHolder = ViewHolder(view)
    
    viewHolder.itemView.setOnClickListener {
        val position = viewHolder.adapterPosition
        selectedItem = position
        notifyDataSetChanged()
        
        // Handle item selection logic here
    }
    
    return viewHolder
}

Step 5: Update UI on Item Selection

To update the UI when an item is selected, add logic to your onBindViewHolder method in the adapter:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    // Bind data to your ViewHolder
    
    if (position == selectedItem) {
        // Apply selected state UI changes
    } else {
        // Apply default state UI changes
    }
}

Step 6: Access Selected Item

If you need to access the selected item from outside the adapter, you can create a method in your adapter to return the selected item:

fun getSelectedItem(): String {
    return items[selectedItem]
}

Now you can call getSelectedItem() on your adapter instance to get the selected item.

That's it! You've now learned how to handle ViewPager2 item selection in Kotlin for Android.