RecyclerView di ViewPager2

Setelah dengar kabar ViewPager2 versi alphanya sudah rilis, saya excited banget nih pengen cobain soalnya akan menggunakan RecyclerView yang dapat mendongkrak banyak peningkatan. Namun sayangnya belum sempat mencobanya karena padatnya jadwal sekolah sejak februari lalu. So lets get into it!

Apa Yang baru ?

• Right-to-left (RTL) layout support
• Vertical orientation support
• notifyDataSetChanged fully functional (VP1 bugs addressed)

Apa Yang Berubah ?

• FragmentStateAdapter replaces FragmentStatePagerAdapter
• RecyclerView.Adapter replaces PagerAdapter (YEAYY)
• registerOnPageChangeCallback replaces addPageChangeListener

Mari kita coba gunakan ini dengan sekenario yang sering digunakan di RecyclerView (Menampilan data dari model data dalam ArrayList), di sini saya menggunakan kotlin (Link source code project ada di akhir artikel ini, jadi baca sampai akhir ya)

Import Dulu Dong

Import ViewPager2 dengan cara masukan ini ke dependencies di build.gradle (Module: app)

implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01"

Persiapan Layout

Mari kita buat Activity/Fragment baru lalu pasangkan ViewPager2 ke layout kita

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

Lalu siapkan pula layout yang akan ditampilkan di ViewPager nanti

vp_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_item"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="Hey" />
</FrameLayout>

Mulai Coding

Mari kita buat model datanya terlebih dahulu

PageModel.kt

data class PageModel(var message:String, var color:Int)

Selanjutnya, kita buat adapter. Tidak perlu tambah yang aneh aneh, kamu cukup buat adapter seperti adapter untuk RecyclerView pada umumnya

VPMainAdapter.kt

Mentahan VPMainAdapter

Lalu kita sesuaikan adapter itu dengan apa yang kita butuhkan, jadi seperti ini

Next, kita masuk ke activity kita. Buat ArrayList dari PageModel

val data: ArrayList<PageModel> = ArrayList()

Buat function untuk menambahkan data ke ArrayList tersebut

private fun addData(message:String, color:Int){
    data.add(PageModel(message, color))
}

Lalu kita buat function untuk mengisi data tersebut

private fun prepareData() {
    addData("I'm Angry >:(", android.R.color.holo_red_dark)
    addData("I'm sad :'(", android.R.color.holo_blue_dark)
    addData("I'm happy :D", android.R.color.holo_green_dark)
}

Buat function untuk mempersiapkan ViewPager kita

private fun prepareViewPager() {
        vp_main.adapter = VPMainAdapter(data)
}

Next di onCreate atau function awal kita, kita panggil function untuk mengisi data dan mempersiapkan ViewPager

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

    prepareData()
    prepareViewPager()
}

Hasil Akhir :

Viola, dengan ini kita sudah dapat menampilkan hasil yang sama dengan ViewPager lama dan PagerAdapter.

ViewPager2 Horizontal

Lalu Bagaiman Cara Biar Jadi Vertical ?

Simple, cukup tambah line ini di dalam function prepareViewPager

vp_main.orientation = ViewPager2.ORIENTATION_VERTICAL

ViewPager2 Vertical

Dengan digunakannya RecyclerView disini, kita jadi bisa memanfaatkan fitur fitur RecyclerView yang lain seperti memasang animasi. Cara pemasangannya juga sama seperti RecyclerView (Pastikan kamu sudah punya file animasinya di project kamu, jika belum silahkan baca tutorial ini)

Kotlin:

val animation = AnimationUtils.loadLayoutAnimation(this, R.anim.layout_animation_fall_down)
vp_main.layoutAnimation = animation

XML:

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/vp_main"
    android:layoutAnimation="@anim/item_animation_fall_down"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Masih banyak lagi efek positif dari versi baru dari ViewPager ini seperti support untuk RTL,registerOnPageChangeCallback yang membuat kode kita jauh lebih rapi dan efisien dan FragmentStateAdapter yang meningkatkan performa ViewPager2 ini.

Ettt Sebentar Dulu

Perlu diingat, ViewPager2 masih dalam tahap alpha jadi masih perlu pengerjaan lebih lanjut untuk mencapai versi stabil. Adapun bug yang diketahui saat artikel ini ditulis adalah

Known issues

• clipToPadding
• no fakeDrag
• JavaDoc
• nested scrolling parallel to orientation
• no offscreen limit control
• needs better TabLayout integration
• no pageWidth setter (forced 100%/100%)
• page transformer: no hardware/software layer choice; no reverse drawing order
• keep current item visible when inserting a page before current
• keyboard navigation needs work
• FragmentStateAdapter stability / performance improvements coming

Source code project dari yang saya contohkan juga tersedia di GitHub

Sekian dari saya, semoga bermanfaat and …

Happy Coding !