Add

Selasa, 07 November 2023

Cara Menggunakan Font Awesome Icon di Aplikasi Android - Ngulik Kode











Ngulik Kode

- Pada tutorial ini, saya akan mencoba menerapkan FontAwesome icon pada android project menggunakan android studio. FontAwesome adalah semacam framework yang disediakan untuk menghemat waktu ketika pemasangannya.






Pertama, anda tidak perlu khawatir tentang masalah ukuran layar yang berbeda-beda pada smartphone. jika anda ingin menggunakan file PNG, anda harus membuat empat versi ukuran yang berbeda dari setiap icon. tidak hanya itu, jika ukuran layar yang terlalu besar dan tidak sebanding dengan icon yang dibuat maka gambar akan terlihat pecah. hal ini pasti yang ingin anda hindari, dengan FontAwesome anda hanya memerlukan satu berkas file TTF.






Kedua, anda dapat mengandalkan salah satu yang paling kaya dan lengkap dari icon set yang tersedia secara gratis. Sekarang, pengguna sudah mulai terbiasa dengan gaya FontAwesome, karena itu banyak digunakan pada web. Anda tidak perlu banyak membuang waktu hanya untuk mencari icon yang indah, komprenshif, dan gratis untuk pengguna komersial.







1. Bagaimana FontAwesome Bekerja



Mari kita luangkan waktu untuk memahami bagaimana FontAwesome bekerja. Ide yang muncul dibalik paket icon FontAwesome sederhana, icon diperlukan sebagai karakter. Mungkin anda memperhatikan beberapa karakter diperlukan sebagai teks. Misalnya anda dapat dengan mudah copy dan paste karakter ini

ф

atau juga karakter ini



. Bahkan anda dapat dengan mudah menggunakannya dengan text editor sederhana. hal ini mungkin juga untuk mengubah ukuran dan warna karakter.






Lihatlah pada daftar icon yang tersedia
ini. Anda memilih icon dari daftar yang sudah disediakan, dan perhatikan karakter unicode, serta penggunaanya pada TextView, di android studio untuk membuat icon dengan menggunakan Font Awesome.







2. Iport Berkas FontAwesome




Sebelum masuk ke pembuatan terlebih dahulu anda harus memiliki file yang dibutuhkan dari FontAwesome anda dapat men-downloadnya dari
atau anda juga dapat men-downloadnya langsung dari web resmi FontAwesome.




Setelah anda men-download file FontAwesome, dalam kasus ini anda tidak perlu menggunakanya semua dari file FontAwesome yang telah anda download. Anda hanya membutuhkan file

fontawesome-webfont.ttf

yang terletak pada folder.




Dalam proyek Android anda, arahkan

app



src



main,

dalam direktori

main

harus terdapat folder bernama assets. Jika belum ada folder assets dalam direktori main anda dapat membuatnya terlebih dahulu, seperti membuat folder biasa. Dan jika sudah membuat folder anda dapat meletakan file yang bernama

fontawesome-webfont.ttf

tadi kedalam folder assets.












3. Tempatkan Kode Icon di File String.xml











Sekarang anda telah berhasil memasukan file

fontawesome-webfont.ttf

kedalam proyek Android anda untuk menggunakannya. Untuk menempatkan huruf icon menggunakan kode di android pada file

string.xml

maka anda hanya menuliskan pada file

string.xml

di direktori

res/values/string.xml

seperti kode dibawah ini.




res/values/string.xml




Dapatkan kode icon





4. Menampilkan Font Awesome Pada Layout



Dalam file layout android ini, yang nantinya akan menampilkan FontAwesome dengan menggunakan TextView, Button dan lain-lain untuk menempatkan icon yang mengagumkan dimanapun anda inginkan. Contoh kode layout dengan bentuk file XML android akan terlihat seperti kode dibawah ini.






res/layout/activity_main.xml







Pada tata letak anda sudah selesai, sekarang saatnya untuk bekerja dengan menggunakan file activity java. Buka file activity java anda yaitu file

MainActivity.java

dan menempatkan sedikit kode pada method

onCreate

. Maka file

MainActivity.java

akan terlihat seperti kode dibawah ini.




app/java/namapackage/MainActivity.java





Setelah melakukan perubahan sedikit dan menambahkan kode-kode seperti diatas proses sudah selesai sampai disini, sekarang anda dapat mencobanya dengan menjalankan project android studio anda menggunakan emulator atau menggunakan smartphone android langsung. Maka hasilnya akan seperti gambar dibawah ini.













0 komentar:

Posting Komentar