Mengelola resource UI aplikasi dengan Resource Manager

Resource Manager adalah jendela alat untuk mengimpor, membuat, mengelola, dan menggunakan resource di aplikasi Anda. Untuk membuka jendela alat, pilih View > Tool Windows > Resource Manager dari menu atau pilih Resource Manager di panel sisi kiri.

Gambar 1. Jendela alat Resource Manager. Jendela alat Resource Manager.

  1. Klik Add untuk menambahkan resource baru ke project Anda. Anda dapat menambahkan aset gambar, aset vektor, font, file resource, dan nilai, atau Anda dapat mengimpor drawable ke project Anda.
  2. Pilih modul untuk melihat resource khusus modul tersebut.
  3. Telusuri resource di seluruh modul dalam project Anda menggunakan kotak penelusuran.
  4. Tampilkan resource Anda sesuai dengan jenis di Resource Manager. Gunakan tab ini untuk beralih di antara setiap jenis resource. Klik ikon menu tambahan ikon menu tambahan untuk menampilkan jenis resource tambahan.
  5. Filter resource yang ditampilkan dari modul dependen lokal, library eksternal, dan framework Android menggunakan tombol filter. Anda juga dapat menggunakan filter untuk menampilkan atribut tema.
  6. Lihat pratinjau resource Anda di area konten utama. Klik kanan resource untuk melihat menu konteks tempat Anda dapat mengganti nama resource, lalu telusuri aplikasi tempat resource tersebut digunakan.
  7. Klik tombol ini untuk melihat resource sebagai kartu atau daftar.
  8. Klik tombol ini untuk mengubah ukuran pratinjau resource.

Selain fitur ini, Resource Manager juga menyediakan cara untuk mengimpor drawable secara massal ke dalam project Anda. Untuk mengimpor secara massal, Anda dapat:

  • Tarik file gambar, termasuk file SVG, langsung ke Resource Manager.
  • Gunakan wizard Import Drawables.

Untuk mengetahui informasi selengkapnya, lihat bagian Mengimpor drawable ke project Anda.

Untuk melihat informasi selengkapnya, klik dua kali resource di Resource Manager. Jika Anda memiliki beberapa versi resource, tampilan detail ini akan menampilkan setiap versi bersama kualifikasi apa pun yang terkait, seperti yang ditunjukkan pada gambar 2. Dari sini, Anda dapat mengklik dua kali versi tertentu untuk membukanya di jendela editor.

Gambar 2. Resource Manager yang menampilkan versi resource gambar untuk kepadatan layar yang berbeda.

Mengimpor drawable ke dalam project Anda

Anda dapat menggunakan Resource Manager untuk mengimpor resource gambar ke project. Untuk daftar jenis gambar yang didukung, lihat Dukungan gambar.

Untuk mengimpor resource gambar ke project Anda, lakukan langkah-langkah berikut:

  1. Tarik gambar langsung ke jendela Resource Manager di Android Studio.

    • Cara lain, Anda dapat:
      1. Mengklik ikon plus (+).
      2. Memilih Import Drawables, seperti yang ditunjukkan pada gambar 3.
      3. Memilih file dan folder yang ingin diimpor.

    Gambar 3. Pilih Import Drawables dari menu. Pilih Import Drawables dari menu.

  2. Dialog Import drawables akan muncul, seperti yang ditampilkan pada gambar 4. Dialog ini menampilkan daftar resource yang Anda impor. Anda dapat mengganti nama resource dengan mengklik kotak di atas pratinjau resource.

    Jika Anda menyediakan beberapa versi resource yang sama, tambahkan pengontrol konfigurasi perangkat yang menjelaskan konfigurasi spesifik yang didukung oleh setiap resource seperti yang dijelaskan di bagian berikut.

    Misalnya, jika Anda menyediakan beberapa versi resource yang sama untuk kepadatan layar berbeda, Anda dapat menambahkan penentu Density untuk setiap versi. Perlu diperhatikan bahwa jika ada dua atau beberapa resource yang memiliki nama dan penentu yang sama, hanya satu versi yang akan diimpor.

    Untuk mengetahui informasi selengkapnya tentang penentu resource, lihat Menyediakan resource alternatif.

    Gambar 4. Dialog Import drawables.

    Setelah Anda menamai resource dan menambahkan penentu yang diperlukan, klik Next.

  3. Layar berikutnya menampilkan ringkasan resource yang Anda impor. Setelah Anda siap mengimpor, klik Import.

