Applying 9-patch png on android

Question

I'm using 9-patch images to create selector for buttons that can be stretched in different screen size. So I basically pass the name of the files (without the .9.png) in the selector like this:

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

</selector>

And I thought this should be okay. The graphical layout screen of the xml doesn't show any problem with the button, but when I run the app in my device, this is what I get:

So I'm not sure whether I applied the images the wrong way or is it the problem of the 9-patch files? I'll really appreciate it if someone could enlighten me with this. Thank you.

Answer 1

Please consider below mentioned things about 9-patch image:

->.9.png image has black border around the image that indicate it's patch.

-> in drawable folder image having .9.png are identified as 9-patch image so it's must that 9 patch image have .9.png as extension

In your case you removed .9 from image name so it will be normal drawable having black border around image.

you have 2 option. remove patch from button recreate it for all android drawable size. OR remain 9 patch image with it's extention .9.png in drawable folder.

Answer 2

pls check if you copy the .9.png into all resolution folders e.g. drawable-hdpi drawable-xhpdi drawable-xxhdpi.

it sounds like Android would stretch even border area(static area) if running device dpi is not the same as it should be with resolution folder e.g. if you only copy .9.png into drawable folder, the border would be stretched as 3 times wide if running on a device with dpi as 3.

Answer 3

Rename your image as img_common_white_button_bg_default.9.png

and

img_common_white_button_bg_pressed.9.png .

Note: A normal PNG file (.png) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved 9-patch file (.9.png) will be loaded as-is, with no drawing area added, because it already exists.

Read official doc: Draw 9-patch