How to Use ViewPager in Android: Simple Guide with Example

To use ViewPager in Android, add it to your layout and supply a PagerAdapter that manages the pages. The ViewPager2 is the modern version that supports vertical swiping and RecyclerView features.

Syntax

The basic syntax involves adding a ViewPager2 widget in your XML layout and creating a RecyclerView.Adapter or FragmentStateAdapter to supply pages.

Key parts:

• ViewPager2: The container that allows swiping.
• Adapter: Supplies the pages (views or fragments).
• FragmentStateAdapter: Adapter for fragments, recommended for dynamic pages.

xml

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Output

A full-screen swipeable container appears in the app UI.

Example

This example shows how to use ViewPager2 with FragmentStateAdapter to swipe between three simple fragments.

kotlin

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager = findViewById<ViewPager2>(R.id.viewPager)
        val adapter = ScreenSlidePagerAdapter(this)
        viewPager.adapter = adapter
    }
}

class ScreenSlidePagerAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 3

    override fun createFragment(position: Int): Fragment =
        when (position) {
            0 -> ScreenFragment.newInstance("Page 1")
            1 -> ScreenFragment.newInstance("Page 2")
            else -> ScreenFragment.newInstance("Page 3")
        }
}

class ScreenFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val text = arguments?.getString(ARG_TEXT) ?: ""
        val textView = TextView(requireContext())
        textView.text = text
        textView.gravity = Gravity.CENTER
        textView.textSize = 24f
        return textView
    }

    companion object {
        private const val ARG_TEXT = "arg_text"
        fun newInstance(text: String) = ScreenFragment().apply {
            arguments = Bundle().apply { putString(ARG_TEXT, text) }
        }
    }
}

Output

App shows a screen with text "Page 1" initially; swiping left/right changes to "Page 2" and "Page 3".

Common Pitfalls

Common mistakes when using ViewPager include:

• Using the old ViewPager instead of ViewPager2.
• Not setting an adapter, so no pages appear.
• Using FragmentPagerAdapter which keeps all fragments in memory, causing memory issues.
• Not handling fragment lifecycle properly, leading to crashes or stale data.

kotlin

/* Wrong: Using old ViewPager and FragmentPagerAdapter (legacy) */
val viewPager = findViewById<ViewPager>(R.id.viewPager)
viewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getCount() = 3
    override fun getItem(position: Int) = MyFragment()
}

/* Right: Use ViewPager2 and FragmentStateAdapter */
val viewPager2 = findViewById<ViewPager2>(R.id.viewPager)
viewPager2.adapter = ScreenSlidePagerAdapter(this)

Key Takeaways

Use ViewPager2 instead of the old ViewPager for better features and support.

Create a FragmentStateAdapter to manage pages efficiently.

Add ViewPager2 to your layout XML and set its adapter in code.

Each page can be a fragment or a view depending on your adapter choice.

Remember to handle lifecycle properly when using fragments in ViewPager2.