How to make a zig-zag layout?

Issue

I want to create zig-zag layout same as following attached image:

I tried a lot by creating diagonal lines and arranging them with icon but couldn't make it same.

I implemented diagonal lines with the help of accepted answer from following questions:

1. Diagonal line across view
2. How rotate line in Android XML?

However I'm stuck to arrange lines with icons exactly same as in image.

Solution

I created this custom ZigZagLayout.java file to cater your requirement. You just have to update the package name in the 1st line. It basically extends RelativeLayout, so you can use it in your layout-xmls just like any other ViewGroup class. Once you have instantiated this layout, just add child-views to it like it is done for RelativeLayout via addView(View child).

Example code snippet with dynamically created view:

ZigZagLayout zigZagLayout = (ZigZagLayout) findViewById(R.id.layout_zigzag);
Button btn = new Button(this);
btn.setText("Test Button");
btn.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
zigZagLayout.addView(btn);

I've also added few interfaces to this ZigZagLayout for your easy interaction like ability to set the connector-line stroke width, visibility, color, margins, etc.

Try it out and let me know if it suffices your requirement. Cheers.

Answered By - Gagan