Group elements in KWGT custom widget

I would like to group elements in KWGT custom widget with the goal to put together elements of specific design areas (e.g. header, main content area, footer, bars, etc.), to better align all elements of a group together and to give attributes to an entire group, but I don’t know exactly, how to proceed. I saw that there are 2 kind of “element folders”: overlapping group and staple group. But everytime I want to move elements to such a group, I lose the alignment of those elements or the layer position in the design. Can anybody please support me with that? Thanks a lot!

Technical setup
Device type: OnePlus 9 Pro
OS version: Android 14
KWGT Pro version: 3.75b410013
Launcher: Nova

Maybe it is a beginner question, but feedback would be highly appreciated.

Overlap group:
Each element has the ability to overlap another element inside the group. So for example if you have two shapes position “center” inside an overlap group one “falls” on top of the other. You can change which element is “on top” by changing the order of the elements inside the group in the kwgt editor.

Stack group:
These groups have two basic modes:
Horizontal will stack the items one next to the other from left to right.
Vertical will stack the items one above the other from top to bottom.

Depending on what you design you may use a combination of said groups.

Useage tips:
A. The overlap group inherits the dimensions of its inner bigger item. So, if you have for example one square shape inside it, no matter what position you choose for this shape, it wont make a change. Here you “play” with the padding option in order to:

  1. Give the group the dimensions you desire (also look tip E. )
  2. Place the items wherever you desire within the boundaries of the group.

I would advise you here to place two shapes of different color inside an overlap group and play around with paddings and positions to get a feel how everything works.

B. You can easily create visually complex stuff by combining groups. For example, for a table - matrix of lines and columns you can simply insert vetical stack groups in a horizontal stack group ( or vice versa ).

C. Due to the fact that groups have their own setting of visibilty, you can use groups to show - hide stuff with buttons that change a global variable.

D. You have to wrap your head around the sifference of the position of an element inside a group and the position of the group itself. For example you can have a group positioned “top” and inside that group you may have an item positioned bottom. Again Id advise you to experiment and play with these settings to figure out how everything works.

E. Advanced tip ( tied to tip A ) : if for some reason you want to create an overlap group with specific dimensions and then start positioning items inside what CAN help is use a transparent shape as background and give that shape the dimensions you want the group to have. This makes sure that your overlap group’s dimensions become “static” and dont change whenever you item inside the group messing all your positioning and aligning. As long as your items’ size and their padding is smaller than this transparent shape boundaries your overlap group stays intact.

For more specific tips, you might need to post specific questions of specific groups - items and what you want to achieve with them.

1 Like

Thank you so much @Theodor for your quality feedback, this is highly appreciated! I see, described 2 groups are able to manage complex things. My intention was much more simple. I just would like to find a solution, to have less single elements in the KWGT overview list and an option to combine different elements in a group (or folder), to be able to group them and align them together. Is this possible?

I think, an overlap group can help with what you are after. It can provide a neat way to keep things less cluttered in the root folder of design and once all your items are aligned in it, you can simply move around the whole group.

OK that means I need to align each item again after putting it into an overlap group? And what is the best approach to move them into this new overlap group?

Yes, put them in the group first, position them after.
The approach depends solely on what you are after.