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 { constructor(id: Int, drawable: Int) { Step 3: Create Pager Adapter class ViewPagerAdapter(internal var context: Context, internal var itemList: List<ViewItem>) : PagerAdapter() { internal var mLayoutInflater: LayoutInflater init { override fun getCount(): Int { override fun instantiateItem(container: ViewGroup, position: Int): Any { if (pos > this.itemList.size - 1) holder.sliderItem = this.itemList[pos] (container as ViewPager).addView(itemView) holder.itemImage.scaleType = ImageView.ScaleType.FIT_XY pos++ internal class ViewHolder { override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) { override fun isViewFromObject(arg0: View, arg1: Any): Boolean { override fun destroyItem(arg0: View, arg1: Int, arg2: Any) { 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: Step 4: <?xml version="1.0" encoding="utf-8"?> <ImageView </LinearLayout> Step 5: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout <androidx.viewpager.widget.ViewPager <LinearLayout </RelativeLayout> </androidx.constraintlayout.widget.ConstraintLayout> Step 6: Step 7: fun initUI() adapter= ViewPagerAdapter(applicationContext,listViews) Step 8: Add PageIndicators to page fun addPageIndicators() lyt_page_indicator.addView(view) Step 9: fun updatePageIndicator(position: Int) { val lp = Complete MainActivity code package com.rrtutors.kotlinviewpager import androidx.appcompat.app.AppCompatActivity lateinit var listViews:ArrayList<ViewItem> fun initUI() adapter= ViewPagerAdapter(applicationContext,listViews) } override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { } override fun onPageSelected(position: Int) { fun addPageIndicators() lyt_page_indicator.addView(view) val lp =
var imageId: Int
internal set
var imageDrawable: Int
internal set
this.imageId = id
this.imageDrawable = drawable
}
}
private var pos = 0
mLayoutInflater = this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
}
return Integer.MAX_VALUE
}
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
pos = 0
holder.itemImage.setImageDrawable(context.getDrawable(holder.sliderItem.imageDrawable))
return itemView
}
lateinit var sliderItem: ViewItem
lateinit var itemImage: ImageView
}
container.removeView(`object` as RelativeLayout)
}
return arg0 === arg1 as View
}
(arg0 as ViewPager).removeView(arg2 as View)
}
}
Add Adapter view item layout_item_view_pager.xml
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/img_slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
Update activity_main.xml with Viewpager and page indicator layout
<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">
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true" />
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>
Addrequired Resourses to the application
Add Adapter to Viewpager
{
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))
view_pager.adapter=adapter
}
{
lyt_page_indicator.removeAllViews()
for (i in listViews.indices) {
val view = ImageView(applicationContext)
view.setImageResource(R.drawable.inactive)
}
updatePageIndicator(currentIndex)
}
Update PageIndicator on Page Selection
var imageView: ImageView
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)
}
}
}
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 adapter:ViewPagerAdapter
var currentIndex:Int=0;
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
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))
view_pager.adapter=adapter
addPageIndicators()
view_pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
override fun onPageScrollStateChanged(state: Int) {
updatePageIndicator(position)
}
})
}
{
lyt_page_indicator.removeAllViews()
for (i in listViews.indices) {
val view = ImageView(applicationContext)
view.setImageResource(R.drawable.inactive)
}
updatePageIndicator(currentIndex)
}
fun updatePageIndicator(position: Int) {
var imageView: ImageView
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)
}
}
}
}
531 Views