Search code examples
androidandroid-layoutnine-patch

9-patch drawable behaving badly, weird artefacts - what is wrong here?


so Im trying out the 9-patch images. I started out with a PNG-file where I have a semi-transparent square with rounded corners:

enter image description here

Then, I created the 9-patch, like this (note the little dot on top and to the left):

enter image description here

I thought that was enough to handle this, but when adding this 9-patch to Eclipse, I get weird results.

Result nbr 1

Based on this XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout6"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/taxibg3"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/login_square" />
</LinearLayout>

I get this result:

enter image description here

Result nbr 2

Based on this XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout6"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/taxibg3"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="300dp"
        android:layout_height="158dp"
        android:background="@drawable/login_square" />

</LinearLayout>

I get this result:

enter image description here

I have also tried to make the "9-patch-lines" on the top and left longer, but that also gives weird artefacts.

Any ideas?

-- EDIT --

I also tried with this 9-patch (screen-shot from 9patch-tool):

enter image description here

which gives this bad result (note the black lines):

enter image description here

---- EDIT 2 ----

Leonidos told me that the 9-patch was too big, and that they cannot decrease in size. So I tried that out, with equally bad results.

This is the 9-patch (download the file here)

enter image description here

and this is how it looks (notice the black lines):

enter image description here

--- EDIT 3 ---

I took a look at "show bad patches" in the pathtoo, and this is what is shows:

enter image description here

But it doesnt really matter. If I change it so it looks like this:

enter image description here

I still get the black stripes!

Oh why oh why!? =)


Solution

  • Make it small as possible. 9-patch cant shrink they can stretch. Fill right and bottom border with black color. Edit 9-patch borders with draw9patch tool to prevent errors. Your 9-patch should look similar to this one.