Membuat Custom Drawable Vector FontAwesome Android Studio

Halo Sahabat Nusantara, ketemu lagi kali ini tentang Tutorial Membuat Custom Drawable Vector Font Awesome di 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.

Sebenarnya banyak sekali plugin yang mendukung FontAwesome di Android Studio, tapi adakalanya tidak sesuai dengan yang kita inginkan alias tidak kompatibel dengan ekspektasi kita. Kali ini kita akan sedikit meng-explore kegunaan drawable khususnya untuk membuat custom vector sesuai yang kita inginkan.

Untuk aplikasi di handphone umumnya Android Studio telah menyediakan contoh vector seperti pada ic_launcher.xml sebagai icon shortcut maupun icon toolbar yang bisa kita gunakan sesuai kebutuhan.

Sumber vektor tersebut terdapat pada atribut android:pathData yang berisi semacam fungsi/formula untuk membuat graphic vector ketika aplikasi berjalan atau dijalankan oleh user.

Lihat baris yang ditandai berikut :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.89,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z" />
</vector>

Untuk membuat custom vector dari format SVG (Scalable Vector Graphics), kita akan memulai dengan format gambar yang umum dipakai di dunia grafis 2D yaitu FontAwesome.com. Anda bisa download secara gratis dan dipakai secara gratis pula.

Untuk selanjutnya kita akan memerlukan aplikasi vector graphic seperti Adobe Illustrator yang berbayar maupun yang gratis seperti Inkscape 0.92.4. Intinya, aplikasi ini harus mampu mengkonversi dimensi dan size dari gambar vektor sesuai kebutuhan. Pada tutorial ini admin menggunakan Adobe Illustrator sebagai vector convertor.

[ads id="ads1"]

Konversi Vektor ke Dimensi 24

Buka Adobe Illustrator, lalu buka gambar vektor yang akan di resize dimensinya. Tekan V di keyboard lalu seleksi gambar yang diinginkan.

Pada panel Properties >> Transform ubah nilai W menjadi 24pt dan nilai H menjadi 24pt. Lalu lakukan Export gambar yang telah diubah ukurannya dengan cara Klik Kanan >> Export selection



Setelah proses ekspor selesai, buka file SVG hasil dari proses diatas menggunakan text editor Notepad++ lalu cari kode path data seperti dibawah ini :

Sampai langkah ini. Kita sudah mendapatkan vektor data yang diperlukan untuk ditampilkan sebagai drawable pada Android Studio.


[ads id="ads2"]

Membuat Drawable dari Vektor

Buka project Android Studio lalu buatlah sebuah Drawable resource file dengan nama user_circle.xml dibawah folder drawable.
Ketik kode berikut untuk membuat vektor. Pada atribut android:pathData="", ganti dengan vektor data diatas. Hasilnya kurang lebih jadi seperti ini :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
    android:fillColor="#FF000000"
    android:pathData="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,4.65A4.26,4.26,0,1,1,7.74,8.9,4.25,4.25,0,0,1,12,4.65Zm0,16.64A9.28,9.28,0,0,1,4.91,18,5.4,5.4,0,0,1,9.68,15.1a1.33,1.33,0,0,1,.34.05,6.52,6.52,0,0,0,2,.33,6.52,6.52,0,0,0,2-.33,1.33,1.33,0,0,1,.34-.05A5.4,5.4,0,0,1,19.09,18,9.28,9.28,0,0,1,12,21.29Z" />

</vector>

Contoh impelementasi pada layout Android Studio :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

        <EditText
        android:id="@+id/username"
        style="@style/form_control"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:drawableLeft="@drawable/user_circle"
        android:drawablePadding="5dp"
        android:hint="@string/prompt_email"
        android:inputType="textEmailAddress"
        android:selectAllOnFocus="true" />

        <EditText
        android:id="@+id/password"
        style="@style/form_control"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:drawableLeft="@drawable/key"
        android:drawablePadding="5dp"
        android:hint="@string/prompt_password"
        android:imeActionLabel="@string/action_sign_in_short"
        android:imeOptions="actionDone"
        android:inputType="textPassword"
        android:selectAllOnFocus="true" />
</LinearLayout>

Output:

drawable vector android studio svg to vector drawable svg to path data converterbelajar android