Search code examples
androidandroid-drawable

Android receipt/zigzag drawable/layout


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) :

enter image description here

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"
    />

Solution

  • 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 the tileMode 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.

    note that height corresponds to the source image size

    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 a LayerDrawable(along with the actual view drawable(for the rest of the view area)) and then use setLayerInset() 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.