0
0
Material icon ini biasanya didapatkan dari Google Fonts yang dimana font tersebut akan berubah menjadi ikon dengan sesuai kode ikon sendiri. Misalkan, untuk membuat ikon pencarian, maka perlu ketikkan “search” di kolom teks pada komponen UI seperti label, button, dkk. Di dalam App Inventor 2 ini tidak menyediakan typeface font yang dikhususkan untuk ikon yang dimana bisa dijadikan lebih menarik untuk tampilan UI aplikasi Android sendiri.
Cara Mendapatkan Font Material Icon
Untuk mendapatkan file font Material Icon yang biasanya sering ditemukan di Google Font, maka kamu bisa mengunduh file tersebut dengan klik link yang tertera di bawah ini…
Setelah kamu mendapatkan file font tersebut, kamu bisa menambahkan file tersebut ke dalam Media Assets pada App Inventor 2 itu sendiri dalam mempercantik tampilan aplikasi Android buatan kamu.
Penulis memberikan tutorial untuk menggunakan Material Icon Font ke beberapa komponen UI seperti Label, Button, dkk pada App Inventor 2.
LANGKAH-LANGKAH
1. Kunjungi situs MIT App Inventor.
2. Klik Create App.
3. Lakukan login seperti biasanya dengan Google.
3. Buatlah project aplikasi baru dengan klik New Project.
4. Masukkan nama project aplikasi tanpa spasi yaitu “font_material_icon” beserta Aturlah tampilan UI aplikasinya, klik OK.
5. Aturlah tampilan tata letak menjadi rata tengah (center) semua.
6. Klik Upload File.
7. Klik Browse untuk memasukkan file font tadi.
8. Setelah dipilih file font tadi, maka bisa klik OK / Open.
9. Klik OK.
10. Tambahkan 2 komponen yakni Label dan Button ke dalam Screen aplikasi.
11. Aturlah ukuran teks pada masing-masing komponen di dalam kolom FontSize menjadi ukuran 40 pt.
12. Ubahlah Typeface Font untuk masing-masing komponen menjadi “MaterialIcons-Regular.ttf”.
13. Masukkan kata “home” ke dalam kolom teks pada komponen Label, tekan Enter.
14. Masukkan kata “search” ke dalam kolom teks pada komponen Button, tekan Enter.
15. Berikut hasilnya.
Selesai.
CATATAN
Ada beberapa kode simbol untuk ikon yang diambil dari kata kunci itu tidak muncul sama sekali alias karena file font Material Icon yang ada tutorial ini tidak ada perubahan update terbaru. Sedangkan, font icon ini semakin banyak saja yang dimana bisa dipakai dengan integrasikan ke HTML secara online yang biasanya bisa menggunakan Web View dalam App Inventor 2.
PENUTUP
Kini, kamu bisa menambahkan ikon untuk beberapa komponen UI seperti Label, Button, dkk ke dalam aplikasi Android buatan kamu dengan sesuai kebutuhan dan fungsi dari aplikasi di dalam App Inventor 2. Meskipun, ada beberapa font icon yang tidak tersedia di beberapa icon terbaru yang bisa dilihat dari Google Fonts. Setidaknya, kamu bisa menambahkan ikon untuk mempercantik tampilan UI aplikasi Android yang kamu buat menggunakan App Inventor 2.
