Tab Host adalah salah satu widget UI (User Inteface) yang berfungsi untuk membuat beberapa menu dalam satu screen (activity). Misalkan, aplikasi streaming online pasti tab host berperan untuk menentukan menu berdasarkan genre film atau berdasarkan waktu rilis, popular, rating film, dan sebagainya.
1. Aktifkan web browser di komputer atau laptop anda.
2. Ketikkan thunkable.com pada address bar. Tunggu sampai halaman utama muncul.
3. Setelah itu, anda diminta login untuk memasuki akses project Thunkable. Klik
Sign In. Ini melakukan login melalui Gmail Oauth dengan mengisi akun gmail anda. Tunggu beberapa saat sampai redirect ke homepage. Lihat gambar di bawah ini.
 |
| Tampilan Dashboard Thunkable. |
4. Klik
Create New App untuk membuat project baru. Kemudian, nama judul project sesuai dengan keinginan anda. Misalkan, nama judul project adalah "tabhost1". Klik
OK.
 |
| Tampilan Pembuatan Project Baru. |
5. Masuki bagian Pallete, carilah widget Horizontal Scroll Arrange (untuk banyak menu button) atau Horizontal Arrangement untuk membuat menu button di dalam tab host. Klik tahan pada Horizontal Scroll Arrange atau Horizontal Arrangement lalu tarik ke layar Screen. Aturlah ukuran layout tersebut dengan width : 96 % dan height : fill parent. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka
ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
 |
| Tampilan Pembuatan Layout Menu Tab Host. |
6. Masuki bagian Pallete, carilah widget Horizontal Arrangement untuk membuat jarak spasi antara layout menu tab dengan layout isi tab. Klik tahan pada Horizontal Arrangement lalu tarik ke layar Screen. Aturlah ukuran layout tersebut dengan width : automatic dan height : 1%. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka
ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
 |
| Tampilan Pembuatan Jarak Spasi. |
7. Masuki bagian Pallete, carilah widget Vertical Arrangement untuk membuat layout untuk isi tab host. Klik tahan pada Vertical Arrangement lalu tarik ke layar Screen. Aturlah ukuran layout tersebut dengan width : 96% dan height : fill parent. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka
ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
 |
| Tampilan Pembuatan Isi Tab Host. |
8. Masuki bagian Pallete, carilah widget Label untuk menampilkan teks di dalam isi tab host. Klik tahan pada Horizontal Arrangement lalu tarik ke layar Screen. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka
ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
 |
| Tampilan Penambahan Label ke dalam Isi Tab Host. |
9. Membuat Teks untuk label yang ada di dalam isi tab host. Ini tujuan untuk menampilkan teks sekaligus pembeda antara 1 isi tab host dengan isi tab host yang lain. Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka
ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
 |
| Tampilan Pengubahan Teks Label untuk pembeda 4 Isi Tab Host. |
10. Sembunyikan tampilan isi tab host di Screen dengan menghilangkan tanda ceklist opsi Visible.
 |
| Tampilan Penyembunyian pada Isi Tab Host. |
Disini membutuhkan 4 isi tab host, maka kamu harus membuat 3 lagi layout isi tab dengan cara yang sama (Langkah 8 - 10).
11. Gantikan warna background pada Screen sesuai keinginan kamu, asalkan bisa menampilkan menu tab host dan isi tab tersebut.
 |
| Tampilan Penggantian Warna Backround pada Screen. |
12. Masuki bagian Pallete, carilah widget Button untuk membuat tombol menu pada menu tab host. Klik tahan pada Button lalu tarik ke layar Screen. Kemudian isikan teks yakni "Tab Host 1". Apabila kamu ingin mengubah nama variabel pada layout tersebut, maka
ikuti struktur penamaan variabel yang diatas atau sesuai dengan keinginan kamu.
Disini membutuhkan 4 button menu, maka maka kamu harus membuat 3 lagi button menu dengan cara yang sama (Langkah 11 - 12).
13. Aturlah warna background layout ment tab host dan isi tab host yang sesuai keinginan kamu.
 |
| Tampilan Penggantian Warna Background pada Layout Menu Tab Host dan Isi Tab Host. |
14. Klik Blocks untuk memulai program blok. Tunggu beberapa saat sampai muncul tampilan kerja Blocks.
15. Buatlah blok program untuk Screen1.Initialize(). Ini berguna untuk membuka aplikasi pertama kali yang memanggil isi tab host 1.
 |
| Tampilan Pembuatan Blok Program untuk membuka aplikasi. |
16. Buatlah blok program untuk Button1.Click(). Ini berguna untuk memanggil isi tab host 1.
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 1. |
17. Buatlah blok program untuk Button2.Click(). Ini berguna untuk memanggil isi tab host 2.
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 2. |
18. Buatlah blok program untuk Button3.Click(). Ini berguna untuk memanggil isi tab host 3.
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 3. |
19. Buatlah blok program untuk Button4.Click(). Ini berguna untuk memanggil isi tab host 4.
 |
| Tampilan Pembuatan Blok Program untuk memanggil isi tab host 4. |
20. Klik
Export >>> App (save .apk to my computer) untuk mengkonversi ke aplikasi Android siap pakai (.apk) dan menyimpan ke dalam komputer. Tunggu beberapa waktu sampai aplikasi tersebut berhasil tersimpan di dalam komputer.
21. Aktifkan software emulator Android yang ada di dalam komputer atau laptop anda. Tunggu beberapa saat sampai muncul tampilan dashboard emulator tadi.
22. Klik ikon
Instal APK / APP tergantung dari nama emulator Android tersebut.
23. Pilihlah file aplikasi (.apk) website mobile yang anda unduh (download) tadi. Klik
Open, tunggu beberapa saat sampai terinstal dan buka aplikasi tersebut di dalam emulator Android. Kamu bisa melihat tampilan tab host dengan menu button di dalam aplikasi tadi.
0 Komentar untuk "Cara Membuat Tab Host (Button Menu) menggunakan Thunkable"