Cara Membuat Sendiri EasyViewPagerUI Custom ViewPager Android

Cara Membuat Sendiri EasyViewPagerUI Custom ViewPager Android

Cara Membuat Sendiri EasyViewPagerUI Custom ViewPager Android

Membuat Sendiri EasyViewPagerUI Custom ViewPager Android


EasyViewPagerUI adalah salah satu project sederhana yang tidak seberapa dari Penulis, yang sempat populer dikalangan para Opreker Android di kala itu terutama di MaaaDGroup.com. Di kala banyaknya tutorial membuat viewpager yang lumayan sulit untuk diterapkan di SystemUI bagi Opreker Pemula atau NewBie seperti halnya Penulis. Dan EasyViewPagerUI Custom ViewPager telah memudahkan mereka dalam 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 mengenal dulu apa itu ViewPager. ViewPager adalah salah satu widget yang menyediakan cara untuk mengelola beberapa halaman dan memungkinkan penggguna menggesek dari satu halaman ke halaman lain.
Foto-EasyViewPagerUI Custom ViewPager
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.

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.

A. Format Kode XML ViewPager

Sebelum membuat EasyViewPagerUI Custom ViewPager, Secara default tanpa PagerTabStrip dan tanpa halaman, kode ViewPager di xml seperti ini :




Kita akan mengubah android.support.v4.view.ViewPager menjadi seperti ini :




Kemudian kita akan menambahkan halamannya dengan mengambil view berdasarkan id LinearLayout yang ada didalam Custom ViewPager itu sendiri, sehingga kita tidak perlu mengubah MainActivity.java dengan menyisipkan kode-kode tertentu itu akan menyulitkan kita karena kita harus bekerja dengan smali (cape dech). 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.




Kita juga akan menambahkan Judul halaman dengan PagerTabStrip.




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 :



Kita juga akan 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

B. Format Kode XML EasyViewPagerUI Custom ViewPager Android

Sehingga, keseluruhan kode kita yang ada di main.xml akan menjadi seperti ini :




Diatas adalah gambaran yang akan kita buat di tutorial kali ini. Sebelum melangkah lebih jauh ada baiknya kamu mempersiapkan tools yang diperlukan untuk mengikuti tutorial ini.
Berikut Langkah - Langkah Cara Membuat Sendiri EasyViewPagerUI Custom ViewPager Android.

C. Project

1. Pembuatan Project Android melalui AIDE Mobile

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.
  • error return aide
  • Tunggu proses "Building app..." sampai selesai dan install (Pasang) aplikasi lalu "Buka".
  • Jika tidak terjadi error akan terbuka tampilan default "Hello World!".
  • Selamat...! Menuju langkah berikutnya.
2. Library Android Support v4


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.
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.

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.
Solusi jika koneksi internet tidak stabil dan selalu gagal dalam proses downloading, seperti halnya koneksi internetnya Penulis :'(. Sudah berjam-jam dan berkali-kali mencoba downloading selalu gagal ditengah jalan, sebelum kuota habis karenanya kita akan mencoba cara lain berikut ini.
  • Buka file build.gradle yang berada di lokasi "AppProjects/EasyViewPagerUIKu/app/build.gradle"
  • Tekan icon titik tiga dan "Add to Project..." muncul dialog Add to Project... pilih "Existing JAR file"
  • Muncul pesan "To add a JAR file as a library just copy it into the 'libs' directory of your project" yang artinya Untuk menambahkan file JAR sebagai library, hanya menyalinnya ke dalam direktori 'libs' project.
  • Download Library-nya terlebih dahulu Download Android-Support-v4.jar
  • Pindahkan android-support-v4.jar ke dalam folder 'libs', dalam project baru folder libs ini tidak ada, maka kita harus membuat folder baru.
  • Buka lokasi "AppProjects/EasyViewPagerUIKu/app/" tekan titik tiga "Create New Folder..." beri Name dengan nama "libs" tekan OK.
  • Anda bisa memindahkan android-support-v4.jar dengan X-plore atau File Manager yang anda suka.
  • Run Project terlebih dahulu supaya libs bekerja efeknya.
3. File EasyViewPagerUIKu.java


Membuat EasyViewPagerUI Custom ViewPager Android
  • Dan ini Cara membuat EasyViewPagerUI Custom ViewPager Android. Silahkan Tambah class baru dengan nama file EasyViewPagerUIKu.java dengan cara touch bulatan biru pojok kanan bawah.  klik src > java > Add New Class...
  • Kita juga akan memberikan semua keterangan ada di dalam kode langsung dengan memberikan tag komentar java seperti berikut ini, Sehingga memudahkan kita untuk membaca kode kita nantinya.
    • // menambahkan komentar satu baris
    • /* menambahkan komentar satu atau beberapa baris */
    • /* menambahkan komentar satu
      * atau beberapa baris
      */
  • Silahkan Ketikkan kode berikut untuk EasyViewPagerUIKu.java dan jangan lupa Save :


