– Infotechku.com. Kembali lagi di tutorial yang menyenangkan.
Yah kalian telah pencet tutorial ini, Itu artinya kalian akan belajar tutorial membuat tampilan aplikasi ovo di android studio. Sebelumnya kalian pasti pengguna aplikasi ovo ini sehingga kalian penasaran atau pengin tau cara membuat tampilanya di android studio. Dan akhirnya kalian memutuskan untuk mempelajarinya dan bagi kalian yang sudah bisa membuat nya pasti akan mencari resource saja wkwkwk. oke gpp saya cantumkan resource yang saya temukan digithub dan disitu ada keterangan copyright resource jadi pastikan kalian yang akan membuat nya cantumkan sumber yah
Screenshoot Setelah Jadi.

OVO adalah aplikasi smart yang memberikan Anda kemudahan dalam bertransaksi (OVO Cash) dan juga kesempatan yang lebih besar untuk mengumpulkan poin di banyak tempat (OVO Points).
Tak perlu berlama-lama membaca langsung saja ke tutorialnya yah, Oke cekidot. ehh sebentar masih ada yang kurang saya mendapatkan resource icon dari https://github.com/AloisiusBagas/OVO-UI-Clone dan di https://www.ovo.id/helpcenter dengan cara klik kanan save image as
Sebelum memulai siapkan leptop kalian dan cemilan untuk menemani anda dalam belajar pastikan kalian duduk tenang di kamar atau dimana dan mulailah dengan membaca doa. Oke
1. Membuat BottomNavigation Ovo
pertama-pertama kalian membuat bottomnavigation terlebih dahulu berikut langkah-langkah yang kalian harus ikuti.
Import Librabry
dengan menggunakan library aplikasi kita akan menjadi lebih bagus dan menarik, ada banyak sekali macam-macam library opensource yang ada digithub. Kalian bisa searching sendiri di google atau langsung saja digithub
seperti biasa kalian sync now dan tunggu sampai selesai, proses ini memerlukan beberapa menit sesuai dengan kecepatan internet kalian. setelah itu
Color Xml
Kalian juga bisa modifikasi sendiri lagi apabila color yang akan digunakan masih kurang, bisa melihat-lihat color yang persis seperti aplikasi ovo… tetapi warna aplikasi ovo dominan sudah warna ungu yang sudah saya terapkan di colorprimary diatas.
Strings Xml
Diatas merupakan string yang terdapat dihalaman homepage ovo aja belum semuanya dimasukan dalam string, nanti kalian bisa menambahkan sendiri lagi
jika kedua diatas telah kalian ikuti, setelah itu siapkan resource kalian yaitu yg telah di download lalu file svg convert ke xml, cara convertnya kalian bisa baca disini https://www.infotechku.com/2020/11/tutorial-konvert-svg-ke-xml-langsung-banyak.html agar menghemat waktu karena banyak yg harus kalian convert lalu taruh di drawable kalian.
Buat Fragment
terdapat 4 fragment yang kalian buat yaitu HomeFragment, DealsFragment, FinanceFragment, ProfileFragment
Buat Menu Main
Buat Navigation
Buat App Bar di Layout
Edit activity_main.xml
Edit MainActivity
setelah langkah diatas sudah kalian lakukan maka kalian telah berhasil membuat bottomnavigation seperti ovo dan hasilnya seperti berikut

1. Membuat Toolbar
oke langkah selanjutnya adalah membuat toolbar pada homefragment nya, berikut langkahnya
Tambahkan Code di Fragment Home Xml
di toolbar nya menggunakan framelayout karena agar bisa kita set gravity dari gambar nya yang harusnya kanan atau end dan jadi center vertikal, selanjutkan jika telah selesai yaitu
Tambahkan Code Berikut
nahh setelah selesai yang lumayan panjang code diatas, kalian akan sedikit lagi selesai dalam tutorial ini, jadi untuk keseluruhan code dari layout fragment home nya akan seperti berikut ….
nahh selanjutnya kita akan mengisi data info dan promo spesial dengan data manual di android studionya, untuk itu kalian copas didrawable gambarnya lalu setelah itu kita akan, membuat model, membuat adapter, membuat item row, set viewpager2 di homefragment nya.. oke lanjutt
Membuat Model
buat dulu package bernama model dipackage utama nya agar menjadi tersturktur atau rapih projek kita, lalu buat class kotlin dan codenya seperti berikut
kita hanya mengambil gambar aja, tidak ada name atau judul di promonya jadi di class promo.kt kita hanya ada img saja, nah untuk selanjutnya kita akan..
Membuat Item Row
setelah item row terbuat maka selanjutnya yaitu membuat adapter untuk data set data viewpager2 nya….
Membuat Adapter
adapter dari promo nya adalah seperti berikut codenya, ketikan dengan benar kalo bisa kalian jangan copas agar terbiasa. sebentar lagi selese ko tutorialnya, sabar saja :
nahh lanjutt lagii, setelah model, item row, adapter, selanjutnya ini adalah setp terakhir tutorial membuat tampulan aplikasi ovo | homepage yang lumayan panjang…. semoga dengan adanya ini jadi bermanfaat yahh, Ini dia selanjutnya
Edit HomeFragment Seperti Berikut
setelah semuanya selesai maka jalankan aplikasinya
Penutup
Alhamdullilah tutorial membuat tampilan aplikasi ovo di android studio| homepage 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…
Projek ini nanti saya akan upload digithub saya, untuk itu bisa lihat di sini
Terima kasih ilmunya om. Barakallahu fikum
source codenya tidak tampil ya??
dibagian mana?