1. Tutorials
  2. Android

Android ViewPager2: Horizontal Show Partial Preview of Left and Right

August 3, 2019

Setup Horizontal ViewPage2.

viewPager.apply {
    clipToPadding = false   // allow full width shown with padding
    clipChildren = false    // allow left/right item is not clipped
    offscreenPageLimit = 2  // make sure left/right item is rendered
}

// increase this offset to show more of left/right
val offsetPx = 30.dpToPx(resources.displayMetrics)
viewPager.setPadding(offsetPx, 0, offsetPx, 0)

// increase this offset to increase distance between 2 items
val pageMarginPx = 10.dpToPx(resources.displayMetrics)
val marginTransformer = MarginPageTransformer(pageMarginPx)
viewPager.setPageTransformer(marginTransformer)

NOTE: Convert Dp to Pixel - dpToPx

NOTE: I am using androidx.viewpager2:viewpager2:1.0.0-beta02

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.