Membuat bitmap yang dapat diubah ukurannya (file 9-Patch)

Alat Draw 9-patch adalah editor WYSIWYG yang disertakan dalam Android Studio. Alat ini memungkinkan Anda membuat gambar bitmap yang ukurannya otomatis diubah untuk menampung konten sesuai tampilan dan ukuran layar. Bagian-bagian gambar yang dipilih diskalakan secara horizontal atau vertikal berdasarkan indikator yang digambar dalam gambar.

Untuk pengantar grafis NinePatch dan cara kerjanya, baca bagian Drawable NinePatch dalam dokumen Kanvas dan Drawable.

Gambar 1. Gambar NinePatch dalam alat Draw 9-patch Android Studio.

Berikut adalah panduan cepat untuk membuat grafis NinePatch menggunakan alat Draw 9-Patch di Android Studio. Anda memerlukan gambar PNG yang akan dibuat gambar NinePatch-nya.

  1. Di Android Studio, klik kanan gambar PNG yang ingin dibuat gambar NinePatch-nya, lalu klik Create 9-patch file.
  2. Ketik nama file untuk gambar NinePatch, lalu klik OK. Gambar akan dibuat dengan ekstensi file .9.png.
  3. Klik dua kali file NinePatch baru untuk membukanya di Android Studio. Ruang kerja Anda sekarang terbuka.

    Panel kiri adalah area menggambar. Di sini, Anda dapat mengedit garis untuk patch dan area konten yang dapat direntangkan. Panel kanan adalah area pratinjau. Di sini, Anda dapat melihat pratinjau grafis saat direntangkan.

  4. Klik dalam perimeter 1-piksel untuk menggambar garis yang menentukan patch dan area konten (opsional) yang dapat direntangkan. Klik kanan (atau di Mac, tahan tombol Shift lalu klik) untuk menghapus garis yang digambar sebelumnya.
  5. Setelah selesai, klik File > Save untuk menyimpan perubahan.

Anda dapat membuka file NinePatch yang ada dalam Android Studio dengan mengklik dua kali file tersebut.

Untuk memastikan grafis NinePatch diperkecil dengan benar, pastikan bahwa area yang dapat direntangkan berukuran setidaknya 2x2 piksel. Jika tidak, grafis mungkin tidak terlihat saat diperkecil. Selain itu, sediakan satu piksel ruang aman tambahan di grafis sebelum dan setelah area yang dapat direntangkan untuk menghindari interpolasi selama penskalaan yang dapat menyebabkan perubahan warna pada batas.

Catatan: File PNG normal (*.png) akan dimuat dengan batas satu piksel kosong yang ditambahkan di sekitar gambar, tempat Anda dapat menggambar area konten dan patch yang dapat direntangkan. File NinePatch (*.9.png) yang disimpan sebelumnya akan dimuat apa adanya, tanpa penambahan area gambar karena file ini sudah memilikinya.

Gambar 2. Gambar NinePatch yang menampilkan konten, patch, dan bad patch.

Kontrol opsional meliputi:

  • Zoom: Menyesuaikan level zoom grafis di area gambar.
  • Patch scale: Menyesuaikan skala gambar di area pratinjau.
  • Show lock: Memvisualisasi area non-drawable grafis saat kursor diarahkan.
  • Show patches: Melihat pratinjau patch yang dapat direntangkan di area gambar (merah muda menunjukkan patch yang dapat direntangkan), seperti ditunjukkan pada gambar 2 di atas.
  • Show content: Menyorot area konten dalam gambar pratinjau (ungu adalah area tempat konten diizinkan), seperti ditunjukkan pada gambar 2.
  • Show bad patches: Menambahkan batas merah di sekitar area patch yang mungkin menimbulkan artefak dalam grafis saat direntangkan, seperti ditunjukkan pada gambar 2. Perpaduan visual gambar yang direntangkan akan dipertahankan jika Anda menghilangkan semua bad patch.