0

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.

Community
  • 1
  • 1
Harish Godara
  • 2,388
  • 1
  • 14
  • 28
  • Could you provide some code examples or ideas you came up with? It's hard to help if you don't give anything to help with. – Michal Jun 04 '15 at 11:16
  • @Michal I edited my question for further info, please have a look. – Harish Godara Jun 04 '15 at 11:28
  • create horizontal linear layouts and add circular items to them.. as per the row #, set the gravity of the circular item to left, center,right (eg #1-left, #2-center, #3-right, #4-left and so on.. – Vinay W Jun 04 '15 at 11:29
  • @VinayWadhwa din't you see attached image? I have to put diagonal line corresponding to circular icons. – Harish Godara Jun 04 '15 at 11:32

2 Answers2

4

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.

Gagan
  • 1,497
  • 1
  • 12
  • 27
  • I implemented your class and it is throwing `NullPointerException` on line : `LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();` – Harish Godara Jun 05 '15 at 09:16
  • As we can't get `LayoutParams` for a dynamically created view. – Harish Godara Jun 05 '15 at 09:29
  • Actually you can get `LayoutParams` for a dynamically created view. I have added example code snippet to my answer. Please check. – Gagan Jun 05 '15 at 10:08
  • I fixed that one, anyways thanks, It don't add diagonal lines after every view, can you please check why? – Harish Godara Jun 05 '15 at 10:48
  • Can you share the screenshot? By the way, the default line-color is BLACK. If your background is black too then you won't see any lines :) You can change the line color. – Gagan Jun 05 '15 at 12:11
0

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.

nitish516
  • 174
  • 14