Kotlin Create Slider With Page Indicator Using ViewPager Example

Kotlin Create Slider With Page Indicator Using ViewPager Example

Viewpager  we can do a lot of things, from the simplest navigation, to the page menu and so on. Then how to use it, similar to ListView, we also need an adapter, which is PagerAdapter

In this post we are going to see  page indicator on slider that are created using viewpager

Kotlin Create Slider With Page Indicator Using ViewPager Example

Step 1:Creat application in Android Stuido

Step 2: Create a model class which contains Slider item

import java.io.Serializable

class ViewItem : Serializable {
    var imageId: Int
    internal set
    var imageDrawable: Int
    internal set

            constructor(id: Int, drawable: Int) {
                this.imageId = id
                this.imageDrawable = drawable
            }
}

 

Step 3: Create Pager Adapter

class ViewPagerAdapter(internal var context: Context, internal var itemList: List<ViewItem>) : PagerAdapter() {

    internal var mLayoutInflater: LayoutInflater
    private var pos = 0

    init {
        mLayoutInflater = this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
    }

    override fun getCount(): Int {
        return Integer.MAX_VALUE
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val holder = ViewHolder()
        val itemView = mLayoutInflater.inflate(R.layout.layout_item_view_pager, container, false)
        holder.itemImage = itemView.findViewById(R.id.img_slider) as ImageView

        if (pos > this.itemList.size - 1)
            pos = 0

        holder.sliderItem = this.itemList[pos]
        holder.itemImage.setImageDrawable(context.getDrawable(holder.sliderItem.imageDrawable))

        (container as ViewPager).addView(itemView)

        holder.itemImage.scaleType = ImageView.ScaleType.FIT_XY

        pos++
        return itemView
    }

    internal class ViewHolder {
        lateinit var sliderItem: ViewItem
        lateinit var itemImage: ImageView
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as RelativeLayout)
    }

    override fun isViewFromObject(arg0: View, arg1: Any): Boolean {
        return arg0 === arg1 as View
    }

    override fun destroyItem(arg0: View, arg1: Int, arg2: Any) {
        (arg0 as ViewPager).removeView(arg2 as View)
    }
}

 

ViewPager adapter is PagerAdapter, which is the base class that provides the adapter to fill the page ViewPager's internals. You may want to use a more specific implementation, such as FragmentPagerAdapter or FragmentStatePagerAdapter. It needs to be explained here, in fact, ViewPager should be used with Fragment, at least Google officially thinks so, but under 3.0, we do not need to do so. Note that when you implement a PagerAdapter, you must at least override the following methods:

  • instantiateItem(ViewGroup, int)
  • destroyItem(ViewGroup, int, Object)
  • getCount()
  • isViewFromObject(View, Object)

Step 4:
Add Adapter view item layout_item_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

    <ImageView
            android:id="@+id/img_slider"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY" />

</LinearLayout>

 

Step 5: 
 Update activity_main.xml with Viewpager and page indicator layout

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

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <androidx.viewpager.widget.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="true"
                android:focusableInTouchMode="true" />

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

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
 

 

Step 6:
 Addrequired Resourses to the application

Step 7:
 Add Adapter to Viewpager

fun initUI()
    {
        listViews=ArrayList<ViewItem>()
        listViews.add(ViewItem(1,R.drawable.t1))
        listViews.add(ViewItem(2,R.drawable.t2))
        listViews.add(ViewItem(3,R.drawable.t3))
        listViews.add(ViewItem(4,R.drawable.t4))
        listViews.add(ViewItem(5,R.drawable.t5))

        adapter= ViewPagerAdapter(applicationContext,listViews)
        view_pager.adapter=adapter
    }

 

Step 8: Add PageIndicators to page

fun addPageIndicators()
    {
        lyt_page_indicator.removeAllViews()
        for (i in listViews.indices) {
            val view = ImageView(applicationContext)
            view.setImageResource(R.drawable.inactive)

            lyt_page_indicator.addView(view)
        }
        updatePageIndicator(currentIndex)
    }

 

Step 9:
    Update PageIndicator on Page Selection

fun updatePageIndicator(position: Int) {
        var imageView: ImageView

        val lp =
            LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
        lp.setMargins(5, 0, 5, 0)
        for (i in 0 until lyt_page_indicator.getChildCount()) {
            imageView = lyt_page_indicator.getChildAt(i) as ImageView
            imageView.setLayoutParams(lp)
            if (position == i) {
                imageView.setImageResource(R.drawable.active)
            } else {
                imageView.setImageResource(R.drawable.inactive)
            }
        }
    }

 

Complete MainActivity code

package com.rrtutors.kotlinviewpager

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import android.widget.LinearLayout
import android.widget.ImageView
import androidx.viewpager.widget.ViewPager


class MainActivity : AppCompatActivity() {

    lateinit var listViews:ArrayList<ViewItem>
    lateinit var adapter:ViewPagerAdapter
    var currentIndex:Int=0;
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initUI()
    }

    fun initUI()
    {
        listViews=ArrayList<ViewItem>()
        listViews.add(ViewItem(1,R.drawable.t1))
        listViews.add(ViewItem(2,R.drawable.t2))
        listViews.add(ViewItem(3,R.drawable.t3))
        listViews.add(ViewItem(4,R.drawable.t4))
        listViews.add(ViewItem(5,R.drawable.t5))

        adapter= ViewPagerAdapter(applicationContext,listViews)
        view_pager.adapter=adapter
        addPageIndicators()
        view_pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
            override fun onPageScrollStateChanged(state: Int) {

            }

            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {

            }

            override fun onPageSelected(position: Int) {
                updatePageIndicator(position)
            }
        })
    }

    fun addPageIndicators()
    {
        lyt_page_indicator.removeAllViews()
        for (i in listViews.indices) {
            val view = ImageView(applicationContext)
            view.setImageResource(R.drawable.inactive)

            lyt_page_indicator.addView(view)
        }
        updatePageIndicator(currentIndex)
    }
    fun updatePageIndicator(position: Int) {
        var imageView: ImageView

        val lp =
            LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
        lp.setMargins(5, 0, 5, 0)
        for (i in 0 until lyt_page_indicator.getChildCount()) {
            imageView = lyt_page_indicator.getChildAt(i) as ImageView
            imageView.setLayoutParams(lp)
            if (position == i) {
                imageView.setImageResource(R.drawable.active)
            } else {
                imageView.setImageResource(R.drawable.inactive)
            }
        }
    }
}

 


Android