Penggunaan Font Awesome pada Android Studio

Android Studio Font Awesome

Tutorial berikut tentang cara penggunaan font awesome pada Android Studio. Bagi yang belum mengenal apa itu font awesome.

Font Awesome adalah sekumpulan ikon scalable vector graphic yang telah dibuat sedemikian rupa dan telah siap pakai. Font awesome dapat diinstall menggunakan system font, CSS Font, JS Font dan lain sebagainya. Artinya dapat secara luas digunakan pada berbagai platform baik web, mobile, maupun desktop.

Penggunaan Font Awesome pada Android Studio

Untuk menggunakan Font Awesome pada Android Studio, hal yang pertama dilakukan adalah dengan download terlebih dahulu system font yang berekstensi .TTF yang dibutuhkan. Karena font awesome terbagi menjadi 3 kategori font yaitu Solid Font, Regular Font, dan Brand Font. Untuk keseluruhannya dapat kalian download https://drive.google.com/open?id=1qZOaWCvglP9DdMqfSvNhaeub6OM_3arD.

[ads id="ads1"]

Buat Project Baru Android Studio

Buatlah sebuah project baru pada Android Studio, lalu tambahkan font diatas kedalam folder resource res/font.

Font Awesome Resource di Android Studio

[ads id="ads2"]

Cara Penggunaan

Untuk cara penggunaannya tidak bisa langsung copy paste ke dalam teks/button. Kita memerlukan cheatsheet dari ikon yang ingin dipakai.
Daftar cheatsheet dapat kalian lihat pada artikel Cheatsheet Font Awesome 5 atau di https://fontawesome.com/cheatsheet.

Pada contoh, kita akan menggunakan cheatsheet dengan kode f075 atau fa-comment jika menggunakan CSS Font ( Preview : ).
Buatlah sebuah Button baru pada layout android,
Tag android:fontFamily diisi dengan @font/solid dan
Tag android:text diisi dengan \uf075 KOMENTAR.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/solid"
        android:text="\uf075 KOMENTAR">
    </Button>
</LinearLayout>

Pada contoh diatas diperlukan karakter \u didepan kode cheatsheet sebagai tanda bahwa text tersebut adalah format unicode. Sehingga hasilnya dapat dilihat dibawah ini :

Font Awesome Preview


Selamat mencoba.

0/Post a Comment/Comments

Lebih baru Lebih lama