CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-drawable
Harish Godara
Harish Godara

Reputation: 2386

How to make a zig-zag layout?

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

Zig-Zag

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.

Upvotes: 0

Views: 1943

Answers (2)

Gagan
Gagan

Reputation: 1497

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.

Upvotes: 4

nitish516
nitish516

Reputation: 174

If you have layout for each circular item , you may use relative layout to align them, using align_below, align_left with margin, align_right with margin tags. Please provide further detail, what are the lines connecting them and exactly what all are requirements for UI and functionality.

Upvotes: 0

Related Questions