Membuat submenu di app inventor atau kodular

Dalam membangun sebuah aplikasi android, tentunya tidak hanya membuat sebuah menu navigasi sederhana yang hanya mengarahkan ke beberapa screen yang akan ditampilkan. Ada beberapa kemungkinan dimana pada aplikasi yang dibuat harus menampilkan beberapa menu navigasi yang disetiap menu yang dipilih harus menampilkan beberapa submenu ataupun submenu didalam submenu.

Pada app inventor belum terdapat komponen yang dapat membuat menu ataupun submenu, biasanya akan menggunakan extension atau bantuan library dari pihak ke tiga untuk membuat menu.

Berbeda dengan kodular yang secara default sudah terdapat komponen khusus untuk membuat menu, namun komponen tersebut juga memiliki keterbatasan yaitu tidak bisa membuat sebuah submenu didalam menu.

Ada banyak extension yang bisa digunakan untuk membuat menu di app inventor atau kodular, namun lagi-lagi kebanyakan hanya membuat sebuah menu biasa tanpa bisa membuat sebuah submenu didalam menu.

Lalu bagaimana cara membuatnya?

Tenang saja, kita masih bisa membuat submenu dengan cara sederhana bahkan tanpa menggunakan extension. Silahkan simak tutorial yang saya buat ini.

Cara membuat submenu di app inventor atau kodular

Pada tutorial kali ini saya membuatnya di kodular, jika kamu menggunakan app inventor tidak masalah karena tutorial ini bisa juga dipakai di app inventor.

Pertama masuk ke kodular atau app inventor dengan menggunakan akun google. Selanjutnya buat project baru dan beri nama project submenu. Jika sudah selanjutnya adalah

Desain aplikasi

pada desain aplikasi kali ini akan membuat 2 Screen. Screen 1 untuk halaman awal lalu Screen Menu untuk menampilkan halaman menu. Berikut adalah desain sederhana yang saya buat

Screen 1 adalah halaman awal yang ditampilkan ketika kita pertama kali membuka aplikasi. Pada desain tersebut saya menggunakan icon menu yang didapat dengan menggunakan kode dari material icons. Untuk menggunakan icon kita tidak perlu mendownload gambar lalu memasukkannya ke project yang sedang kita buat, kamu cukup menggunakan label untuk menampilkan icon. Caranya adalah dengan merubah Font Type pada label ke Material Icons. Lalu masukkan kode icon yang ada pada material icon ke text label.

Selanjutnya adalah membuat desain Screen Menu

Pada desain menu ini kita buat dengan menggunakan komponen horizontal arrangement, lalu untuk setiap submenunya dibuat dengan horizontal arrangement yang dibungkus dengan komponen vertical arrangement.

Pastikan buat submenu secara terutut seperti gambar diatas, misalkan pada menu1 maka buatlah vertical arrangement yang akan menampilkan submenu tepat dibawah menu1.

Setelah membuat desain selesai selanjutnya adalah membuat block programnya.

Block program untuk membuat submenu

Berikut adalah block program yang dibuat untuk membuat submenu di app inventor atau kodular

Adapun penjelasan sedikit mengenai block program diatas, block program ini dibuat pada screen 1 dan pada saat label icon menu di klik maka akan membuka screen baru yang bernama “Menu” dibarengi dengan value yang dikirim yang diisi dengan nama screen sebelum membuka screen menu.

lalu pada bagian block program “when Screen1 back pressed” ada yang dikosongkan atau tidak diisi. Itu maksudnya adalah untuk menonaktifkan tombol back pada smartphone ketika user menekan tombol tersebut.

Selanjutnya adalah block program pada screen menu, block program diatas adalah block program awalan dimana diawali dengan tidak menampilkan submenu pada layar aplikasi, karena kita ingin submenu tampil ketika menu diklik atau dipilih oleh user. Sama seperti penjelasan diatas sebelumnya pada bagian “when Menu back pressed” yang dikosongkan berfungsi untuk menonaktifkan tombol back pada smartphone.

Masih pada screen menu seperti yang kita lihat pada gambar diatas, untuk menampilkan submenu hanya menggunakan teknik visible dimana kita hanya perlu menampilkan atau tidak menampilkan dengan mengatur visible pada komponen vertical arrangement yang membukus submenu ke kondisi false atau true.

kondisi false untuk tidak menampilkan submenu dan true untuk menampilkan submenu.

Block program diatas adalah block yang dibuat untuk menampilkan halaman ketika menu sudah di klik, pada bagian ini hanya contoh saja tentunya sebelum membuat block ini pastikan kamu sudah membuat screen yang akan ditampilkan.

Kamu bisa juga menampilkan halaman dinamis dengan menggunakan konsep visible pada komponen vertical arrangement.

Build project ke aplikasi

untuk mengetahui apakah project aplikasi yang kita buat berfungsi atau tidak maka kita perlu melakukan build project ke aplikasi, berikut dibawah ini adalah tampilan dari aplikasi yang dibuat dari tutorial ini

Baiklah mungkin cukup segini saja yang bisa saya sampaikan mudah-mudahan bermanfaat dan apabila ada yang tidak dimengerti dapat menuliskan pertanyaan di komentar di bawah ini.