Meskipun aplikasi hanya dapat berisi teks dan warna, Anda mungkin ingin menambahkan lebih banyak elemen visual, seperti logo atau ilustrasi. Android memiliki praktik terbaik khusus untuk menambahkan grafis ke aplikasi Anda beserta berbagai library untuk membuat efek grafis atau menambahkan gerakan.
Aset Android disebut sebagai drawable, yakni jenis resource yang digambar di layar. Ini mencakup, tetapi tidak terbatas pada, bitmap, bentuk, dan vektor.
Saat membuat gambar dan grafik, perhatikan hal-hal berikut:
- Hindari menyertakan teks yang tidak dapat diubah dalam aset.
- Gunakan format vektor terlebih dahulu jika memungkinkan.
- Menyediakan aset untuk bucket resolusi.
- Berikan scrim yang memadai antara gambar latar dan teks.
- Meskipun Android dapat menghasilkan efek gambar yang berbeda seperti gradien, pewarnaan, dan blur, beberapa performa memerlukan biaya yang lebih tinggi.
- Animasi Vektor Drawable menyediakan format skalabel untuk animasi UI kecil.
Cara mengekspor aset untuk Android
- Format nama aset dalam huruf kecil.
- Setel aset sederhana untuk diekspor sebagai SVG.
- Setel gambar kompleks, seperti foto, untuk diekspor sebagai WebP, PNG, JPG.
- Setel penskalaan resolusi yang benar seperti yang ditunjukkan dalam tabel berikut.
| Ukuran layar | Skala |
|---|---|
mdpi |
x1 |
hdpi |
x1,5 |
xhdpi |
X2 |
xxhdpi |
x3 |
xxxhdpi |
X4 |
Anda juga dapat mengonversi SVG ke Vector Drawable (VD) menggunakan Android Studio. Atur aset ke dalam direktori yang sesuai dengan resolusi untuk penyerahan, seperti yang ditunjukkan pada gambar berikut. Misalnya, sertakan ukuran layar dalam nama folder.
Jenis aset
Android mendukung jenis aset berikut.
Vektor
Grafik vektor adalah format lossless, yang berarti bahwa grafik vektor tidak akan kehilangan informasi visual saat diskalakan. Vektor terdiri dari titik matematika yang diisi untuk membuat gambar.
Format vektor
Android mendukung format gambar vektor berikut: SVG dan Vector Drawable.
Vector Drawable terlihat mirip dengan SVG, tetapi berbasis XML. Gradien juga mendukung
berbagai atribut, seperti gradien. Untuk informasi selengkapnya tentang apa yang didukung,
lihat VectorDrawable. Anda dapat mengonversi SVG ke Vector Drawable melalui
Vector Asset Studio.
Kasus penggunaan
Karena ukurannya yang kecil, lebih baik membuat ikon menggunakan format vektor. Animasi Vektor Drawable dapat digunakan untuk menambahkan gerakan pada ikon.
- Ilustrasi adalah gambar yang membantu mengarahkan pengguna, menjelaskan konsep, atau mengekspresikan ide. Format ini biasanya mengekspresikan gaya brand.
- Ilustrasi banner besar memberikan penekanan tinggi di antara konten lainnya, digunakan untuk menetapkan tampilan dan nuansa secara keseluruhan serta menjelaskan informasi utama.
- Ilustrasi spot berukuran lebih kecil, biasanya inline, dan mendukung konten di sekitarnya.
Raster
Grafik lossy, atau grafik yang kehilangan detail saat dimanipulasi melalui kompresi atau penskalaan, terdiri dari piksel untuk membentuk gambar. Grafis raster biasanya digunakan untuk gambar yang mendetail seperti foto atau gradien yang kompleks. Karena detail gambar hilang saat diskalakan, ekspor beberapa resolusi gambar ini.
Format raster
Android mendukung format gambar raster berikut: PNG, GIF, JPG, WebP.
Kasus penggunaan
Kasus penggunaan mencakup gambar yang memiliki berbagai tekstur yang menghasilkan palet dan gradasi warna yang luas, atau gambar yang akan memiliki kumpulan titik bezier yang terlalu rumit. Kasus penggunaan juga dapat menyertakan aset foto yang sangat mendetail seperti foto produk, detail lokasi, dan lainnya.
Ukuran
Saat membuat aset, perhatikan hal-hal berikut.
Bucket resolusi
Aplikasi Anda harus menyediakan grafik bitmap berdasarkan rentang atau bucket kepadatan layar. Sistem operasi akan otomatis menampilkan grafis yang tepat ke perangkat yang dimaksud menggunakan bucket ini. Memastikan grafis fidelitas tinggi ditampilkan di setiap perangkat dengan menyediakan aset untuk setiap bucket.
Padding
Ikon dan aset kecil serupa harus menyertakan padding intrinsik (bawaan) untuk memberi aset ruang target sentuh yang cukup dan memastikan ukuran yang konsisten.
Nama file
Aset Android dalam huruf kecil dan tidak menyertakan akhiran resolusi.
Pertahankan konvensi dan struktur penamaan yang konsisten untuk menjaga agar file dan project Anda tetap teratur. Misalnya, memberi nama ikon dengan awalan "ic_..." dapat membantu mengatur semua ikon dalam project, dan membantu mengidentifikasi ikon dengan cepat selama pengembangan.
Aset aplikasi lainnya
Ikon aplikasi
Ikon peluncur dapat ditemukan di layar utama. Temukan ikon monokrom di UI Sistem, termasuk notifikasi monokrom, status bar, dan widget.
Format ikon aplikasi sebagai vektor drawable untuk ikon adaptif dan PNG untuk ikon lama. Untuk mempelajari lebih lanjut cara membuat dan melihat pratinjau ikon aplikasi, lihat Mendesain dan Melihat Pratinjau Ikon Aplikasi.
Layar pembuka
Mulai Android 12, aplikasi Anda dapat menampilkan layar pembuka animasi yang menampilkan ikon aplikasi saat aplikasi terbuka.
Penempatan
Perhatikan cara gambar harus diskalakan dan diposisikan di layar. Fit, Crop, FillHeight, FillWidth, FillBounds, Inside, dan None tersedia untuk menyetel penskalaan pada gambar.
Anda juga dapat memotong gambar ke suatu bentuk untuk membuat efek tambahan.
Pemangkasan responsif
Untuk menampilkan gambar secara responsif, tentukan cara gambar akan dipangkas pada rentang titik henti sementara yang berbeda. Pada rentang titik henti sementara yang berbeda, pemangkasan dapat:
- Pertahankan satu rasio tetap.
- Sesuaikan dengan rasio yang berbeda.
- Mempertahankan tinggi gambar tetap.
Pertahankan satu rasio
Ukuran gambar dapat menyimpan satu rasio tetap di seluruh rentang titik henti sementara.
Sesuaikan dengan rasio yang berbeda
Rasio gambar dapat berubah dengan beradaptasi dengan rentang titik henti sementara yang berbeda. Misalnya, pada gambar 9, rasio gambar berubah dari 1:1 menjadi 16:9 antara titik henti sementara.
Ketinggian gambar tetap
Ukuran gambar dapat mempertahankan tinggi dan lebar yang tetap di seluruh dan dalam rentang titik henti sementara. Gambar mempertahankan tinggi tetap, sementara lebar di antara titik henti sementara dapat disesuaikan.
Efek
Android menyertakan berbagai efek gambar bawaan. Berikut ini beberapa efek yang umum:
Gradien
Di Compose, gunakan Brush untuk menggambar sesuatu di layar. Kuas yang berbeda dapat digunakan untuk menggambar bentuk dari berbagai warna atau gradien. Gunakan kuas gradien bawaan untuk mendapatkan efek gradien yang berbeda. Kuas ini memungkinkan Anda menentukan daftar warna yang ingin dibuat gradiennya.
Kuas gradien mampu menghasilkan gradien yang lebih canggih dengan menambahkan perhentian warna dan penyusunan ubin, selama Anda memberikan daftar warna dan persentase tempat berhenti terjadi. Gunakan penampung atau bentuk untuk memangkas gradien, isian warna solid, atau gambar.
Pemburaman
Terapkan efek blur ke gambar menggunakan metode Modifier.blur() dan
memberikan rasio blur. Gunakan blur dengan hati-hati karena dapat memengaruhi
performa dan hanya tersedia di perangkat yang menjalankan Android 12 dan yang lebih baru. Untuk
mengetahui informasi selengkapnya, lihat Memburamkan composable gambar.
Mode campuran
Android mampu memodifikasi gambar melalui operasi boolean serupa dan mode campuran yang mungkin Anda temukan dalam software desain, seperti gabungan atau pengali. Untuk mengetahui informasi selengkapnya, lihat BlendMode.
Tint
Gunakan mode campuran dan isian untuk menambahkan tint pada aset. Hal ini memungkinkan Anda memiliki satu aset dan menerapkan berbagai warna pada aset tersebut, sehingga dapat mengurangi jumlah aset yang dihasilkan.
Gerakan
Gambar dapat dianimasikan secara terprogram untuk membuat grafik gerak, dan bukan mengupload file gerakan. Hal ini dapat memungkinkan fleksibilitas yang lebih besar dan resource aset yang lebih kecil.
Animasi Vektor Drawable memungkinkan Anda membuat animasi UI kecil. Jika tidak, pelajari lebih lanjut cara membuat animasi dengan keyframe di Compose. Untuk mengetahui informasi selengkapnya tentang efek gambar, baca Menyesuaikan gambar.