Android: Using 9patch to create a frame around an imageview

Question

I've been trying to create a frame around my imageview using a picture of a wooden frame. I turned the woodenframe picture into a 9patch and its still not wrapping around the imageview.

<RelativeLayout
    android:id="@+id/ChosenPic"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_weight="3"
    android:orientation="vertical"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:baselineAlignBottom="true"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/ImageView02"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="fill_vertical|fill_horizontal"
        android:scaleType="fitXY"
        android:src="@drawable/woodenframe" >
    </ImageView>
</RelativeLayout>

So this is the ninepatch and i want it to fit around a picture of my choosing no matter the size.

EDIT:

This is what i want.

Please post your 9-patch and a picture of what you are observing. — Bryan Herbst, Jul 30 '15 at 20:41
Why don't you post your 9-patch, and exactly describe (possibly with images) the desired effect? — Bartek Lipinski, Jul 30 '15 at 20:41
I'd say you do not want this image to be affected by 9-patch as it would simply look crappy. This is not the type of bitmap that can be stretched — Marcin Orlowski, Jul 30 '15 at 20:57
If you set an actual 9patch image with padding information as background of your ImageView you can get the desired effect. However this particular image is not meant to be stretched so you can not turn it into a proper 9patch. — BladeCoder, Jul 30 '15 at 21:35
What you can do however is make the ImageView fit the frame: set the frame image as a standard background image (not 9patch), force the size of your ImageView to the frame image size, and apply some padding manually. — BladeCoder, Jul 30 '15 at 21:43

score 1 · Accepted Answer · edited Jul 20 '17 at 11:25

1

You have two options. I recommended the first one.

First option:
Put each image view in a separate LinearLayout and apply the 9patch to the LinearLayout it self not the image view

Second option:
Use or set the background resource of the image view in Java to the 9patch resource or the background attr in xml to the 9 patch resource and the src to the image it self.

Note that it better to use a Layer-List and add a combination of two shapes or whatever rather than using a 9patch resource.

Reference:
https://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList

edited Jul 20 '17 at 11:25

Vadim Kotov

8,084
8
48
62

answered Jul 30 '15 at 20:44

Mohammad Salem

1,113
9
15

what do you mean by applying the 9patch to the linearlayout? – kiwicode Jul 30 '15 at 20:47
Make the LinearLayout as a Frame for the image view :) – Mohammad Salem Jul 30 '15 at 20:50
im sorry, but im not understanding exactly what your saying. How would that work? – kiwicode Jul 30 '15 at 20:51
the LinearLayout will look at the 9patch and ask it how much space do you need and the will put the image view with the padding that the Frame strokes has ... But you should first make sure that the 9patch is working :) some ref : http://stackoverflow.com/questions/5841128/how-to-display-border-to-imageview this is a link using the layer-list try it :) – Mohammad Salem Jul 30 '15 at 20:58
cant seem to figure it out, found a good example of what im trying to do. https://lh3.googleusercontent.com/1n_lKanRLjBPkXBr79vES3v3IwR20u5SDvQnbFztb7VOOFRlru6SRTX3RvNsp5PI2w=h900-rw – kiwicode Jul 31 '15 at 04:08

score 0 · Answer 2 · answered Jul 30 '15 at 20:56

The "nine-patch" frame image that you upload is not a proper nine-patch.

First, it is a jpg. The extension should be .9.png.

Second, the contents are not correct. Specifically:

You need to have a 1px transparent border around the entire image. I do not see that in your jpg, though that just be an artifact of exporting it as a jpg.
You need to define a stretchable region by drawing black pixels in that 1px border. I see no black pixels defining such a region in the uploaded image.

I highly recommend going back and reading the nine-patch documentation again, and trying the draw 9-patch tool for creating a proper nine-patch.

score 0 · Answer 3 · answered Jul 30 '15 at 21:03

Your 9-Patch is not configured correctly. It isn't enough to just rename your file. To get it working properly, you have to define certain areas that should be stretched to fit the dimensions of your view. You can also define paddings for that 9-Patch to inset the content when applying the 9-Patch to your view.

There's a handy tool called "Draw 9-Patch" in the android SDK that helps you defining these areas:

http://developer.android.com/tools/help/draw9patch.html

To start it, simply run the

draw9patch.bat

located in

...\sdk\tools\

Android: Using 9patch to create a frame around an imageview

3 Answers3