Android Studio, 9 Patch and the "Show Bad Patches" Button. How do it know?

Question

I'm trying to clean up a large project which has a lot of nine patch images (50 or so). One thing I'm finding out is when an android project migrates from Eclipse over to Android Studio, the system looks at the 9 patch images to ensure they comply to a standard. And I'm getting lots of gradle errors.

The best description I've seen for a 9 patch is simple guide to nine patch.

Android Studio includes a 9 patch editor tool. It's the use of that tool that brought me here. The tool has a button that toggles "Show Bad Patches / Hide Bad Patches". I'm struggling trying to understand the concept of "Bad Patches."

Reference: Android document, describing the use of that button.

Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.

Reference: Android Developer guide on 2d graphics. That guide says the 'Show Bad Patches' button ...

raises warnings if the region you've defined for the stretchable area is at risk of producing drawing artifacts as a result of the pixel replication.

Here is a screen shot of the file I'm looking at:

So here's the deal. No matter what I do, I always have some bad patches visible on my graphics. How do you 'clean' up an image to avoid bad patches?

Why are those red boxes displayed on my screen? I've been playing with the image and the 1 pixel borders, but not sure where to go from here. Anybody understand what is happening here? What does Nirvana.9.png look like?

Dreadfully

you got any solutions,Even I am facing the same problem,Please share if you got any answer – Methodize

Answer 1

I have just published a Medium post about Bad Patches - feel free to check it out:

9-patch: bad patches everywhere…

One

Very nicely done! (and hey, better later than never...) Thanks for sharing. – Dreadfully

i didn’t understand your tutorial. where are those 8 slices namly ABCDEFGH in your tutorial?. for me bad patches are related to both horizontal and vertical guide. and no matter how i try to adjust them, nothing happens – Lucillalucille

ABCDEFGH are groups of slices, not slices themselves. Try to read it again, and try to follow where I speak about slices and where I speak about groups of slices. It does make a difference – One

Intersections of both horizontal (specified by the left marker) and vertical (specified by the top marker) scalable areas define (slice) groups. In my example there are exactly 8 of them (from A to H) first of all. i can't see this A to H in the pictures that you have provided. – Lucillalucille

Here you've got an image of groups A to H marked with a pink stroke, hope it makes it a bit clearer for you – One

@BartekLipinski great great my brother. one more question. in your tutorial you have said Android Studio checks if all slices within a slice group are the same. If there’s even a slightest difference between those slices — the slice group becomes a bad patch. does this also apply to size? that is all slices must be of same size.(1px by 1px). isn't it? this is because, i have a 9 path which is showing me bad patches. but when i reduce my vertical scalable area from 9px to 1px, all bad patches disappear. – Lucillalucille

Well... groups are rectangular so every horizontal slice within a group has the same size as any other horizontal slice within this group, and every vertical slice within group has the same size as any other vertical slice within this group. But that does not mean that they have to be 1px x 1px. – One

@BartekLipinski so that means sizes do not play any part in bad patches showing up. isn't it? – Lucillalucille

the size itself - not. the contents of the slices - yes. – One

@BartekLipinski ok. got it – Lucillalucille