Memahami 9-Patch Image dan Cara Menggunakannya

Kita tahu bahwa android device sangatlah beragam. Ada yang ukurannya kecil seperti smart watch, ada juga yang ukurannya besar seperti tablet. Dengan keragaman seperti itu, mengharuskan developer dan designer android untuk mensupport sebanyak-banyaknya device.

Dalam merancang tampilan aplikasi, terkadang kita membuat lebar atau tinggi dari sebuah button menyesuaikan ukuran layarnya, atau kita kenal dengan match_parent. Tidak akan terlihat janggal jika kita menggunakan tampilan default dari android. Background default dari button akan menyesuaikan ukuran lebar atau tinggi dari button tersebut dan tampilannya akan tetap terlihat bagus.

Lalu bagaimana jika kita ingin membuat custom background untuk button tersebut? Tentunya kita harus menyediakan gambar sendiri. Permasalahannya adalah jika kita menggunakan gambar yang belum kita convert ke 9-patch image, nantinya gambar tersebut akan terlihat aneh jika ukuran button lebih besar atau lebih kecil dari gambar background.

Untuk mengubah gambar biasa menjadi 9-patch image, android studio sudah menyediakan toolnya. Yuk simak bagaimana cara melakukannya dengan mengikuti tutorial ini sampai selesai.

Sebelum ke langkah-langkah pembuatan 9-patch image, kita perlu memahami dulu 9-patch image itu apa dan tentunya harus mengenal terlebih dahulu tool yang disediakan oleh android studio untuk membuat 9-patch image ini!

9-patch image adalah gambar berformat .png yang didalamnya terdapat kode yang dapat dipahami oleh sistem android, kode tersebut berisikan pengaturan tentang area pada gambar yang bisa streachable dan area untuk konten.

Nama 9 patch merepresentasikan 9 area yang terbagi pada gambar dengan penjelasan areanya sebagai berikut:

  • Area A, C, G, I adalah area dimana gambar tidak akan mengalami stretching atau peregangan.
  • Area D dan F adalah area yang akan mengalami peregangan secara vertikal jika diperlukan.
  • Area B dan H adalah area yang akan mengalami peregangan secara horizontal jika diperlukan
  • Area E adalah area yang akan mengalami peregangan baik secara vertikal maupun horizontal.

Area Streatchable

Pada tool konversi 9-patch image di android studio, jika kita mengarahkan pointer di atas gambar, maka akan muncul 2 garis seperti gambar di bawah:

2 garis tersebut bisa kita tarik ke kiri ataupun ke kanan sepanjang tidak melebihi lebar gambar.

Perlu diingat, untuk mengatur area streachable kita perlu mengarahkan pointer kita ke bagian atas dan bagian kiri dari gambar kemudian mengatur 2 garis yang muncul. Jika ingin mengatur area konten kita perlu mengarahkan pointer ke bagian kanan dan bawah dari gambar.

Setelah mengatur 2 garis vertikal yang muncul dari atas dan 2 garis horizontal yang mundul dari kiri maka akan muncul tampilan seperti di bawah ini. Oh iya, untuk memunculkan warna hijau dan pink silahkan cek Show patches.

Terlihat pada gambar di atas, area yang berwarna pink adalah area E seperti yang saya jelaskan sebelumnya. Area tersebut akan mengalami pereganan secara vertikal maupun horizontal.

Jika diperhatikan lebih cermat, terdapat garis hitam di bagian atas dan kiri gambar. Itu sebagai tanda untuk daerah yang streathable pada gambar. Garis hitam itu bisa muncul karena kita sudah mengatur lokasi streatchablenya.

Area Konten

Untuk mengatur area konten mirip seperti mengatur area streatchable. Namun kita harus mengarahkan mouse ke sebelah kanan atau sebelah bawah gambar untuk memunculkan garis-garis seperti sebelumnya.

Setelah dilakukan pengaturan maka preview area konten dapat dilihat pada bagian kanan layar di dalam tool 9-patch. Oh iya, jangan lupa cek terlebih dahulu Show content.

Area berwarna ungu agak ke biru2an menunjukkan area konten.

Jika gambar ini nantinya akan digunakan sebagai background sebuah button misalnya, maka text dari button tersebut akan muncul pada area tersebut. Seolah-olah terdapat padding pada button.

Langkah-langkah membuat custom background untuk button

1. Sediakan gambar yang akan dijadikan background. Di tutorial ini saya memakai 2 buah gambar yang saya unduh dari https://kenney.nl/assets/ui-pack


2. Copy dan paste 2 gambar tersebut ke dalam folder drawable di android studio.

3. Lalu klik kanan salah satu gambar dan pilih Create 9-Patch file. Akan muncul popup dialog untuk menentukan dimana lokasi 9-Patch file disimpan. Pilih saja folder drawable.

4. Jika berhasil, maka akan muncul file baru dengan nama yang sama dengan file asli, namun ada tambahan angka 9. Semisal file asli bernama button01.png, maka file barunya akan bernama button01.9.png

5. Klik dua kali pada file yang baru untuk membuka tool 9-Patch. Akan terlihat seperti di bawah ini:

6. Atur area streatchable dan area konten sehingga terlihat seperti gambar di bawah:

7. Lakukan hal yang sama dengan background satunya. Karena untuk button kita perlu membuat 2 background, satu untuk kondisi default dan satunya untuk kondisi fokus atau ditekan.

8. Jika sudah saatnya membuat selector. Berikut kodenya:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/blue_button01" android:state_pressed="true"/>
    <item android:drawable="@drawable/blue_button01" android:state_focused="true"/>
    <item android:drawable="@drawable/blue_button00"/>
</selector>

Dari kode di atas, button akan menggunakan background blue_button01 jika button dalam keadaan ditekan atau dalam kondisi fokus. Sedangkan jika tidak dalam 2 kondisi tersebut maka button akan mempunyai background blue_button00.

9. Setelah itu, set background button dengan selector yang telah kita buat.

Itulah beberapa langkah untuk membuat custom background untuk button dengan gambar 9-patch. Cukup sederhana bukan? Sekian dulu tutorial kali ini, jika ada pertanyaan seputar 9-patch image atau seputaran teknologi lainnya, silahkan tinggal komentar di bawah.