Android receipt/zigzag drawable/layout

Question

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

Thx, but you're referring to the list, and I'm referring to the bottom zigzag line...btw thank you for editing! Actually, maybe it is possible to achieve with an horizontal ListView!:) — guy_m, Oct 18 '14 at 16:53
You can't create a nine path for that image. You could simply take one of the zig zag tooth and use it in a bitmap drawable with repeat mode set on it. — user, Oct 18 '14 at 17:29
@Luksprog perfect! So simple:P Can you please respond so I can vote your answer? You can use my answer's code if you'd like, it will help others. — guy_m, Oct 18 '14 at 18:11
@young_08 been a long time but go ahead and ask:) Better to use pm — guy_m, Nov 05 '16 at 00:51
by implementing this code it will perfectively work fine but it will show bottom line under ZIGZAG Please help me to remove this issue thank you — ND1010_, Mar 17 '17 at 12:46
Im not sure what happened to you but it should work. Try being accurate with the height you set, which should match the resource/drawable height, or the bottom of it will strech — guy_m, Mar 19 '17 at 23:15
What do you mean? The answer is located at the bottom of the question. Note that the source image is basically 1 triangle.. Which duplicates horizontally. — guy_m, Oct 18 '17 at 08:53

score 4 · Accepted Answer · answered Oct 19 '14 at 06:00

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.

Please look at the question... The answer is (edited) there:) — guy_m, Nov 30 '15 at 17:54
https://medium.com/android-dev-br/repetir-at%C3%A9-encaixar-390ade3f57bd — Renan Nery, Jul 24 '16 at 14:55

score 0 · Answer 2 · answered Oct 30 '20 at 21:28

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.ZigzagView
    android: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

Android receipt/zigzag drawable/layout

2 Answers2

Linked

Related