Asseting di Android? Makanan apa itu?

Background

Di artikel sebelumnya, dijelaskan mengenai bagaimana cara memanfaatkan material.io untuk kebutuhan desain mockup UI untuk aplikasi Android. Selanjutnya apa? Implementasi!

Saya (lagi-lagi) kedapatan tugas yang saya sendiri belum sepenuhnya mengerti, yaitu melakukan importing asset yang telah dibuat sebelumnya untuk dimasukkan ke dalam projek. Tetapi berkat bantuan teman saya yang sangat baik, rupawan dan suka menabung (eh?). Saya diberikan insight baru lagi. Thanks all.

Res

Tampilan Layouting

Berdasarkan struktur berkas android, kita ingin menaruh file-file aset kita di folder res. Tapi tidak langsung di folder tersebut, kita perlu membuat folder baru lagi dibawah folder res sesuai kebutuhan (dan agar rapi). Berikut susunan yang diimplementasikan oleh kelompok kami.

• res/drawables untuk menyimpan aset-aset yang digunakan untuk tampilan vektor, icon.
• res/font untuk menyimpan aset font.
• res/layout untuk melakukan layouting aplikasi. Biasanya di folder ini kita melakukan implementasi dari mockup yang kita buat sebelumnya. Selanjutnya kamu bisa baca lebih jauh di sini.
• res/mipmap untuk menyimpan semacam mipmap (biasanya gambar).
• res/values untuk menyimpan predefined values yang bisa kita gunakan sebagai referensi (anggap sebagai variabel).
• res/xml biasanya menyimpan aturan lain.

XML Everywhere

Bahkan vector pun pakai xml

Hal yang menarik adalah kebanyakan berkas yang akan dibuat di folder res adalah berkas-berkas berekstensi XML. Hal ini karena android menggunakan XML untuk mendeskripsikan aturan-aturan yang ada.

• File vector diubah menjadi VectorDrawables yang menggunakan xml
• File Font tetap seperti awalnya (otf, ttf), tetapi untuk membuat font family biasanya dibuat xml baru yang mereferensikan file otf dan ttf yang ada.
• File layout dibuat menggunakan xml.
• File mipmap memiliki dua jenis, file originalnya (.png misalnya) dan .xml nya yang mendefinisikan gambar terkait.
• File values menggunakan xml yang menyimpan nama variabel dan valuenya.
• File xml… self explainatory kan yak.

Drawable

Karena rata-rata saya membuat aset berupa vector, saya memasukan aset terkait di folder drawable. Caranya Klik Kanan di folder > New > Vector Asset. Disitu kita bisa memilih apakah kita dapat memilih apakah kita akan melakukan import file vektor dari luat (SVG, PSD), atau menggunakan resources yang sudah ada dari androidnya. Selanjutnya, Android Studio akan secara otomatis membuat file XML nya.

Add New Vector Asset

Font

Selain Vector, saya juga menambah font-font yang diperlukan, seperti yang ditentukan dalam design guideline dari aplikasi temancatat, seperti berikut:

Guideline Desain temancatat

Menambah font baru bisa langsung dilakukan dengan menambah font ke foldernya. Tetapi untuk dapat melakukan implementasi font family kita perlu membuat XML secara manual.

Values

Values yang saya lengkapi sebenarnya adalah warna, sesuai dengan design guideline yang ada. Kita hanya perlu membuat file color.xml yang kurang lebih berisi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#7E57E2</color>
    <color name="colorPrimaryDark">#4D2C91</color>
    <color name="colorAccent">#B085F5</color>
    <color name="colorSecondary">#69F0AE</color>
    <color name="colorSecondaryDark">#2BBD7E</color>
    <color name="colorSecondaryAccent">#9FFFE0</color>
    <color name="colorTertiaryGrey">#7A7A7A</color>
    <color name="colorTertiaryWhite">#FFFFFF</color>
    <color name="colorTertiaryBlack">#000000</color>
    <color name="colorTertiaryLightBlue">#CBB0FF</color>
    <color name="colorTertiaryGreen">#00B67E</color>
    <color name="colorNominalRed">#F6263E</color>
    <color name="colorNominalGreen">#39AA1D</color>
</resources>

Kemudian untuk menggunakan salah satu warna yang ada, kita hanya perlu menambah string @color/(warna yang diinginkan), misalnya ingin menambahkan warna primer, kita hanya perlu tambahkan @color/colorPrimary di kolom warna.

Penutup, wait bagaimana dengan Layout, Mipmap, XML?

Well, karena saya hanya berurusan dengan tiga folder diatas (dan karena artikel sudah lumayan panjang), saya rasa sekian dulu dari saya. Beberapa further reading yang bisa dibaca:

Hidup Kamu Penuh Constraint? Di Android juga Ada, ConstraintLayout Namanya

Understanding VectorDrawable pathData commands in Android

Terima kasih, sampai jumpa di artikel selanjutnya!