Cara Membuat SplashScreen di Kodular

By ·

 Sebelum memulai membuatnya kita perlu tahu dulu apa itu splash screen?

Splash screen adalah layar pembuka yang ditampilkan saat aplikasi pertama kali dijalankan. Biasanya, splash screen muncul hanya beberapa detik dan menampilkan logo, nama aplikasi, atau tagline dari aplikasi tersebut. Tujuan utama splash screen adalah:


1. Branding: Memberikan kesan pertama kepada pengguna, sering kali dengan menampilkan logo atau warna brand aplikasi.

2. Pengalihan Waktu: Sambil menampilkan splash screen, aplikasi sering kali sedang mempersiapkan data atau memuat konten di background, sehingga tampilan ini mengisi waktu agar pengguna tidak melihat layar kosong.

3. Estetika: Meningkatkan pengalaman pengguna dengan tampilan menarik di awal, sehingga memberi kesan yang lebih profesional.


Contohnya, ketika Anda membuka aplikasi media sosial atau permainan, layar awal yang menampilkan logo sebelum masuk ke layar utama aplikasi itulah yang disebut splash screen.

Setelah kita mengetahui apa itu splasscreen mari kita mulai mencoba membuatnya

Pertama-tama pastikan login terlebih dahulu di kodular


Setelah berhasil login silahkan pilih Create project


Tulis atau sisi Nama Project setelah itu Next


isi konfigurasi project seperti nama project dan package name lalu tekan Finish


Tunggu hingga project berhasil dibuat


Berikut halaman awal ketika project berhasil dibuat


Selanjutnya Masukkan Lottie (Ada di Palette Drawing and Animation) kedalam screen
Lottie berfungsi untuk menampilkan animasi


Selanjutnya masukkan Clock (Ada di Palette Sensors) keadalam screen


Atur pada Screen1
Align Horizontal = Center : 3
Align Vertical = Center :2


Atur pada Lottie
With = Full Parent


Atur pada Clock
Timer Always Fires = Disable
Timer Enabled = Disable
Timer Interval = 3000 (3 Detik)


Buat Screen Baru

Untuk kembali ke screen1 dapat dilihat seperti gambar diatas


masuk ke https://lottiefiles.com/


Pilih View More pada Free Community animations


Cari loading pada fitur pencarian


Pilih salah satu animasi lalu download

Pilih file JSON


Pilih Lottie setelah itu upload file JSON kedalam Source



Close jika muncul pop up seperti gambar diatas (artinya file json berhasil di upload)


Pada Source pilih animasi yang telah diupload

Selanjutnya pilih Blocks

Untuk Screen1 buatlah blocks seperti gambar diatas ini


Kembali ke desainer lalu pilih screen2 dan tambahkan label (ada di palette user interface)

Ubah Text menjadi Hello Word dan Ukuran tect menjadi 30

Masuk kembali ke blocks lalu buat block seperti gambar diatas

Langkah selanjutnya yaitu kita test dengan cara klik export dan pilih apk




13 komentar: