How to dynamically add and remove view from ViewPager in Kotlin

In this android kotlin source code example, we are going to dynamically add and remove view from ViewPager in Kotlin.

You can copy and adopt this source code example to your Kotlin android project without reinventing the wheel.

Below is a step by step source code to dynamically add and remove view from ViewPager in Kotlin.

activity_main.xml

<?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=".ViewPager.ViewPagerActivity11">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPager
import com.bluapp.kotlinview.R


class ViewPagerActivity11 : AppCompatActivity() {
    private var viewPager: ViewPager? = null
    private var myAdapter: MyAdapter? = null


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_pager11)
        viewPager = findViewById(R.id.viewpager) as ViewPager
        myAdapter = MyAdapter()
        viewPager!!.adapter = myAdapter
        val inflater = layoutInflater
        val constraintLayout = inflater.inflate(R.layout.viewpager_item11, null) as ConstraintLayout
        myAdapter!!.addView(constraintLayout, 0)
        myAdapter!!.notifyDataSetChanged()

    }

    fun addView(newPage: View?) {
        val pageindex: Int = myAdapter!!.addView(newPage!!)
        viewPager!!.setCurrentItem(pageindex, true)
    }

    fun removeView(defunctPage: View?) {
        var pageindex: Int = myAdapter!!.removeView(viewPager, defunctPage)
        if (pageindex == myAdapter!!.getCount()) pageindex--
        viewPager!!.currentItem = pageindex
    }

    fun getCurrentPage(): View? {
        return myAdapter!!.getView(viewPager!!.currentItem)
    }

    fun setCurrentPage(pageToShow: View?) {
        viewPager!!.setCurrentItem(myAdapter!!.getItemPosition(pageToShow!!), true)
    }

    private class MyAdapter : PagerAdapter() {
        private val views: MutableList<View> = mutableListOf<View>()

        override fun getItemPosition(`object`: Any): Int {
            val index = views.indexOf(`object`)
            return if (index == -1) POSITION_NONE else index
        }

        override fun instantiateItem(container: ViewGroup, position: Int): Any {
            val view: View = views[position]
            container.addView(view)
            return view
        }

        override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
            container.removeView(views[position])
        }

        override fun getCount(): Int {
            return views.size
        }

        override fun isViewFromObject(view: View, `object`: Any): Boolean {
            return view === `object`
        }

        fun addView(view: View): Int {
            return addView(view, views.size)
        }

        fun addView(view: View, position: Int): Int {
            views.add(position, view)
            return position
        }

        fun removeView(pager: ViewPager?, view: View?): Int {
            return removeView(pager!!, views.indexOf(view))
        }

        fun removeView(pager: ViewPager, position: Int): Int {
            pager.adapter = null
            views.removeAt(position)
            pager.adapter = this
            return position
        }

        fun getView(position: Int): View {
            return views[position]
        }
    }
}

viewpager_item11.xml

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

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Dynamically Add View and Remove View"
        android:gravity="center"
        android:textSize="15sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment