Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"
    />
like image 408
guy_m Avatar asked Oct 18 '14 15:10

guy_m


People also ask

How can I create a receipt layout in Android?

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.

How can I make a zigzag rectangle layout?

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.

Is it possible to generate a drawable object from a layout?

Is there a way to generate a drawable object from a layout? In fact, I need a cropped part of my initial layout, and my idea is to transform the layout into a drawable object and then to crop drawable. OK, but what will be with the controls behaviour on that drawable? Even if that is pure text, I am afraid it will look ugly.

How do I make a rounded corner in Android?

This in-built feature makes rounded corners very easy to implement. It works on any view or layout and supports proper clipping. Here's What To Do: Create a rounded shape drawable and set it as your view's background: android:background="@drawable/round_outline".


1 Answers

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.

like image 139
user Avatar answered Sep 20 '22 07:09

user