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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

50% Discounts On Projects

Do you have a custom project with a clear requirements, we are currently giving a 50% discount on all projects.

We will work with you to ensure we deliver what you need.

If you have questions or want to chat with us, you can reach us on Skype (henry.tochi)

Languages and technologies we use - Java, Kotlin, Laravel, Vue, React, Flutter, Swift and more.