Mengelola resource UI aplikasi dengan Resource Manager

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

Gambar 1: 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 resource ke project Anda.
  2. Drop-down modul memungkinkan Anda melihat resource khusus untuk modul.
  3. Gunakan kotak penelusuran untuk menelusuri resource di seluruh modul dalam project Anda.
  4. Resource Manager mengelompokkan resource menurut jenis. Gunakan tab ini untuk beralih di antara setiap jenis resource. Klik ikon menu tambahan ikon menu tambahan untuk menampilkan jenis resource tambahan.
  5. Tombol filter memungkinkan Anda melihat resource dari modul dependen lokal, library eksternal, dan framework Android. Anda juga dapat menggunakan filter untuk menampilkan atribut tema.
  6. Area konten utama akan menampilkan pratinjau resource Anda. Klik kanan resource untuk melihat menu konteks tempat Anda dapat, antara lain, mengganti nama resource dan menelusuri aplikasi tempat resource tersebut digunakan.
  7. Klik tombol ini untuk melihat resource sebagai potongan foto atau daftar.
  8. Klik tombol ini untuk mengubah ukuran pratinjau resource.

Selain fitur tersebut di atas, Resource Manager juga memberikan cara mudah untuk mengimpor massal drawable ke dalam project Anda. Anda dapat menarik lalu melepas file gambar, termasuk file SVG, langsung ke Resource Manager, atau menggunakan wizard Import Drawables. Untuk mengetahui informasi selengkapnya, baca bagian Mengimpor resource ke dalam project Anda di bawah.

Klik dua kali resource agar Resource Manager menampilkan informasi yang lebih detail. 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 juga bisa 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 mengimpor resource gambar dengan menarik lalu melepas file atau folder resource langsung ke Resource Manager. Setelah Anda melepas resource ke Resource Manager, dialog Import drawables akan muncul, tempat Anda dapat melihat ringkasan resource dan menambahkan kualifikasi apa pun yang diperlukan sebelum melakukan pengimporan.

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

  1. Tarik lalu lepas gambar langsung ke jendela Resource Manager di Android Studio. Anda juga dapat mengklik ikon plus (+), memilih Import Drawables seperti yang ditunjukkan pada gambar 3, lalu memilih file dan folder yang akan diimpor.

    Gambar 3: Pilih Import Drawables dari menu drop-down.

  2. Dialog Import drawables akan muncul. Seperti yang ditunjukkan pada gambar 4, dialog ini menampilkan daftar resource yang Anda impor. Anda dapat mengganti nama resource dengan mengklik kotak teks di atas setiap pratinjau resource.

    Jika Anda menyediakan beberapa versi resource yang sama, pastikan untuk menambahkan pengontrol kualitas konfigurasi perangkat yang mendeskripsikan konfigurasi spesifik yang didukung oleh resource tersebut. Misalnya, jika Anda menyediakan beberapa versi resource yang sama untuk kepadatan layar berbeda, Anda dapat menambahkan penentu Kepadatan untuk setiap versi. Perlu diperhatikan bahwa jika dua atau beberapa resource memiliki nama dan penentu yang sama, maka hanya satu versi yang akan diimpor. Untuk informasi selengkapnya tentang penentu resource, baca 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.

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 (~120dpi) ldpi tidak didukung
Kepadatan menengah (~160dpi) mdpi skala asli
Kepadatan tinggi (~240dpi) hdpi tidak didukung
Kepadatan ekstra tinggi (~320dpi) xhdpi @2x
Kepadatan ekstra-ekstra-tinggi (~480dpi) xxhdpi @3x
Kepadatan ekstra-ekstra-ekstra-tinggi (~640dpi) 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.

Menarik lalu melepas drawable ke tata letak Anda

Anda dapat menarik lalu melepas drawable langsung dari Resource Manager ke tata letak. Jika Anda melepas resource ke tata letak, Resource Manager akan membuat ImageView yang sesuai untuk drawable tersebut, seperti ditunjukkan dalam animasi 1:

Animasi 1: Menarik lalu melepas drawable ke tata letak dalam tampilan Design.

Anda juga dapat menarik lalu melepas langsung ke XML tata letak, seperti ditunjukkan dalam animasi 2:

Animasi 2: Menarik lalu melepas drawable ke tata letak dalam tampilan Text.

Saat melepas drawable ke tata letak di tab Text, kode yang dihasilkan akan berbeda bergantung pada tempat Anda melepas tata letak:

  • Jika Anda melepas drawable ke area kosong, Resource Manager akan menghasilkan ImageView yang sesuai.
  • Jika Anda melepas drawable ke atribut apa pun dalam XML tata letak, Resource Manager akan mengganti nilai atribut tersebut dengan referensi ke drawable. Perlu diperhatikan bahwa Anda juga dapat menarik jenis resource lainnya ke atribut XML untuk mengganti nilai atribut.
  • Jika Anda melepas drawable ke elemen ImageView yang sudah ada, Resource Manager akan menggantikan atribut sumber yang sesuai.