Tutorial Membuat Tampilan Aplikasi Ovo Di Android Studio| Topup page

2 min read

  • infotechku, kembali di tutorial yang menyenangkan dan kali ini saya membagikan atau melanjutkan tutorial sebelumnya yaitu Tutorial Membuat Tampilan Aplikasi Ovo Di Android Studio| Topup page

Screenshoot Aplikasi

top up page img by makhalibagas

Hallo kembali lagi di tutorial ini, tutorial kali ini kita akan melanjutnya tutorial sebelumnya yaitu tutorial membuat tampilan aplikasi ovo di android studio bagian homepage dan sekarang tutorial membuat aplikasi ovo bagian top up page, pada kali ini kita akan melanjutkan projek kemarin yang telah kalian buat, Maka sebelum itu kalian ikuti tutorial sebelumnya terlebih dahulu agar berhasil atau mengetahui step pertama dari tutorial ini,

Tampilan dari tutorial ini dan sebelumnya telah di uji di beberapa handphone maka dari itu insyaallah tampilan telah responsif, di top up page ini terdapat dua page yang akan kita buat yaitu instan top up dan metode lain top up, untuk itu kita menggunakan viewpager 2 untuk tab layout nya dan fragment

langsung ke tutorialnya, tidak berlama-lama karena kalian pasti akan bosan kalo membaca tulisan banyak, untuk itu ayoo perhatikan baik-baik tutorial ini agar berhasil membuat nya. Selamat mencoba

Buat Toolbar

langkah awal adalah membuat toolbar dari top up page ini, ikuti seperti berikut

setelah toolbar diatas kalian tambahkan, selanjutnya kita menambahkan tabs layoutnya dan viewpager2 seperti ini

jika keduanya telah ditambahkan maka kode semua top up activity akan seperti ini

Buat Fragment

Kita membutuhkan 2 fragment di top up page activity untuk itu buat lah dua fragment dengan nama InstanTopupFragment dan MotodeLainFragment

Jika sudah, perhatikan langkah berikutnya lagi.. kita akan membuat adapter dari viewpager2 nya

Membuat Adapter

kita ke TopupActivity buat adapter langsung disitu, atau kalian juga bisa buat class baru dengan nama ViewPagerAdapter dan isikan code seperti ini,

setelah itu kalian, set viewpage dan tab layoutnya di top up activitinya seperti berikut.

jika sudah, maka kode keseluruhan acitivity top up akan menjadi seperti berikut.

jalankan aplikasi nya maka akan menjadi tab layout nya bisa geser-geser, Oke untuk selanjutnya adalah kita mendesain fragment instan top up nya, perhatikan dan pahami baik-baik agar berhasil. Pastikan kalian jangan copas karena kalau belajar copas nanti pahamnya bakalan lama jadi ketik aja yah temen-temen.

Layouting Fragment Instan Top Up

seperti ini code layoting dari fragmentya, ini agak sedikit panjang dan apabila kalian baru memulai belajar layouting di android studio pasti agak bingung untuk itu perhatikan lebih baik penulisanya.

diatas kita menggunakan nestedescrollview agak kita bisa scroll karena ukuran device pasti berbeda untuk itu kita menggunakanya, kalian bisa pelajari apa itu nestedscroll di google, nah setelah layouting sudah kalian kerjakan dan telah selesai selanjutanya adalah

Layouting Fragment Metode Lain

layouting ini juga lumayan sedikit panjang, karena membutuhkan beberapa komponen yang harus digunakan agar sesai dengan tampilan aplikasi ovo yang original dan berikut codenya seperti ini.

karena metode lain terdapat recyclerview untuk menunya maka selanjutnya kalian membuat adapter terlebih dahulu, sebelum itu kalian buat modelnya yah

Model Metode.kt

Adapter MetodeAdapter.kt

langkah terakhir set recyclerviewnya di fragment metode, maka fragment metode akan menjadi seperti berikut

dahh kalian telah berhasil membuat tampilan top up page aplikasi ovo, langkah diatas merupakan langkah akhirnya, dan apbila kalian telah mengikuti dengan baik, selanjutanya jalankan aplikasi nya maka akan jadi.

Penutup

Alhamdullilah tutorial membuat tampilan aplikasi ovo di android studio| topup page telah selesai kalian pelajari, semoga tutorial yg telah kalain coba ini bermanfaat bagi kalian dan sayaa, Apabila kalian ingin request tutorial silahkan comment dibawah yahh, barangkali saya bisa membuatnya dan kalo belum saya berusaha

Ohh yaa bagi kalian yang mencoba diatas tetapi menemukan error juga bisa tanya di kolom komentar. Sekian terimakasih teman-teman…

Link Repository Proyek UI OVO

github.com/makhalibagas/UI-OVO

jika menurut kalian bermanfaat silahkan star repository tersebut agar si pembuat tutorial lebih bersemangat membuat tutorialnya, sekian terimakasih. Salam Coding.

7 Cara Memperbaiki Printer Tidak Terdeteksi Di PC

Dalam usaha percetakan atau perkantoran, printer sangat memiliki peran penting di dalamnya. Seperti halnya mencetak berkas atau dokumen, dan juga untuk mencetak foto, undangan,...
gawang123
2 min read

4 Cara Cleaning Printer Apa Saja Dengan Benar…

Printer merupakan salah satu perangkat yang paling mendukung bagi komputer. Tak jarang kedua benda ini seringkali berdampingan. Keberadaan printer sangat meringankan pekerjaan manusia, misalnya...
gawang123
2 min read

Leave a Reply

Your email address will not be published. Required fields are marked *

Translate »