How to add indicator dots with ViewPager2 in Kotlin Android

How to add indicator dots with ViewPager2 in Kotlin Android.

Here's a step-by-step tutorial on how to add indicator dots with ViewPager2 in Kotlin Android:

Step 1: Set up your project

Start by creating a new Android project in Kotlin. Open the build.gradle file for your app module and make sure you have the following dependencies:

implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'

Sync your project to ensure the dependencies are downloaded.

Step 2: Create the ViewPager2 layout

In your activity's layout XML file, add a ViewPager2 and a LinearLayout to hold the indicator dots. For example:

<LinearLayout
    android:id="@+id/indicatorLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:orientation="horizontal">

    <!-- Add indicator dots here -->
</LinearLayout>

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

Step 3: Create the indicator dot drawable

Create a new XML file in your res/drawable directory for the indicator dot drawable. For example, create a file named indicator_dot.xml with the following content:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#CCCCCC" />
    <size
        android:width="8dp"
        android:height="8dp" />
</shape>

This drawable defines a circular shape with a solid color and a size of 8dp.

Step 4: Create the adapter for the ViewPager2

Create a new Kotlin class for your ViewPager2 adapter. This adapter will provide the content for the ViewPager2 and handle the creation of indicator dots.

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

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

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.bind(item)
    }

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

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(item: String) {
            // Bind data to views in the item layout
        }
    }
}

In this example, MyPagerAdapter is a simple adapter that takes a list of items as input. You can customize it to fit your needs.

Step 5: Initialize the ViewPager2 and indicator dots

In your activity or fragment, initialize the ViewPager2 and indicator dots. Here's an example:

val viewPager: ViewPager2 = findViewById(R.id.viewPager)
val indicatorLayout: LinearLayout = findViewById(R.id.indicatorLayout)

val items = listOf("Page 1", "Page 2", "Page 3")
val adapter = MyPagerAdapter(items)
viewPager.adapter = adapter

// Create indicator dots
val indicatorDots = arrayOfNulls<ImageView>(items.size)
val params: LinearLayout.LayoutParams =
    LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT
    )
params.setMargins(8, 0, 8, 0)

for (i in items.indices) {
    indicatorDots[i] = ImageView(this)
    indicatorDots[i]?.setImageDrawable(
        ContextCompat.getDrawable(
            this,
            R.drawable.indicator_dot
        )
    )
    indicatorDots[i]?.layoutParams = params
    indicatorLayout.addView(indicatorDots[i])
}

// Set initial indicator dot
indicatorDots[0]?.isSelected = true

// Add a ViewPager2.OnPageChangeCallback to update the indicator dots
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        for (i in items.indices) {
            indicatorDots[i]?.isSelected = i == position
        }
    }
})

In this example, we use the ViewPager2.OnPageChangeCallback to update the selected indicator dot when the page changes.

That's it! You've successfully added indicator dots with ViewPager2 in Kotlin Android.