Cara Membuat Screen Menu Utama Aplikasi Android di MIT App Investor 2 | Pelangi Blog

Cara Membuat Screen Menu Utama Aplikasi Android di MIT App Investor 2

MIT App Investor 2 (AI2) memungkinkan kamu membuat aplikasi android, membuat screen halaman utama, menambahkan tombol, text, dan gambar.

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

Upload Image Screen MIT App Investor 2 (AI2)

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”

Mengatur HorizontalArrangement MIT App Investor 2

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

Mengatur TableArrangement MIT App Investor 2 (AI2)

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”

Menambah Text Selamat Datang di MIT App Investor 2 (AI2)

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.

Menambahkan Button dan Image MIT App Investor 2 (AI2)

Nah, untuk SCREENSHOT DEMO mengenai tutorial ini, kamu bisa melihat gambar paling atas.

COMMENTS

Nama

Bisnis Online Blogging Doa-doa Elektronik Fiqih Gaming Inspirasi Internet Keluarga Kisah teladan Life Pekerjaan Pendidikan Relationship Religi Teknologi Tips Tutorial Blog
false
ltr
item
Pelangi Blog: Cara Membuat Screen Menu Utama Aplikasi Android di MIT App Investor 2
Cara Membuat Screen Menu Utama Aplikasi Android di MIT App Investor 2
MIT App Investor 2 (AI2) memungkinkan kamu membuat aplikasi android, membuat screen halaman utama, menambahkan tombol, text, dan gambar.
https://3.bp.blogspot.com/-k1OmOt9_diE/WbOd2-vN-JI/AAAAAAAAEXM/QYYpJzHF0w4WBmEdtlff-qCJ0ZWysfvHgCLcBGAs/s640/Cara%2BMembuat%2BScreen%2BMenu%2BUtama%2BAplikasi%2BAndroid%2Bdi%2BMIT%2BApp%2BInvestor%2B2.jpg
https://3.bp.blogspot.com/-k1OmOt9_diE/WbOd2-vN-JI/AAAAAAAAEXM/QYYpJzHF0w4WBmEdtlff-qCJ0ZWysfvHgCLcBGAs/s72-c/Cara%2BMembuat%2BScreen%2BMenu%2BUtama%2BAplikasi%2BAndroid%2Bdi%2BMIT%2BApp%2BInvestor%2B2.jpg
Pelangi Blog
http://www.pelangiblog.com/2017/08/cara-membuat-screen-menu-utama-aplikasi.html
http://www.pelangiblog.com/
http://www.pelangiblog.com/
http://www.pelangiblog.com/2017/08/cara-membuat-screen-menu-utama-aplikasi.html
true
6152984874501812302
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy