Android ViewPager2 setPageMargin unresolved
MarginPageTransformer
cannot help your need.
You must use custom setPageTrarnsformer.
Step 1
Here is my Extension Method for this.
you can check detail in this articleMedium article
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 } }}
Step 2
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>
Step 3
set your side margin of layout item in your xml.
like this
<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">
Now we need to use setPageTransformer()
in Version 1.0.0-alpha05
New features
ItemDecorator
introduced with a behaviour consistent with RecyclerView.MarginPageTransformer
introduced to provide an ability to create space between pages (outside of page inset).CompositePageTransformer
introduced to provide an ability to combine multiple PageTransformers.
SAMPLE CODE
myViewPager2.setPageTransformer(new MarginPageTransformer(1500));
Check out my previous answer if you want to implement Carousel using View Pager2
I used MJ Studio's approach to create my custom PageTransformer
that also changes the page margin as follows:
class OffsetPageTransformer( @Px private val offsetPx: Int, @Px private val pageMarginPx: Int) : ViewPager2.PageTransformer { override fun transformPage(page: View, position: Float) { val viewPager = requireViewPager(page) val offset = position * -(2 * offsetPx + pageMarginPx) val totalMargin = offsetPx + pageMarginPx if (viewPager.orientation == ViewPager2.ORIENTATION_HORIZONTAL) { page.updateLayoutParams<ViewGroup.MarginLayoutParams> { marginStart = totalMargin marginEnd = totalMargin } page.translationX = if (ViewCompat.getLayoutDirection(viewPager) == ViewCompat.LAYOUT_DIRECTION_RTL) { -offset } else { offset } } else { page.updateLayoutParams<ViewGroup.MarginLayoutParams> { topMargin = totalMargin bottomMargin = totalMargin } page.translationY = offset } } private fun requireViewPager(page: View): ViewPager2 { val parent = page.parent val parentParent = parent.parent if (parent is RecyclerView && parentParent is ViewPager2) { return parentParent } throw IllegalStateException( "Expected the page view to be managed by a ViewPager2 instance." ) }}
That way you can just call:
viewPager.setPageTransformer(OffsetPageTransformer(offsetPx, pageMarginPx))