Membuat animasi loading process Kodular

Baiklah, pada tutorial kali ini akan membuat animasi loading process kodular pada aplikasi android, dengan memanfaatkan komponen Lottie untuk membuat animasinya dan komponen notifier untuk membuat loadingnya. Nantinya kedua komponen tersebut akan digabungkan dan menghasilkan efek animasi loading process yang cantik.

Membuat animasi loading process Kodular
Membuat animasi loading process Kodular

Dalam membuat aplikasi android tentunya pengembang dituntut untuk mampu membuat desain aplikasi yang baik, hal ini sangat penting karena desain yang baik dapat mempermudah pengguna dalam melakukan interaksi dengan aplikasi, sehingga aplikasi yang dibuat mudah untuk digunakan. Oleh karena itu pengembang harus bisa memastikan keseimbangan antara UI dan UX.

UI (User Interface) dan UX (User Experience) sangatlah penting dalam bagian proses desain aplikasi.

User Interface adalah visualisasi tampilan dari aplikasi yang dibuat dengan tujuan untuk memperindah tampilan aplikasi sehingga dapat meningkatkan kepuasan bagi pengguna. Selain itu, tampilan UI yang dibuat juga harus memudahkan pengguna dalam menggunakan aplikasi.

User Experience adalah bagian dari proses pembuatan desain aplikasi yang didasarkan pada pengalaman si pengguna. Dengan ini, aplikasi yang dibuat dapat sesuai dengan keinginan dan kebutuhan si pengguna itu sendiri.

Nah loading process pada aplikasi android biasanya digunakan sebagai animasi Splash Screen, penghubung antara screen 1 dengan screen lainnya ataupun untuk membuat notifikasi process baik saat upload maupun download file. Dengan dibuatkannya animasi loading process, dapat menjadi nilai tambah bagi apikasi terutama pada bagian interface aplikasi.

Cara membuat animasi loading process Kodular

Membuat animasi loading process juga termasuk kedalam bagian dari cara mendesain aplikasi yang baik, dengan ini akan mempercantik tampilan aplikasi yang dibuat. Untuk animasinya kamu dapat mencarinya di LottieFiles. Silahkan kamu pilih animasinya dan download dalam bentuk file.Json dari web tersebut, nantinya file.Json animasi ini akan di upload ke Asset di kodular, sehingga nanti tinggal memanggil filenya saja.

Desain animasi loading splash screen dan loading process kodular

Oke setelah selesai mencari animasi untuk loading process, selanjutnya adalah login ke Kodular. Kemudian buat project baru dan beri nama animasi_loading_process. Buat Screen 1 dan Screen 2 lalu desain seperti gambar di bawah ini. Tentunya untuk desain yang ditampilkan pada tutorial ini merupakan desain sederhana kamu bisa membuatnya dengan lebih baik lagi sesuai dengan keinginanmu.

desain aplikasi animasi loading process kodular
desain aplikasi animasi loading process kodular

pada Screen 1 saya membuat halaman Splash Screen. Halaman Splash Screen adalah halaman awal yang biasa digunakan untuk pembuka yang didalamnya berisi logo atau penjelasan ringkas dari aplikasi yang dibuat, namun kali ini saya hanya membuat animasi loading logo saja.

Sedangkan pada Screen 2, dibuat sebagai halaman home yang didalamnya akan berisi 2 button yang akan menampilkan animasi loading process lainnya. Adapun komponen penting yang digunanakan pada kedua screen tersebut, yaitu : Komponen Lottie, Notifier, dan Clock.

Untuk komponen Lottie kamu dapat menemukannya di menu “Pallet” kemudian pilih bagian “Drawing and Animation” dan disitu kamu akan melihat komponen “Lottie”. Selanjutnya untuk komponen Notifier, dapat ditemukan di menu “Pallet” bagian “User Interface” kemudian scroll kebawah untuk menemukan komponen “Notifier”. Terakhir komponen Clock, dapat ditemukan pada menu “Pallet” bagian “Sensor” dan disitu kamu akan menemukan komponen “Clock”.

Jangan lupa untuk upload file.Json animasi yang sudah didownload tadi ke Asset Kodular. Kemudian pada Screen 1, atur waktu clocknya menjadi nilai 5000 untuk menghasilkan 5 detik dan atur komponen Lottienya untuk memilih animasi yang akan dipakai, lihat gambar di bawah ini.

atur clock dan atur lottie
atur clock dan atur lottie

Setelah proses desain selesai jangan lupa untuk masuk kebagian Blocks untuk membuat programnya.

Blok program animasi loading Kodular

Berikut di bawah ini adalah blok program pada Screen 1 yang berfungsi sebagai Splash Screen.

Blok program splash screen aplikasi quiz kodular app inventor
Blok program splash screen

Selanjutnya di bawah ini adalah blok program pada Screen 2

kode program pada screen 2 membuat animasi loading process
kode program pada screen 2 membuat animasi loading process

Apabila proses pengkodean sudah selesai, tahap selanjutnya adalah merubah project menjadi sebuah aplikasi yang dapat digunakan di smartphone android.

Build project

Untuk merubah project menjadi bentuk aplikasi dengan format apk, kamu dapat melakukannya dengan cara klik “Export” pada menu bagian atas tepat diantara “Test” dan “Help”. Klik Export dan pilih export dengan apk. Lalu kamu download aplikasinya dan install pada smartphone.

berikut di bawah ini adalah dokumentasi aplikasi yang dibuat pada tutorial ini

dokumentasi aplikasi animasi loading process kodular

Baiklah cukup sampai sini saja tutorialnya, semoga bermanfaat dan apabila ada yang ingin ditanyakan tulis saja di komentar. Terimakasih.

One comment

Leave a Reply

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