How can I create a 9-patch that can preserve circle of this image?

I have this image https://i.sstatic.net/i8Iab.png enter image description here

I want to preserve the circle at the bottom of the image so I make this 9-patch https://i.sstatic.net/UNWdE.png enter image description here

but somehow in the mobile the circle becomes ellipse like this enter image description here

i don't know why the bottom part get stretch. Any help please, Thanks.

Solution

Because the 9 patch you created is wrong.
And unoptimized (you can make it much smaller): the upper black line should leave a transparent hole corresponding to the circle.
The black lines result in a stretched area, while the parts you leave out aren't stretched.
So, just leave the area you don't want to stretch transparent.
This is the reference site