Android 9 patch - allow only a specific background area suitable for stretching

Question

How to make a View with triangular perforations?

I am using the background features to achieve this so far. This works when the dimensions of the View fixed. Now I have a situation where the height of the View not constant, so I need to have a variable height on the fly. I can no longer use fixed-height backgrounds.

Here is the original source background:

And this is what the final View should look like:

Another way to look at the same problem is to allow the center of the image to stretch without distorting the borders? If we could do this, we could use the existing ones available as a background.

How can this be achieved? Has anyone else encountered this problem before? Is there an existing way to deal with this class of problems?

Answer 1

Instead of a regular image, you can create a file with nine patches.

Use the Simple Nine-patch Generator for this.

The trick is a black line on the left side. This tells Android that png is expanding vertically along this area.

See this example:

Save it as a nine patch in imagename.9.png format

Answer 2

You can use the NinePatch image as possible from this view. To learn how to create a NinePatch image, go to Draw 9-patch

Answer 3

You can draw a zigzag path in the background of your view

 Rect rectZigzag = new Rect(); private Path pathZigzag = new Path(); private Paint paintZigzag; private void init(){ this.paintZigzag = new Paint(); this.paintZigzag.setColor(zigzagBackgroundColor); this.paintZigzag.setStyle(Style.FILL); } private void drawZigzag() { float left = rectZigzag.left; float right = rectZigzag.right; float top = rectZigzag.top; float bottom = rectZigzag.bottom; int width = (int) (right - left); pathZigzag.moveTo(right, bottom); pathZigzag.lineTo(right, top); pathZigzag.lineTo(left, top); pathZigzag.lineTo(left, bottom); int h = zigzagHeight; int seed = 2 * h; int count = width / seed; int diff = width - (seed * count); int sideDiff = diff / 2; float x = (float) (seed / 2); float upHeight = bottom - h; float downHeight = bottom; for (int i = 0; i < count; i++) { int startSeed = (i * seed) + sideDiff + (int) left; int endSeed = startSeed + seed; if (i == 0) { startSeed = (int) left + sideDiff; } else if (i == count - 1) { endSeed = endSeed + sideDiff; } this.pathZigzag.lineTo(startSeed + x, upHeight); this.pathZigzag.lineTo(endSeed, downHeight); } } 

refrence