Cara Membuat Screen Menu Utama Aplikasi Android di MIT App Investor 2
Membuat aplikasi android di MIT App Investor 2 (AI2) ternyata ya gampang susah, memang sih kamu hanya perlu menyeret dan meletakkan komponen, tetapi juga perlu mengetahui ilmu dasar pengkodingan. Tapi tak masalah, MIT App Investor 2 (AI2) juga banyak memmebrikan tutorial mengenai fungsi dari setiap komponen, lagian kamu juga bisa menemukan banyak tutorial dari para pengguna di Youtube dan blog-blog lainnya.
Oke, pada kali ini, saya akan mencoba untuk sharing tentang bagaimana cara membuat halaman menu utama aplikasi android yang akan dibuat di MIT App Investor 2 (AI2), coba simak ya :
Mengatur Screen Halaman Menu
1. Klik “SCREEN1” pada menu atas halaman komponen
Catatan :
Halaman pertama yang muncul di aplikasi androidmu nanti adalah “Screen1”, tetapi di sini saya membuat “Screen1” menjadi halaman menu utama. Kalau ingin menambah screen lagi, caranya dengan klik “Add Screen”.
2. Upload gambar screen halaman
3. Atur Propertis untuk “SCREEN1”
Catatan :
Untuk propertis “Screen1”, di sini saya hanya memberikan sedikit penjelasan seperti contoh aplikasi yang saya buat, terserah kamu bagaimana kamu mengaturnya nanti :
AlignHorizontal : Left
(karena saya ingin menampilkan setiap komponen horizontal di sebelah kiri ke kanan)
AlignVertical : Top,
(karena saya ingin menampilkan setiap komponen vertikal dengan ututan paling atas ke bawah)
ScreenOrientation : Landscape,
(karena saya ingin menampilkan menu halaman landscape)
Mengatur Komponen Layout
Komponen layout berfungsi untuk mengatur tata letak komponen seperti tombol, text, gambar, dan lainnya pada tampilan halaman screen. Di sini saya cuma membuat 2 komponen layout, yaitu HorizontalArrangement1 dan TableArrangement1.
Coba perhatikan cara mengatur komponen HorizontalArrangement1 :
1. Klik Layout
2. Pilih HorizontalArrangement1, lalu seret ke halaman viewer
3. Isi AlignHorizontal dan AlignVerticaldengan “Center”, (karena saya ingin meampilkan text di tengah-tengah)
4. Pilih “None” pada “BACKGROUNDCOLOR” agat tidak ada backgroud yang menghalangi tampilan screen
5. Atur tampilan kolom “HEIGHT” dan kolom “WIDTH”
Coba perhatikan cara mengatur komponen TableArrangement1 :
1. Klik Layout
2. Pilih TableArrangement1, lalu seret ke halaman viewer
3. Ketik angka 4 pada “Coloums” untuk mengisi 2 kolom komponen
4. Atur ukuran kolom “HEIGHT” dan kolom “WIDTH”
5. Ketik angka 3 pada “Rows” untuk mengisi sebanyak 3 baris komponen
Menampilkan Text Selamat Datang
Di sini saya ingin menampilkan text “Selamat Datang” tepat di atas menu utama atau “SCREEN1”, caranya sebagai berikut :
1. Pilih menu “USER INTERFACE” lalu pilih “IMAGE”
2. Seret komponen “IMAGE” ke komponen “HorizontalArrangement1” karena saya menampilkan imagenya di komponen HorizontalArrangement1
3. Upload gambar text “Selamat Datang”
Catatan :
Pastikan kamu sudah menyiapkan gambar berupa text “Selamat Datang” di komputermu, gambar itu juga harus berupa file .GIF agar backgroud gambar transparan
4. Atur ukuran kolom “HEIGHT” dan kolom “WIDTH”
Menambahkan Tombol dan Gambar
Selanjutnya, saya akan menambahkan beberapa komponen tombol pada “SCREEN1”, caranya sebagai berikut ini :
1. Pilih menu “USER INTERFACE” lalu pilih “BUTTON”
2. Seret komponen “BUTTON” ke halaman viewer
3. Atus tampilan komponen “BUTTON”
4. Atur ukuran kolom “HEIGHT” dan kolom “WIDTH”
5. Upload gambar sebagai gambar background “BUTTON”
6. Ganti text “BUTTON” dan pilih warna text
7. Lakukan seperti ini untuk mengatur tombol “BUTTOn” lainnya.
Nah, untuk SCREENSHOT DEMO mengenai tutorial ini, kamu bisa melihat gambar paling atas.
Untuk lebih jelas mengenai TUTORIAL dan DEMO, bisa dilihat pada video berikut ini :
Baca juga artikel terkait layanan web MIT App Investor 2 (AI2) :
Cara Memasukkan Link Website ke Button Image di MIT App Investor 2 (AI2)
Cara Menghubungkan 2 Screen Aplikasi Android di MIT App Investor 2 (AI2)
Cara Membuat Sound Klik Pada Tombol Aplikasi Android di MIT App Investor 2 (AI2)
Cara Membuat Tombol Exit Dengan Notifikasi di MIT App Investor 2 (AI2)
Cara Membuat Form Email (Mengirim Email) di MIT App Investor 2 (AI2).
