- First of all you have to take layout file . In my case i have taken activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/indicatorLayout"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:id="@+id/indicatorLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:layout_marginBottom="16dp"/>
</RelativeLayout>
- then i took item layout file for viewpager name is item_view_pager.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main"
android:padding="16dp">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Page content"
android:textSize="24sp"
android:layout_centerInParent="true"/>
</RelativeLayout> - Then i took drawable file for active and inactive
indicator_active.xml<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#000000" />
<corners android:radius="6dp" />
<size
android:width="12dp"
android:height="12dp" />
</shape>
indicator_inactive.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#D3D3D3" />
<corners android:radius="6dp" />
<size
android:width="12dp"
android:height="12dp" />
</shape>
- Then i have took ViewPagerAdapter.kt
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.shaadibyaah.R
class ViewPagerAdapter(private val items: List<String>) : RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view_pager, parent, false)
return ViewHolder(view)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.bind(items[position])
}
override fun getItemCount(): Int = items.size
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
private val textView: TextView = itemView.findViewById(R.id.textView)
fun bind(item: String) {
textView.text = item
}
}
} - Then took ZoomOutPageTransformer.kt
package com.example.shaadibyaah.util
import android.view.View
import androidx.viewpager2.widget.ViewPager2
import kotlin.math.abs
class ZoomOutPageTransformer : ViewPager2.PageTransformer {
override fun transformPage(view: View, position: Float) {
view.apply {
val pageWidth = width
val pageHeight = height
when {
position < -1 -> { // [-Infinity,-1)
// This page is way off-screen to the left.
alpha = 0f
}
position <= 1 -> { // [-1,1]
// Modify the default slide transition to shrink the page as well
val scaleFactor = 0.85f.coerceAtLeast(1 - abs(position))
val vertMargin = pageHeight * (1 - scaleFactor) / 2
val horzMargin = pageWidth * (1 - scaleFactor) / 2
translationX = if (position < 0) {
horzMargin - vertMargin / 2
} else {
horzMargin + vertMargin / 2
}
// Scale the page down (between MIN_SCALE and 1)
scaleX = scaleFactor
scaleY = scaleFactor
// Fade the page relative to its size.
alpha = 0.5f + (scaleFactor - 0.85f) / (1 - 0.85f) * (1 - 0.5f)
}
else -> { // (1,+Infinity]
// This page is way off-screen to the right.
alpha = 0f
}
}
}
}
} - Now in MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var viewPager: ViewPager2
private lateinit var indicatorLayout: LinearLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// enableEdgeToEdge()
setContentView(R.layout.activity_main)
viewPager = findViewById(R.id.viewPager)
indicatorLayout = findViewById(R.id.indicatorLayout)
val items = listOf("Page 1", "Page 2", "Page 3")
val adapter = ViewPagerAdapter(items)
viewPager.adapter = adapter
viewPager.setPageTransformer(ZoomOutPageTransformer())
setupIndicator(items.size)
setCurrentIndicator(0)
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
setCurrentIndicator(position)
}
})
// viewPager.setPageTransformer(ZoomOutPageTransformer())
}
private fun setupIndicator(count: Int) {
val indicators = arrayOfNulls<ImageView>(count)
val layoutParams = LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT
)
layoutParams.setMargins(8, 0, 8, 0)
for (i in indicators.indices) {
indicators[i] = ImageView(this)
indicators[i]?.let {
it.setImageDrawable(
AppCompatResources.getDrawable(this, R.drawable.indicator_inactive)
)
it.layoutParams = layoutParams
indicatorLayout.addView(it)
}
}
}
private fun setCurrentIndicator(index: Int) {
val childCount = indicatorLayout.childCount
for (i in 0 until childCount) {
val imageView = indicatorLayout.getChildAt(i) as ImageView
if (i == index) {
AppCompatResources.getDrawable(this, R.drawable.indicator_active)
imageView.scaleX = 1.5f
imageView.scaleY = 1.5f
} else {
AppCompatResources.getDrawable(this, R.drawable.indicator_inactive)
imageView.scaleX = 1f
imageView.scaleY = 1f
}
}
}
}- So, This way you can achieve viewpager functionality.
0 Comments