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

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

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

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

Berikut ini adalah panduan cepat untuk membuat grafis NinePatch menggunakan fitur 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 Anda buat gambar NinePatch-nya, lalu klik Create 9-patch file.
  2. Ketik nama file untuk gambar NinePatch Anda, lalu klik OK. Gambar akan dibuat dengan ekstensi file .9.png.
  3. Klik dua kali file NinePatch baru Anda untuk membukanya di Android Studio. Ruang kerja Anda sekarang terbuka.

    Panel kiri adalah area menggambar Anda. Di sini Anda dapat mengedit garis untuk patch dan area konten yang dapat direntangkan. Panel kanan adalah area pratinjau, dan 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 (pada Mac, tahan tombol Shift lalu klik) untuk menghapus garis yang digambar sebelumnya.
  5. Setelah selesai, klik File > Save untuk menyimpan perubahan.

Anda bisa membuka file NinePatch yang ada di Android Studio dengan mengklik file tersebut dua kali.

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 dalam 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 ada.

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: Memvisualisasikan area grafis yang tidak dapat digambar saat kursor mouse berada di atasnya.
  • 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 di mana 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 patch yang buruk.