I'm in need of creating a receipt layout in Android. The idea is very simple, a rectangle layout with a zigzag bottom edge.
The best result would be a drawable/layout with a fixed zigzag size (meaning, fixed half-triangle size), which will multiply the amount of triangles according to the shape's actual width, in real time. With a clip maybe, to have clipped triangles if necessary.
Here is a good example (edit: I'm referring to the bottom zigzag line) :
I actually have no solid idea of how to create it. Thought of 9 patch, but it seems unfitting. Thought of list-layer drawable with horizontal offsets maybe..
Maybe it is possible to create a 9 patch with separate scale sections, to keep the zigzag's aspect ratio... This would also be OK.
EDIT - ANSWER
Using @Luksprog 's comment, I easily recreated what I wanted.
Here is some code:
Image (note that height corresponds to the source image size):
<ImageView
android:id="@+id/zigzag_bottom"
android:layout_width="match_parent"
android:layout_height="12dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="@drawable/zigzag" />
drawable:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/ic_zigzag"
android:tileMode="repeat"
android:antialias="true"
/>
You can't make a nine path for that image because there is no way to define a stretchable area on either the vertical or horizontal side. To obtain that zig-zag pattern you could extract one of the zig-zag tooth(along with it's background shadow) and wrap it in a
BitmapDrawable
which has thetileMode
property for repeating the wrapped image inside the drawable bounds. This way the zig-zag tooth will be repeated and you'll compose the pattern.This is a happy scenario, but you could make it work for the case when the height doesn't match. You could for example wrap the zig-zag
BitmapDrawable
in aLayerDrawable
(along with the actual view drawable(for the rest of the view area)) and then usesetLayerInset()
to place the drawable at the bottom. You could also create your own drawable that places the zig-zag pattern image at the bottom by overriding the onDraw() method.