CODEWITHSUNDEEP
android
ab11
ab11

Reputation: 20090

Android: dots and line around nine patch images?

I am trying to use the attached nine patch image as the background for a View in my app (the image is from the android-15 sdk resources). As pictured, the image has two vertical dots to the left of image, two horizontal dots above the image, and a horizontal line below the image. These dots/line from the images show in my app.

I copied the file from the sdk folder into my resources directory, and set the drawable resource as the background for my view. What is the proper way to use this image as the background of a view, such that the dots/line do not show?

enter image description here

Upvotes: 1

Views: 1833

Answers (3)

user647826
user647826

Reputation:

By stretchable patches, you're basically telling Android which rows and columns of pixels in the image that you want to repeat. When you stretch a standard image, there are two possibilities: One, it is scaled proportionally, but still loses sharpness due to interpolation; Two, it is scaled disproportionately, and loses not only its sharpness, but its shape as well. An example of a disproportionate scaling is below:

enter image description here

So the purpose of the black lines it tell Android what areas of the image are safe to repeat. The top corner defines the column(s) that it can stretch, while the left corner defines the row(s) that can stretch. The bottom and right corners just define the actual content area (e.g. where the button is allowed to place text), you can reserve extra space to pad the frame. In the image below, you can see that the two black pixels on the outside of the frame define rows on the image, while the one on top defines a column.

enter image description here

And below, this shows the result of a 9-patched stretched out to various sizes. If it's enlarged to be wider, the halves of the image on the left and right of the defined stretchable column are aligned to the left and right of the new size, and the defined column is repeated to fill the space in between. Same thing happens with the defined rows; if you use multiples (I don't believe you can use more than 2 stretch rows/columns) it just evenly pads the space with both of them; in this case I used it to keep the gradient evenly split down the middle.

enter image description here

Upvotes: 3

Joru
Joru

Reputation: 4436

The lines and dots are what make this a NinePatch. The dots on the left side and the top define the area that can stretch, while the other two lines define the bounding box for drawing things inside the NinePatch.

If you set such an image as a background - those lines will not be shown. To create these images yourself, you can use the draw9patch tool in the android sdk (http://developer.android.com/guide/developing/tools/draw9patch.html).

One thing to remember, is that the file type for a NinePatch image has to be, for example: image.9.png. Otherwise those lines will be drawn.

Upvotes: 2

Ben Groot
Ben Groot

Reputation: 5050

Do you use the draw9patch app located in your tools folder? This app can be used to simply create a nine patch image.

Upvotes: 0

Related Questions