Membuat bitmap yang dapat diubah ukurannya (file 9-patch)
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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 tampilan dan ukuran
layar. Anda dapat menskalakan bagian gambar yang dipilih secara horizontal atau vertikal berdasarkan indikator
yang digambar dalam image.
Untuk pengantar grafis NinePatch dan cara kerjanya, baca
drawable NinePatch.
Gambar 1. Alat Draw 9-patch
Android Studio yang menampilkan gambar NinePatch.
Ikuti langkah-langkah berikut untuk membuat grafis NinePatch menggunakan alat Draw 9-patch di Android Studio. Anda memerlukan gambar PNG yang akan dibuat gambar NinePatch-nya.
- Di Android Studio, klik kanan gambar PNG yang ingin dibuat
gambar NinePatch-nya, lalu klik Create 9-patch file.
- Masukkan nama file untuk gambar NinePatch Anda, lalu klik OK. Gambar
akan dibuat dengan ekstensi file
.9.png.
- Klik dua kali file NinePatch baru untuk membukanya di Android Studio.
Di ruang kerja yang terbuka, panel kiri adalah area gambar tempat 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.
- Klik dalam perimeter 1-piksel untuk menggambar garis yang menentukan
patch dan area konten (opsional) yang dapat direntangkan.
Klik kanan untuk menghapus
garis yang digambar sebelumnya (di Mac, tahan Shift dan klik).
- Setelah selesai, klik File > Save untuk menyimpan perubahan.
Untuk membuka file NinePatch yang ada di Android Studio, klik dua kali file tersebut.
Untuk memastikan grafis NinePatch diperkecil dengan benar, pastikan bahwa area yang dapat
direntangkan berukuran setidaknya 2x2 piksel.
Jika tidak, area tersebut dapat menghilang saat diperkecil. Untuk menghindari interpolasi selama penskalaan
yang dapat menyebabkan warna batas berubah, berikan 1 piksel ruang kosong tambahan
dalam grafis sebelum dan sesudah area yang dapat direntangkan.
Catatan: File PNG normal (*.png)
dimuat dengan batas 1 piksel kosong yang ditambahkan di sekitar gambar. Anda dapat menggambar
area konten dan patch yang dapat direntangkan di dalam batas.
File NinePatch (*.9.png) yang disimpan sebelumnya akan dimuat apa adanya,
tanpa penambahan area gambar karena file ini sudah memilikinya.
Gambar 2. Gambar NinePatch di Android Studio
menampilkan konten, patch, dan patch buruk.
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 berwarna merah muda yang dapat direntangkan di area gambar. Merah muda
menunjukkan patch yang dapat direntangkan, seperti yang ditunjukkan pada gambar 2.
- Show content: Menandai area konten dalam gambar pratinjau. Ungu menunjukkan
area tempat konten diizinkan, seperti yang 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. Jika menghilangkan semua patch
yang buruk, Anda akan mempertahankan koherensi visual dari gambar yang direntangkan.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Create resizable bitmaps (9-patch files)\n\nThe Draw 9-patch tool is a WYSIWYG editor included in Android Studio. The tool lets you create\nbitmap images that automatically resize to accommodate the contents of the view and the size of\nthe screen. You can scale selected parts of the image horizontally or vertically based on indicators\ndrawn within the image.\n\nFor an introduction to NinePatch graphics and how they work, read\n[NinePatch drawables](/guide/topics/graphics/2d-graphics#nine-patch).\n\n**Figure 1.** Android Studio's\nDraw 9-patch tool displaying a NinePatch image.\n\nFollow these steps to create a NinePatch graphic using the Draw 9-patch tool in Android\nStudio. You'll need the PNG image that you'd like to create a NinePatch image from.\n\n1. In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click **Create 9-patch file**.\n2. Enter a filename for your NinePatch image and click **OK** . Your image will be created with the `.9.png` file extension.\n3. Double-click your new NinePatch file to open it in Android Studio. \n\n In the workspace that opens, the left pane is your drawing area, where you can edit\n the lines for the stretchable patches and content area. The right\n pane is the preview area, where you can preview your graphic when stretched.\n4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) the content area. \n\n Right-click to erase\n previously drawn lines (on Mac, hold Shift and click).\n5. When done, click **File** \\\u003e **Save** to save your changes.\n\nTo open an existing NinePatch file in Android\nStudio, double-click the file.\n\nTo make sure that your NinePatch graphics scale down properly, verify that any\nstretchable regions are at least 2x2 pixels in size.\nOtherwise, those regions may disappear when scaled down. To avoid interpolation during scaling\nthat may cause the color at the boundaries to change, provide 1 pixel of extra safe\nspace in the graphics before and after stretchable regions.\n\n**Note:** A normal PNG file (`*.png`) is\nloaded with an empty 1-pixel border added around the image. You can draw\nthe stretchable patches and content area within the border.\nA previously saved NinePatch file (`*.9.png`) is loaded as-is,\nwith no drawing area added because it already exists.\n\n**Figure 2.** A NinePatch image in Android Studio\nshowing content, patches, and bad patches.\n\nOptional controls include:\n\n- **Zoom**: Adjust the zoom level of the graphic in the drawing area.\n- **Patch scale**: Adjust the scale of the images in the preview area.\n- **Show lock**: Visualize the non-drawable area of the graphic on mouse-over.\n- **Show patches**: Preview the pink stretchable patches in the drawing area. Pink indicates a stretchable patch, as shown in figure 2.\n- **Show content**: Highlight the content area in the preview images. Purple indicates the area where content is allowed, as shown in figure 2.\n- **Show bad patches**: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. If you eliminate all bad patches, you will maintain the visual coherence of your stretched image."]]
