Viewpager2 left and right preview item scrolling not working

Question

I am trying to create an image slider using ViewPager2 with left and right previews. Everything is working perfectly, but scrolling on left and right preview items is not working.

There is a similar question, but it's not working for me as well.

Above image copied from here.

Sample XML code

<androidx.viewpager2.widget.ViewPager2 
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:clipChildren="false"
    android:paddingEnd="60dp"
    android:paddingStart="60dp" />

Answer 1

Single Line Implementation with Kotlin Extention for ViewPager2

1. Single Line Implementation in your Activity or Fragment.

   binding.viewpager2.setPreviewBothSide(R.dimen._20sdp,R.dimen._35sdp)
   

2. Add Below Code in HorizontalMarginItemDecoration.kt file in your Project

   import android.content.Context
   import android.graphics.Rect
   import android.view.View
   import androidx.annotation.DimenRes
   import androidx.recyclerview.widget.RecyclerView
   import androidx.viewpager2.widget.ViewPager2
   
   class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
       RecyclerView.ItemDecoration() {
       private val horizontalMarginInPx: Int =
           context.resources.getDimension(horizontalMarginInDp).toInt()
   
       override fun getItemOffsets(
           outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
       ) {
           outRect.right = horizontalMarginInPx
           outRect.left = horizontalMarginInPx
       }
   }
   
   fun ViewPager2.setPreviewBothSide(@DimenRes nextItemVisibleSize: Int,@DimenRes currentItemHorizontalMargin: Int) {
       this.offscreenPageLimit = 1
       val nextItemVisiblePx = resources.getDimension(nextItemVisibleSize)
       val currentItemHorizontalMarginPx = resources.getDimension(currentItemHorizontalMargin)
       val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
       val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
           page.translationX = -pageTranslationX * position
           page.scaleY = 1 - (0.25f * kotlin.math.abs(position))
       }
       this.setPageTransformer(pageTransformer)
   
       val itemDecoration = HorizontalMarginItemDecoration(
           context,
           currentItemHorizontalMargin
       )
       this.addItemDecoration(itemDecoration)
   }
   

3. And Yes Here you got this Amazing Output

   

   You Can Also Check out my Answer Here