CODEWITHSUNDEEP
androidandroid-layoutnine-patch
Prateek
Prateek

Reputation: 4013

What's the issue with this 9-png , showing black borders?

enter image description here

I have been struggling for a week to run this nine patch image by adding patches to it with all case but it doesn't work , I can't figure out why ? Any suggestions are highly appreciated.

It shouldn't show black lines when I am using it.

This is the layout code where I use this image ,

                    <Button
                    android:id="@+id/answerA"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:layout_marginRight="2dp"
                    android:layout_weight="1"
                    android:background="@drawable/d_grey"
                    android:gravity="center"
                    android:onClick="AnswerCheck" />

--Edit--

As suggested in an answer I opened this image in ninepatch tool and below is the screenshot for the same,

enter image description here

Upvotes: 0

Views: 3865

Answers (4)

CRUSADER
CRUSADER

Reputation: 5472

Possible solutions:

  • Have you created 9-patch images properly? check out this site and create 9patch image.
  • Do not remove .9 extension from image like sample.9.png
  • Do not resize image after creating 9 patch image.
  • Refresh-Clean-build project to apply changes you made in resource folders

Upvotes: 6

Guillaume Cottenceau
Guillaume Cottenceau

Reputation: 389

I encountered this issue on a xxxhdpi screen. Android doc says for xxxhdpi: "Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi). Use this for the launcher icon only, see note above." In my xxxhdpi device, the 9-patch image was displayed with the black lines borders because of that. When removing the xxxhdpi 9-patch, the display issue was fixed.

Upvotes: 0

Damien Praca
Damien Praca

Reputation: 3136

I often encountered this issue also and I usually avoid to put the back line on the very edge of the image. Try to do it as you did it on the bottom of your image and leave at least 1 pixel on each edge without black otherwise it is not correctly rendered.

Upvotes: 0

Stephan Branczyk
Stephan Branczyk

Reputation: 9375

Looking at your drawing, my guess is that you have far too many patches, probably around 18 patches instead of the usual 9.

Load the nine-patch into the Draw 9-patch tool (which is in your Android sdk under tools/)

  • Then select > Show bad patches

Update:

Take a look at this image (taken from this technical blog)

nine patch diagram

For me at least, that's what I envisioned a 9-patch to be, that there were 9 patches in the png. In your latest drawing however from inside the draw-9-patches tool, I think I'm counting 20 patches

That being said, I'm not sure if what I'm saying is correct. If you have bad 9-patch, the tool should at least be showing you the bad patches surrounded by red lines. And so, it could be that both the blogger and myself are incorrect.

Upvotes: 1

Related Questions