Tips : "jika ada kata terjadi error bergaris bawah merah, blok kata tersebut sampai muncul klik icon kotak ceklist, add 'import....' ."

3. File CubeOutTransformer .java

Menambahkan animasi PageTransformer dengan Efek seperti Cube ketika halaman di swipe ke kanan ke kiri. Buat class baru dan Ketik kode berikut untuk menambahkan animasinya :




Menyimpan Project yang sudah kita buat dan menjalankannya untuk menguji Aplikasi.
  • Save, simpan semuanya dengan cara touch icon titik-titik tiga kemudian Save.
  • Jalankan Run Project yang sudah kita buat dengan cara touch icon play segitiga di pojok kanan atas.
  • Tunggu proses "Building app..." sampai selesai dan install (Pasang) aplikasi lalu "Buka".
Selamat, aplikasi yang sudah kita buat sudah jadi. Mari kita coba apakah aplikasi kita berjalan dengan semestinya touch dan tahan layar geser kekiri kekanan untuk ke halaman selanjutnya dan sebelumnya.

EasyViewPagerUI Custom ViewPager

D. Mendapatkan Kode Smali

Setelah kita membuat EasyViewPagerUI Custom ViewPager Android dari java. Untuk mendapatkan smalinya kita akan decompile EasyViewPagerUIKu.Apk menggunakan Apktool Mobile. Ikuti langkah - langkah berikut ini :
  • Kita ambil terlebih dahulu Apk yang telah jadi di folder "AppProjects/EasyViewPagerUIKu/app/build/bin/app.apk" rename jadi EasyViewPagerUIKu.apk atau terserah kalian.
  • Buka ApkTool Mobile, cari lokasi file EasyViewPagerUIKu.apk yang baru saja kita ambil.
  • Touch EasyViewPagerUIKu.apk > decompile all > tunggu proses decompiling selesai > ok
  • Nanti akan muncul folder baru hasil decompile-nya "EasyViewPagerUIKu_src" > klik lalu browse > nah itulah hasilnya.
  • Kita ingat kembali apa saja file - file yang telah kita buat untuk membuat aplikasi EasyViewPagerUIKu dari yang telah di edit, yang ditambahkan maupun yang membuat file baru yaitu :
    1. android-support-v4.jar
    2. EasyViewPagerUIKu.java (folder java)
    3. CubeOutTransformer.java (folder java)
    4. main.xml (folder layout)
    5. strings.xml (folder values)
  • Hal - hal itulah yang nantinya kita jadikan sebagai patokan dalam mengambil file - file apa sajakah yang harus kita ambil dari hasil decompile aplikasi kita. Selain yang tidak berhubungan dengan nama-nama dalam daftar diatas kita abaikan saja dan hapus. Buka folder hasil decompile dan sisakan File - file berikut :
    1. android-support-v4.jar, yaitu semua smali yang ada di "android/support/v4"
    2. EasyViewPagerUIKu.java, EasyViewPagerUIKu$AdapterEasyViewpagerUIKu.smali
    3. CubeOutTransformer.java
    4. main.xml : karena file ini sudah ada sebelumnya maka, kita hanya mengambil kode yang telah kita tambahkan saja sesuai perubahan yang telah kita buat diatas.
    5. strings.xml : karena file ini sudah ada sebelumnya maka, kita hanya mengambil kode yang telah kita tambahkan saja sesuai perubahan yang telah kita buat diatas.

E. MEmasang di UI / Layout Kosong

Taruh smali yang anda dapatkan di tempatnya masing - masing. Anda hanya perlu memasang Kode xml EasyViewPagerUI Custom ViewPager Android dimanapun anda mau. Kodenya seperti yang ada di main.xml

Kita sudah mendapatkannya, semoga tutorial / guide Cara Membuat Sendiri EasyViewPagerUI Custom ViewPager Android dari Java ke Smali ini bermanfaat untuk kalian, kurang lebihnya saya minta maaf yang sebesar-besarnya.
Download Demo APK : Demo Aplikasi
Download SourceCode : EasyViewPagerUIKu-master.zip
Merasa kebingungan mengikuti tutorial Membuat Sendiri EasyViewPagerUI Custom ViewPager Android tanpa menggunakan ScreenShoot? Baca :  Tutorial dan Langkah Membuat Custom TextView Android dari Java ke Smali disertai ScreenShoot
Silahkan dimodifikasi sendiri menurut kreatifitas masing-masing. Anda bisa menampilkan hasil tampilan aplikasi anda sendiri di dalam komentar dibawah sebagai dukungan serta jika tutorial ini sangat bermanfaat bagi anda. Jangan Lupa tinggalkan komentar Anda.

Think Simple Make it Simple. Happy Coding...! :)

Referensi :
Buka Komentar