– 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