Tutorial – 9 Patch Android

Pernah melihat aplikasi messaging yang menggunakan buuble sebagai interface untuk menunjukkan obrolan kita? Mungkin ada yang penasaran bagaimana caranya background buuble tersebut dapat mengikuti panjang dan lebar string ( isi chat ) secara otomatis tanpa terjadi stretch yang tidak sesuai. Disinilah kehebatan 9 patch grafik dalam mendukung pembuatan ui yang ciamik tanpa perlu bersusah payah membuatnya.

Dalam tutorial kali ini, saya akan membahas bagaimana cara membuat 9 patch grafik dengan tools bawaan SDK yaitu Draw 9-patch. Dalam contoh ini, saya akan buat sebuah gambar untuk button yang dapat menyesuaikan tinggi dan lebar nya sesuai lebar dan tinggi konten tanpa merusak gambarnya.

Pertama, jalankan draw9patch dari terminal ( dalam kasus ini menggunakan Linux ). Buka terminal dan ketikkan

./draw9patc

Setelah aplikasi running, masukkan gambar png yang ingin dibuat menjadi 9 patch ( hanya file png yang bisa digunakan ) dengan cara mendrag langsung ke aplikasi atau klik file -> open 9-patch ( Ctrl – O). Silahkan download gambar dibawah ini untuk percobaan (klik kanan -> save image).

Sebelum mulai, pastikan Show Patch dan  Show content dalam keadaan tercentang ( ada di toolbar bawah ), ini untuk memudahkan melihat apakah 9 patch yang kita buat sudah sesuai keinginan. Png yang dimasukkan sebagai bahan 9 patch akan ditampilkan dalam bidang kerja dengan penambahan 1pixel di setiap sisi gambar. Yang kita lakukan adalah memberi beberapa pixel berwarna hitam di sekitar gambar png sebagai tanda bagi android bahwa bagian gambar tersebut adalah pixel yang di stretch ( dilebarkan ) atau bagian tersebut adalah batas content yang diizinkan. Untuk lebih jelasnya, perhatikan gambar dibawah ini.

Perhatikan gambar di atas. Garis hitam di sebelah kiri dan atas memberitahu android bahwa itu adalah bagian yang boleh di stretch ( dilebarkan ). Sehingga bagian yang diberi warna ungu lah yang nantinya akan digandakan secara otomatis oleh android sehingga membentuk gambar yang yang sesuai.

 

Perhatikan gambar di atas ini. Garis hitam di bagian bawah dan kanan menunjukkan bagian yang dapat diisi oleh konten ( misal : Text pada button). sehingga pertemuan antara kedua garis ( berwarna hijau tua di tengah) adalah bagian yang dapat diisi oleh konten ( Text tidak akan melewati batas kotak hijau tua itu).

 

Jika sudah mengerti, silahkan coba klik mouse pada sisi sisi gambar sesuai dengan contoh di bawah untuk menentukan bagian stretch dan bagian konten ( Tekan tahan tombol shift dan klik pada pixel yang ingin dihapus). Pixel berwarna hijau ( pada saat kita menambahkan pixel hitam) adalah bagian dari gambar yang akan di stretch. Pastikan bagian yg di stretch sudah sesuai keinginan kita.

Pada bagian kanan aplikasi ditunjukkan hasil 9 patch setelah nantinya diimplementasi secara berurutan dari atas ke bawah adalah “jika gambar di stretch ke bawah”, “jika gambar stretch ke samping” dan “jika gambar di stretch ke bawah dan samping”. Bagian berwarna biru muda adalah bagian dari gambar yang dipebolehkan untuk ditempati oleh konten ( batas konten ). Jika sudah selesai, save gambar hasil edit tadi (di save dalam format nama_file.9.png). Gambar di bawah adalah 9 patch grafik yang tadi kita buat.

Untuk menggunakannya, kita cukup menspesifikasikan background button sesuai nama dari file tanpa extensi 9.png

android:background=”@drawable/nama_file

 
Selamat bereksperimen.
:iloveindonesia

4 thoughts on “Tutorial – 9 Patch Android

    • haha, sepertinya 9patch dibuat untuk proses sebelum dicompile. jika apk sudah dicompile dan drawablenya diganti, maka 9patch itu dianggap hanya sebuah png biasa. mungkin ada yang bisa bantu?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>