Implementasi FlipViewPager di Android

Pada postingan kali ini kita akan membahas tentang bagaimana mengimplementasikan FlipViewPager pada sebuah aplikasi. Buat yang belum tau apa itu FlipViewPager, FlipViewPager adalah versi upgrade dari ListView yang dikombinasikan dengan animasi Flip, sehingga terlihat seperti membalikkan halaman pada sebuah buku.

Nah, disini kita akan mencoba mengimplementasikannnya pada aplikasi menu makanan nusantara. Berikut konsep dari aplikasinya:

Mockup Menu Nusantara
Mockup Menu Nusantara

 

#1. Buat Project Baru

Buat project baru dengan nama FlipViewPager atau apapun yang Anda inginkan. Nah disini kita menggunakan library yalantis, jadi tambahkan sricpt berikut pada file build.gradle di project yang barusan dibuat.

compile 'com.yalantis:flipviewpager:1.0.0'

 

#2. Membuat Class Utils

Selanjutnya yang perlu dilakukan adalah membuat class Utils yang berisikan data menu makanan untuk ditampilkan nantinya. Buat class baru dengan nama Utils.java dan isikan code berikut kedalamnya:

 

#3. Membuat Class Modelnya

Nah nextnya buat folder baru dengan nama model kedalam project dan buat class baru ke dalamnya dengan nama Makanan.java. Sehingga strukturnya akan terlihat seperti gambar dibawah ini:

Struktur Folder Project

Selanjutnya copy-kan code dibawah ini pada class Makanan.java.

 

#4. Resource & Layout

Class Utils dan Makanan udah dibuat nih, pasti akan ada pesan yang error yang muncul pada file Utils.java. Stay cool, itu karena file yang dipanggil belum ada di project kita, yaitu file gambarnya. Selain itu kita juga perlu menambahkan dan mengupdate layout bawaan saat membuat project. Pastikan struktur folder dan file pada folder res terlihat seperti gambar ini:

Struktur Folder res
Struktur Folder res

Lalu tambah layout baru & perbarui layout yang sudah ada sebelumnya menjadi seperti code dibawah ini. (Untuk gambar makanannya download disini).

Buat layout baru dengan nama round_textview.xml kedalam folder drawable. Lalu copy kan code dibawah ini kedalam file tersebut.

Update file activity_main.xml menjadi seperti berikut:

Note : File content_main.xml gak perlu kita diupdate. Selanjutnya buat layout baru dengan nama makanan_info.xml dan makanan_merge_page.xml. Copy kan code dibawah ini pada layout tersebut sesuai nama filenya.

Nah agar aplikasinya berwarna, update file colors.xml pada project menjadi seperti berikut:

Sama halnya dengan layout styles.xml, perbaharui menjadi seperti berikut:

 

#5. Let’s Party

Hehe 😀 kok party sih. Nah selanjutnya kita bermain di file MainActivity.java untuk memanggil class-class yang telah kita buat tadi. Pada file ini kita akan membuat satu class lagi didalamnya yaitu class MakananAdapter, sehingga nantinya file MainActivity.java akan terlihat seperti ini:

Nah coba jalankan aplikasi, harusnya sih akan terlihat seperti ini:

Menu Nusantara - FlipViewPager
Menu Nusantara – FlipViewPager

Well mungkin cukup sekian guys tutorialnya, untuk sourcecode bisa cek di Github ini. Semoga bermanfaat ..

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s