Bagaimana Cara Membuat Sendiri EasyViewPagerUI Custom ViewPager Android
Sebelumnya saya akan jelaskan Pengertian dari EasyViewPagerUI. EasyViewPagerUI adalah salah satu project sederhana yang tidak seberapa dari Penulis, yang sempat populer dikalangan para Pembedahan Android di kala itu terutama di MaaaDGroup.com. Di kala banyaknya tutorial membuat viewpager yang lumayan sulit untuk diterapkan di SystemUI bagi Opreker Pemula seperti kami. Dan EasyViewPagerUI Custom ViewPager telah memudahkan kita untuk menerapkan ViewPager di SystemUI mereka masing - masing. Waktu itu Penulis sedang belajar ViewPager juga dan hasilnya adalah EasyViewPagerUI.
Itu sekilas saja tentang EasyViewPagerUI, namun sebaiknya anda sebainya harus mengenal dulu apa itu Pengertian dari ViewPager. ViewPager adalah salah satu widget yang menyediakan cara untuk mengelola beberapa halaman dan memungkinkan penggguna menggesek dari satu halaman ke halaman lain.
Seperti biasa idenya kita terlebih dahulu akan membuatnya dalam kode java dan mem-build-nya sehingga menjadi aplikasi android yang nantinya akan kita Decompile untuk mendapatkan smali yang kita perlukan. Di tutorial kali ini kita masih menggunakan tools yang sama yaitu AIDE dan Apktool Mobile. Sedikit gambaran mengenai project ini, kita akan membuat EasyViewPagerUI Custom ViewPager dengan jumlah tiga halaman. Kita ibaratkan MainActivity.java sebagai PhoneStatusBar.smali dan main.xml sebagai Expanded.xml. Itu jika kita ibaratkan ingin memasangnya di SystemUI, karena kita tidak menginginkan PhoneStatusBar.smali diedit sama sekali maka kita juga tidak akan mengedit apapun yang ada di MainActivity.java. Jadi, kita abaikan MainActivity.java dengan apa adanya, kasihan yuah terabaikan? :'(. Dan kita akan fokus di edit main.xml sebagai Expanded.xml, silahkan hapus terlebih dahulu kode xml TextView yang berisi "Hello World". Dalam memasang kode ViewPager, biasanya kita ganti dengan kode xml ViewPager biasa, kita ubah xml ViewPager menjadi Custom ViewPager. Untuk lebih jelasnya silahkan simak tutorial dibawah ini.
ViewPager class adalah manajer layout atau wadah yang memungkinkan pengguna untuk swipe kiri dan kanan melalui serangkaian halaman yang Anda berikan. Istilah "halaman" menunjukkan sesuatu seperti halaman web tapi ini hanya analoginya saja. Idenya adalah bahwa ViewPager bekerja dengan PagerAdapter untuk menyediakan "Views" yang mewakili setiap halaman. Ide dasarnya adalah bahwa ViewPager melacak halaman apa yang harus terlihat di layar dan kemudian meminta PagerAdapter untuk mendapatkan View hirarki yang perlu ditampilkan. Sebagai contoh, ViewPager mungkin meminta 3 halaman dan PagerAdapter menghasilkan atau mengambil View objek untuk halamannya. Kita akan menamakan EasyViewPagerUI Custom ViewPager.
Contoh misalkan Format Kode XML ViewPager
Sebelum membuat EasyViewPagerUI Custom ViewPager, Secara default tanpa PagerTabStrip dan tanpa halaman, kode ViewPager di xml seperti ini :
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpagerku"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Lalu Kita akan menrubah android.support.v4.view.ViewPager menjadi seperti dibawah ini :\
<namapackagekamu.NamaKelas
android:id="@+id/id_viewpagerku"
android:layout_width="match_parent"
android:layout_height="match_parent">
</namapackagekamu.NamaKelas>
kita akan menambahkan halamannya dengan mengambil view berdasarkan id LinearLayout yang ada didalam Custom ViewPager itu sendiri, sehingga kita tidak perlu mengubahnya lagi MainActivity.java dengan menyisipkan kode-kode tertentu itu, akan menyulitkan kita karena kita harus bekerja dengan smali. Lebih baik kita memberikan perubahannya di class baru dengan membuatkan class baru saat kita bekerja dengan java, sehingga untuk mendapatkan smali hanya dengan decompile saja. Kita tambahkan background di LinearLayout agar Efek Transformasi halaman terlihat.
<LinearLayout android:id="@+id/id_halaman1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#26C445">
<!-- isi halaman 1 -->
<TextView android:text="SATU" android:textColor="#ffffffff" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" />
<!-- isi halaman 1 -->
</LinearLayout>
Kita juga akan menambahkan Judul halaman dengan PagerTabStrip.
<android.support.v4.view.PagerTabStrip
android:textColor="#ffffffff"
android:id="@+id/id_judul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#90C604BF" />
Untuk mengisi List Daftar Judul, kita akan mengambilnya dari strings.xml yang akan kita tambahkan beberapa string disana
Buka strings.xml yang berlokasi di "EasyViewPagerUIKu/app/src/main/res/values/strings.xml"
Tambahkan beberapa string seperti berikut
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">EasyViewPagerUIKu</string>
<string name="hello_world">Hello world!</string>
<!-- penambahan script -->
<string name="judul_halaman1">Judul 1</string>
<string name="judul_halaman2">Judul 2</string>
<string name="judul_halaman3">Judul 3</string>
<!--
<string name="judul_halaman4">Judul 4</string>
-->
</resources>
Memberikan semua keterangan ada di dalam kode langsung dengan memberikan tag komentar xml seperti <!-- komentar --> Sehingga memudahkan kita untuk membaca kode kita nantinya
Keterangan :
- namapackagekamu : misalnya id.mykode.easyviewpagerui
- Jika kamu masih bingung tentang namapackagekamu (Your Application Package Name) bisa kamu lihat di AndroidManifest.xml
- package : id.mykode.easyviewpagerui
- namakelas : EasyViewPagerUIKu
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="id.mykode.easyviewpagerui" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Format Kode XML EasyViewPagerUI Custom ViewPager Android
keseluruhan kode kita yang ada di main.xml akan menjadi seperti ini :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<id.mykode.easyviewpagerui.EasyViewpagerUIKu android:id="@+id/id_viewpagerku" android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip android:textColor="#ffffffff" android:id="@+id/id_judul" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:background="#90C604BF" />
<LinearLayout android:id="@+id/id_halaman1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#26C445">
<!-- isi halaman 1 -->
<TextView android:text="SATU" android:textColor="#ffffffff" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" />
<!-- isi halaman 1 -->
</LinearLayout>
<LinearLayout android:id="@+id/id_halaman2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#CF7209">
<!-- isi halaman 2 -->
<TextView android:text="DUA" android:textColor="#ffffffff" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" />
<!-- isi halaman 2 -->
</LinearLayout>
<LinearLayout android:id="@+id/id_halaman3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#3347FF">
<!-- isi halaman 3 -->
<TextView android:text="TIGA" android:textColor="#ffffffff" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" />
<!-- isi halaman 3 -->
</LinearLayout>
<!--
<LinearLayout android:id="@+id/id_halaman4" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#3347FF">
<TextView android:text="EMPAT" android:textColor="#ffffffff" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" />
</LinearLayout>
-->
</id.mykode.easyviewpagerui.EasyViewpagerUIKu>
</LinearLayout>
Buat Project Baru di AIDE Mobile.
- Jalankan aplikasi Aide di smartphone kamu dan touch "For Experts".
- Touch bulatan pojok kanan bawah, touch titik tiga pilih "Show Projects".
- Sehingga muncul folder project yang secara default dengan nama folder "AppProjects".
- Buat project baru dengan touch "Create New Project" muncul options create new project dan pilih "New Android App".
- Muncul dialog Create New Project, isi kolom - kolomnya :
- kolom Name : EasyViewPagerUIKu
- kolom Package Name : id.mykode.easyviewpagerui
- kemudian touch "create".
- Project default kamu sudah terbuat dan kita akan melihat main.xml untuk pertama kali.
- Kita Run terlebih dahulu untuk mengetahui project kita berjalan lancar apa tidak, pastikan di Notifikasi ada pemberitahuan ceklist "No errors" kemudian touch icon play segitiga kanan atas. Jika ada pesan error MainActivity.java "This methode must return a value of type", kami mohon maaf tool AIDE yang anda gunakan adalah Tool AIDE bajakan yang rusak, anda tidak bisa menggunakannya.
- Silahkan Download AIDE di Playstore. Terimakasih.
Library Android Support v4
Animasi properti ini hanya didukung pada Android 3.0 (HoneyComb) API Level 11 ke atas, menerapkan PageTransformer pada ViewPager pada versi platform sebelumnya akan diabaikan alias animasi diabaikan. Jadi, HoneyComb kebawah tidak bisa menikmati fitur ini kecuali jika menggunakan library pendukung lainnya.
Kita akan menggunakan ViewPager class yang ada didalam Library com.android.support:support-v4:+ karena itu kita harus mengimport library tersebut kedalam project kita untuk bisa menggunakan ViewPager. Dan kita akan menggunakan ViewPager.PageTransformer sebagai animasi ketika kita me-swipe halamannya.
PageTransformer dipanggil kapan saja saat halaman di scroll. Ini memberikan kesempatan bagi aplikasi untuk menerapkan Custom Transform untuk menampilkan halaman menggunakan properti animasi.
Ikuti langkah berikut ini untuk mengimport Library Support v4 :
- Buka file build.gradle yang berada di lokasi "AppProjects/EasyViewPagerUIKu/app/build.gradle".
- Ubah minSdkVersion 14 jadi 11, agar aplikasi kita bisa berjalan di HoneyComb.
- Tekan icon titik tiga dan "Add to Project..." muncul dialog Add to Project... pilih com.android.support:support-v4:+
- Muncul dialog Add Library, pilih Yes.
- AIDE akan mendownload Library-nya jika sebelumnya anda belum pernah mendownload library ini. Tunggu sampai proses downloading selesai.
- Jika terjadi "Download error" bersabarlah ulangi sekali lagi sampai sukses, pastikan koneksi internet anda lancar.
Download Demo APK : Demo Aplikasi
Download SourceCode : EasyViewPagerUIKu-master.zip
GitHub : EasyViewPagerUIKu Repository