Di jendela Resource Manager, resource Anda telah siap untuk digunakan dalam project, seperti yang ditunjukkan pada gambar 5.

Gambar 5. Resource Manager kini menampilkan gambar yang Anda impor. Resource Manager kini menampilkan gambar yang Anda impor.

Mengurai kepadatan drawable secara otomatis

Jika Anda mengimpor file atau folder, dan jalurnya berisi penentu kepadatan, Resource Manager akan otomatis menerapkan penentu kepadatan sebagai bagian dari impor. Resource Manager dapat menguraikan penentu kepadatan Android dan faktor penskalaan iOS.

Tabel ini mencantumkan perbedaan kepadatan yang didukung untuk Android dan iOS:

Kepadatan Penentu kepadatan Android Faktor penskalaan iOS
Kepadatan rendah (~120 dpi) ldpi tidak didukung
Kepadatan menengah (~160 dpi) mdpi skala asli
Kepadatan tinggi (~240 dpi) hdpi tidak didukung
Kepadatan sangat tinggi(~320 dpi) xhdpi @2x
Kepadatan amat sangat tinggi (~480 dpi) xxhdpi @3x
Kepadatan sangat amat sangat tinggi (~640 dpi) xxxhdpi @4x

Berikut beberapa contoh cara jalur input diterjemahkan menjadi jalur resource setelah impor:

Penentu kepadatan Android hdpi
Jalur input: /UserFolder/icon1/hdpi/icon.png
Jalur resource: <projectFolder>/<moduleFolder> /src/main/res/drawable-hdpi/icon.png
Penentu kepadatan Android xxhdpi
Jalur input: /UserFolder/icon1/abc-xxhdpi/icon.png
Jalur resource: <projectFolder>/<moduleFolder> /src/main/res/drawable-xxhdpi/icon.png
Faktor penskalaan iOS: @2x
Jalur input: /UserFolder/icon1/icon@2x.png
Jalur resource: <projectFolder>/<moduleFolder> /src/main/res/drawable-xhdpi/icon.png
Faktor penskalaan iOS: @2x
Jalur input: /UserFolder/icon1/icon@2x_alternate.png
Jalur resource: <projectFolder>/<moduleFolder> /src/main/res/drawable-xhdpi/icon_alternate.png

Untuk informasi selengkapnya tentang perangkat pendukung dengan kepadatan piksel berbeda, baca Mendukung kepadatan piksel yang berbeda.

Menggunakan resource di Jetpack Compose

Saat membuat dengan Jetpack Compose, Anda mengakses resource langsung dari kode Kotlin menggunakan API yang dioptimalkan, sehingga logika UI dan referensi resource tetap disinkronkan.

  • Gambar: Gunakan painterResource(id = R.drawable.your_image) dalam composable Image.
  • String: Gunakan stringResource(id = R.string.your_string) untuk mengambil teks UI yang dilokalkan.
  • Warna: Gunakan colorResource(id = R.color.your_color) untuk menerapkan warna yang ditentukan tema.

Resource Manager memastikan ID ini dibuat dengan benar, sehingga Anda dapat mereferensikan aset dengan lancar dari hierarki UI Compose.

Untuk mengetahui informasi tentang penanganan resource lanjutan—termasuk pemuatan font dinamis, resource khusus konfigurasi, dan library resource khusus Compose—lihat dokumentasi tentang Resource di Compose.

Referensi lainnya

Melihat konten