Android: NinePatch and LayerList

Question

So I'm trying to overlay a map image with a transparent ninepatch Drawable using layer-list. Like this:

target http://f.cl.ly/items/2b1x3c3o0w3t1z0b2o2s/Screen%20Shot%202012-06-20%20at%2010.34.18%20AM.png

But all I get is this (notice that the map image is cropped by the edges of the ninepatch, even though it is supposed to be transparent):

problem http://f.cl.ly/items/380j3E2w452Y2D2d1K0a/Screen%20Shot%202012-06-20%20at%2010.29.45%20AM.png

Here's my layer-list code:

<?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <nine-patch android:src="@drawable/myninepatch" />
    </item>
    <item android:drawable="@drawable/detail_map"/>
  </layer-list>

and here's my layout ImageView:

    <ImageView
        android:layout_width="298dp"
        android:layout_height="106dp"
        android:layout_gravity="center"
        android:layout_marginBottom="11dp"
        android:src="@drawable/detail_map_overlay" />

Edit: Here's the ninepatch .png:

ninepatch http://f.cl.ly/items/0X3N0d331Q15380D093n/myninepatch.9.png

Any ideas how to achieve this? Not necessarily using ninepatch but I want to make it stretchable depending on the size of the image. Or if you have an idea how to do inner glow, that would be swell too.

Answer 1

To recap the comments and make it more clear for further reading

You 9 patch is not valid:

• the top and left part only define the stretchable area.
• the bottom and right, the position of the content.

With your example, it will do something like this(based on your but without the useless parts):

Then set it as background of your ImageView:

<ImageView
    android:layout_width="298dp"
    android:layout_height="106dp"
    android:layout_gravity="center"
    android:layout_marginBottom="11dp"
    android:src="@drawable/detail_map"
    android:background="@drawable/myninepatch">
</ImageView>

Like this you can get rid of the Layer List