{"id":15200,"date":"2021-09-13T12:01:23","date_gmt":"2021-09-13T12:01:23","guid":{"rendered":"https:\/\/flobiz.in\/blog\/?p=15200"},"modified":"2021-09-21T05:26:20","modified_gmt":"2021-09-21T05:26:20","slug":"create-resizable-bitmaps-9-patch-files","status":"publish","type":"post","link":"http:\/\/35.200.248.73\/blog\/create-resizable-bitmaps-9-patch-files\/","title":{"rendered":"How to create resizable bitmaps (9-Patch files) in Android Studio"},"content":{"rendered":"\n
\"\"\/<\/figure>\n\n\n\n

What is 9-patch image<\/strong><\/h2>\n\n\n\n

A NinePatchDrawable<\/a><\/code> graphic is a stretchable bitmap image that you can use as the background of a view. A NinePatch graphic is a standard PNG image that includes an extra 1-pixel border. It must be saved with the 9.png<\/code> extension in the res\/drawable\/<\/code> directory of your project.<\/p>\n\n\n\n

\"\"
Example of a NinePatch graphic that defines a button<\/figcaption><\/figure>\n\n\n\n

9-Patch Theory<\/strong><\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

9-Patch<\/strong> gets its name from the fact that the overlay created breaks the image up into nine defined regions. Each region has specific stretch properties:<\/p>\n\n\n\n

Corner Regions (1, 3, 7, 9)<\/strong> These regions are fixed and nothing inside them will stretch.<\/p>\n\n\n\n

Horizontal Sides (4, 6)<\/strong> The pixels in these regions will stretch vertically when necessary.<\/p>\n\n\n\n

Vertical Sides (2, 8)<\/strong> The pixels in these regions will stretch horizontally when necessary.<\/p>\n\n\n\n

Center (5)<\/strong> The pixels in this region will stretch in both horizontal and vertical directions equally.<\/p>\n\n\n\n

Why 9-patch image<\/h2>\n\n\n\n

A 9 patch image is a regular png (.PNG) image which is needful for android app developers where they require to wrap any content within a background image without pixelating the background image. Usually, background images have a fixed height and width, but sometimes we may require background images that do not pixelate though stretched, this now becomes a challenge with regular PNG images.<\/p>\n\n\n\n

In the below image you can clearly observe that the background image height and width varies. Then how do you handle such a situation? Do you need to create thousands of images with different heights and widths? The answer is \u201cNO\u201d. This situation gave way to a new kind of image which is now called a (9 PATCH) image. It is an extension of a simple png image that can be modified using a tool and append it with a different extension.<\/p>\n\n\n\n

\"\"
WhatsApp Conversation Screen<\/figcaption><\/figure>\n\n\n\n

How to create a 9 patch image in Android Studio<\/h2>\n\n\n\n

Here\u2019s a quick guide to creating a NinePatch graphic using the Draw 9-patch tool in Android Studio. You\u2019ll need the PNG image with which you\u2019d like to create a NinePatch image.<\/p>\n\n\n\n

\"\"\/
9-Patch Image Creator<\/figcaption><\/figure>\n\n\n\n
  1. In Android Studio, right-click the PNG image you\u2019d like to create a NinePatch image from, then click Create 9-patch file<\/strong>.<\/li>
  2. Type a file name for your NinePatch image, and click OK<\/strong>. Your image will be created with the .9.png<\/code> file extension.<\/li>
  3. Double-click your new NinePatch file to open it in Android Studio. Your workspace will now open. The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.<\/li>
  4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.<\/li>
  5. When done, click File<\/strong> > Save<\/strong> to save your changes.<\/li><\/ol>\n\n\n\n

    You can open an existing NinePatch file in Android Studio by double-clicking the file.<\/p>\n\n\n\n

    To make sure that your NinePatch graphics scale down properly, verify that any stretchable regions are at least 2×2 pixels in size. Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in the graphics before and after stretchable regions to avoid interpolation during scaling that may cause the colour at the boundaries to change.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Optional controls include:<\/p>\n\n\n\n