Scrollable Android ViewPager

Untuk pembahasan kali ini, saya ingin menjelaskan mengenai salah satu komponen yang sering digunakan pada aplikasi Android yaitu ViewPager.

Apa itu ViewPager?

ViewPager merupakan salah satu widget Android yang dapat digunakan untuk mengelola beberapa fragments. Dengan adanya ViewPager, suatu activity memiliki kendali terhadap fragment apa yang sedang ditampilkan melalui ViewPager (umumnya untuk melakukan scrolling activity ke samping dan menampilkan fragment yang sesuai melalui navbar). ViewPager memberikan transisi yang seamless dalam menampilkan beberapa fragments.

ViewPager akan menerima sebuah Adapter yang membungkus fragment-fragment yang akan dikelola oleh ViewPager untuk ditampilkan.

Berikut adalah contoh penggunaan ViewPager dalam aplikasi kami pada home activity untuk menampilkan beberapa fragments (Seluruh transaksi, transaksi masuk, transaksi keluar, hingga detil barang dan statistik)

public class TransactionListActivity {

    private static final int TRANSACTION_PAGER_NUM = 0;
    private static final int PRODUCT_PAGER_NUM = 3;
    private static final int STATISTIC_PAGER_NUM = 4;

    private static final int PAGER_NUM = 5;

    @BindView(R.id.transaction_view_pager)
    CustomViewPager mViewPager;

    @BindView(R.id.bottom_navigation_view)
    BottomNavigationView bottomNavigationView;

    @BindView(R.id.transaction_tab_layout)
    TabLayout mTabLayout;

    @Inject
    PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transaction_list);

        getActivityComponent().inject(this);
        setUnBinder(ButterKnife.bind(this));

        onPreparePagerAdapter();

        onPrepareBottomNavigationView();
    }
}

Dalam kode tersebut, terdapat dua View menu yaitu mTabLayout yang berfungsi mengatur Transaksi apa saja yang akan ditampilkan (sebagai fragment) dan bottomNavigationView yang mengatur apakah menampilkan transaksi, detil barang, atau statistik.

Fungsi onPreparePagerAdapter berfungsi untuk memberikan fragments dan mempersiapkan adapter yang digunakan oleh ViewPager. Disamping itu, beberapa menu diatur untuk mTabLayout. Berikut adalah cuplikan kode fungsi tersebut

@Override
public void onPreparePagerAdapter() {
    mPagerAdapter.setCount(PAGER_NUM);
    mViewPager.setAdapter(mPagerAdapter);

    mViewPager.setOffscreenPageLimit(PAGER_NUM);
    mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            mViewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }
        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}

Dengan adanya kode tersebut, selain sudah diintegrasikan adapter dengan ViewPager, fungsionalitas pengganti fragment melalui menu mTabLayout pun diimplementasikan.

Adapun untuk fungsionalitas bottomNavigationView, dilakukan pada fungsi onPrepareBottomNavigationView berikut:

@Override
public void onPrepareBottomNavigationView() {
    bottomNavigationView.setOnNavigationItemSelectedListener(
    new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.nav_transactions_item:
                if (mViewPager.getCurrentItem() > 2) {
                    mViewPager.setCurrentItem(TRANSACTION_PAGER_NUM, false);
                }
    
                return true;
            case R.id.nav_product_item:
                mViewPager.setCurrentItem(PRODUCT_PAGER_NUM, false);
                return true;
            case R.id.nav_statistic_item:
                mViewPager.setCurrentItem(STATISTIC_PAGER_NUM, false);
                return true;
        }
        return false;
    }
    });
}
}

Perlu diperhatikan, bahwa pada implementasi bottomNavigationView, kami menambahkan argument false pada method setCurrentItem untuk mencegah adanya animasi scrolling yang dilakukan saat perpindahan fragment. Berbeda dengan implementasi mTabLayout yang terdapat animasi scrolling.

Setting ViewPager Scrollable Properties

Dalam use case kami, User tidak diperbolehkan untuk melakukan scrolling pada arah samping (yang secara default diperbolehkan oleh ViewPager). Untuk melakukan ini, kami membuat CustomViewPager dengan implementasi berikut

public class CustomViewPager extends ViewPager {
    public CustomViewPager(Context context) {
        super(context);
    }
    public CustomViewPager(Context context, AttributeSet attrs){
        super(context,attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return false;
    }
}

Dengan melakukan override pada method onInterceptTouchEvent dan onTouchEvent, fungsionalitas scrolling ke samping tidak bisa dilakukan, hanya bisa melalui penggunaan menu navigasi yang telah kami buat.

Conclusion

Membuat ViewPager tidaklah sulit. Beberapa hal yang belum dibahas di sini terkait pembuatan fragment dan pengelolaan data pada masing-masing fragment itu sendiri. Untuk itu, silakan pembaca mencari referensi lengkap pada Android Developers Guide dikarenakan banyaknya variasi use case yang bisa dicapai.