Android ViewPager2 setPageMargin unresolved Android ViewPager2 setPageMargin unresolved android android

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))