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

Solution 1:

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.

Solution 2:

You can use ZigzagView that is used for this purpose. it supports the zigzag effect for top/bottom/left/right and has a shadow.

add its dependency and make use of it:

'com.github.beigirad:ZigzagView:VERSION'

<ir.beigirad.zigzagview.ZigzagViewandroid:layout_width="match_parent"android:layout_height="240dp"app:zigzagBackgroundColor="#8bc34a"app:zigzagElevation="8dp"app:zigzagHeight="10dp"app:zigzagShadowAlpha="0.9"app:zigzagSides="top|bottom|right|left"app:zigzagPaddingContent="16dp">
    
    // add child view(s)
    
</ir.beigirad.zigzagview.ZigzagView>

reference