Font Awesome merupakan ikon toolkit yang sangat populer digunakan di banyak situs web. Ada dua pilihan yakni ikon gratis dan pro, tetapi kalian dapat menemukan sebagian besar ikon tersebut secara gratis. Tutorial yang akan kita bahas kali ini adalah tentang cara menggunakan ikon Font Awesome di Android Studio.
Setiap ikon akan diwakili oleh unicode (& # xf17b;). Unicode ini dapat digunakan untuk menampilkan ikon di TextView. Dalam TextView biasa, semua atribut gaya teks (warna, ukuran, bantalan, dan sebagainya) dapat diterapkan.
Sebagai contoh jika Anda ingin menampilkan logo Robot android, Anda dapat menggunakan & # xf17b; unicode sebagai value TextView.
Font Awesome Android Library
Untuk menggunakan koleksi ikon Font Awesome, kalian harus menambahkan jenis huruf font awesome ke aset secara langsung dan menerapkan fontFace yang sesuai ke TextView. Ikon juga dapat ditampilkan di widget lain seperti di Tombol, Menu, Bottom Navigation dan Navigation Drawer dan lain-lain. Menampilkan ikon dalam tampilan non-tekstual membutuhkan usaha. Jadi saya telah menulis perpustakaan dengan memasukkan semua metode yang diperlukan untuk membuat ikon di banyak widget.
Untuk memulai, masukkan fontawesome di build.gradle dan sinkronkan project kalian.
dependencies {
// font awesome
implementation 'info.androidhive:fontawesome:0.0.5'
}
Menampilkan Ikon di TextView
Cara termudah untuk menampilkan ikon font adalah dengan menggunakan teks FontTextView dengan menetapkan nama ikon yang sesuai sebagai value teks tersebut. Widget ini memanjang dari AppCompatTextView, jadi semua atribut tampilan teks berlaku untuk widget ini.
info.androidhive.fontawesome.FontTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fa_calendar_check_solid"
android:textColor="@color/icon_color"
android:textSize="@dimen/icon_size"
app:solid_icon="true" />
- solid_icon: Untuk menampilkan ikon solid, tetapkan value ini sebagai true.
- brand_icon: Untuk menampilkan ikon merek, setel value ini sebagai true.
Menggunakan FontDrawable
Menggunakan ikon dalam tata letak xml itu mudah, tetapi jika ingin menggunakan ikon untuk widget lain seperti tombol atau menu, kalian dapat menggunakan elemen FontDrawable untuk menerapkan ikon.
Sebagai contoh, jika ingin menggunakan ikon font awesome untuk Floating Action Button, kalian dapat menggunakan FontDrawable seperti yang ditunjukkan di bawah ini.
Menggunakan Font Awesome dalam Menu (Bottom Navigation, Navigation Drawer, atau sejenisnya)
Kalian juga dapat menggunakan ikon font di widget yang menggunakan file menu untuk membuat item seperti ikon Toolbar, Bottom Navigation, Navigation Drawer, atau sejenisnya. Untuk merender ikon dalam menu, gunakan FontDrawable untuk mengatur ikon, tetapi perlu beberapa peretasan pengaturan melalui kode java.
Contoh di bawah ini menunjukkan ikon-ikon font awesome di menu Navigasi Drawer. Contoh lengkap dapat ditemukan di link ini.
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
intDrawerLayout();
}
/**
* Changing navigation drawer icons
* This involves looping through menu items and applying icons
*/
private void intDrawerLayout() {
NavigationView navigationView = findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
ImageView iconHeader = navigationView.getHeaderView(0).findViewById(R.id.nav_header_icon);
FontDrawable drawable = new FontDrawable(this, R.string.fa_font_awesome, false, true);
drawable.setTextColor(ContextCompat.getColor(this, android.R.color.white));
drawable.setTextSize(50);
iconHeader.setImageDrawable(drawable);
int[] icons = {
R.string.fa_home_solid, R.string.fa_calendar_alt_solid, R.string.fa_user_solid,
R.string.fa_heart_solid, R.string.fa_comment_solid, R.string.fa_dollar_sign_solid, R.string.fa_gift_solid
};
renderMenuIcons(navigationView.getMenu(), icons, true, false);
int[] iconsSubmenu = {R.string.fa_cog_solid, R.string.fa_sign_out_alt_solid};
renderMenuIcons(navigationView.getMenu().getItem(7).getSubMenu(), iconsSubmenu, true, false);
}
/**
* Looping through menu icons are applying font drawable
*/
private void renderMenuIcons(Menu menu, int[] icons, boolean isSolid, boolean isBrand) {
for (int i = 0; i < menu.size(); i++) {
MenuItem menuItem = menu.getItem(i);
if (!menuItem.hasSubMenu()) {
FontDrawable drawable = new FontDrawable(this, icons[i], isSolid, isBrand);
drawable.setTextColor(ContextCompat.getColor(this, R.color.icon_nav_drawer));
drawable.setTextSize(22);
menu.getItem(i).setIcon(drawable);
}
}
}
}
Nah, sekarang kalian sudah tahu cara menggunakan ikon font awesome di aplikasi/project Android Studio ya.
Kalian juga dapat mendownload contoh source code yang ada di sini.
Jika ada yang belum jelas, silahkan tinggalkan jejak komentar. Happy Coding 🙂
