Cara Menggunakan Font Awesome Icon di Aplikasi Android

Android Android Studio

Ngulik Kode

16.09

1

Android, Android Studio

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 FontAwesome 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 github 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 disini

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.