fun ViewPager2.setShowSideItems(pageMarginPx : Int, offsetPx : Int) {
clipToPadding = false
clipChildren = false
offscreenPageLimit = 3
setPageTransformer { page, position ->
val offset = position * -(2 * offsetPx + pageMarginPx)
if (this.orientation == ViewPager2.ORIENTATION_HORIZONTAL) {
if (ViewCompat.getLayoutDirection(this) == ViewCompat.LAYOUT_DIRECTION_RTL) {
page.translationX = -offset
} else {
page.translationX = offset
}
} else {
page.translationY = offset
}
}
}
set pageMarginPx and offsetPx with your use case.
<resources>
<dimen name="pageMargin">20dp</dimen>
<dimen name="pagerOffset">30dp</dimen>
<dimen name="pageMarginAndoffset">50dp</dimen>
</resources>
set your side margin of layout item in your xml.
<androidx.cardview.widget.CardView
app:cardCornerRadius="12dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="@dimen/pageMarginAndoffset"
android:layout_marginRight="@dimen/pageMarginAndoffset"
android:layout_width="match_parent"
android:layout_height="match_parent">
sample viewpager and usage
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/fpc_promo_panels_vp"
android:layout_width="0dp"
android:layout_height="310dp"
android:clipToPadding="false"
android:clipChildren="false"
android:paddingTop="20dp"
android:paddingBottom="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/fpc_search_brand_container_cv"/>
fpc_promo_panels_vp.run {
adapter = PromoPanelsAdapter(panels, onPanelClickedListener)
setShowSideItems(resources.getDimensionPixelOffset(R.dimen.pageMargin), resources.getDimensionPixelOffset(R.dimen.pagerOffset))
}