I have had difficulty setting up the layout of my app. Any rule or hint on how best to use the fill parent “pixels” “percent” size? I have not yet figured out how best to use each one. Every time I start putting up a screen, I waste a lot of time to put together a beautiful lay-out. The execution part of queries in the Database and show the returned data, is delaying for this reason of creation of lay-out.
1 Like
I didn’t understand what you are trying to say but…
If you want to cover whole screen then use fill parent feature… And to specify exact size you can use px and percentage 
Friend, what I asked was if with the experience of some older programmers, if there is any shortcut to lay-out creation. Yes, I know that fill parent is fill in everything, and percentage is relative and pixels is absolute. See, today I stayed the whole morning just drawing lay-out to understand the function since it is not WYSIWYG. I drew a screen inside a VERT ARRG. I put 1 space - h (15 pixels) w (auto), 1 horscrollarrg - h (auto) w (90%), 1 space - h (15 pixels) w (auto), horscrollarrg - h (200 px) %),
1 space - h (25 pixels) w (auto),
horscrollarrg - h (auto) w (90%). The last horzscrollarrgt compound did not appear on the screen (as if the entire screen was already filled). So when I run this screen, there’s a huge void at the bottom. I’m not criticizing, just explaining my question. So to mount my screen I have to go testing by looking at the screen on the smartphone … empirically…
Maybe people from your country can understand you but community language is English.
If your English is bad, poor etc. at least you can use a online translator so at least we can understand what you mean. This is better than using another language.
2 Likes
Well.
If you elaborated what you are exactly trying to do… Something screenshot of something you are trying to make… Then we could help…
I am sorry but I just didn’t get you clearly 
1 Like
Hello…
The title of my topic is a question that says “HOW TO OPTIMIZE LAY-OUT CREATION TIME?” … Is there any hint for component alignment, space creation …etc? If it does not exist, then the topic is closed … I do not want help on what I want to do, I want tips, if any, on how to optimize the LAY-OUT creation time, since the development environment is not WYSIWYG , understood ? This screen I showed is a rough draft, I’m using it to better understand how the components are aligned with each other. I do not want to do something specific. In the second explanation I show that during the creation of LAY-OUT, the screen is with all the area filled with SPACES, HORIZONTAL arragements, CARDS etc … however, when I execute within the Companion, the screen still has spaces to fill … . understood ? So I have to go back and randomly reorganize the components … and so, there is a wasted time in the development of the algorithm … understood? And finally, I ask “HOW TO OPTIMIZE LAY-OUT CREATION TIME”?
An example: a horizontal arragement, within a vertical arragement, is 90% wide and inside it I put 2 components, one on the left and one on the right … I thought these 2 components would divide 100% of the space of the parent component. So I put each component with 50% width. What happened ? They were not aligned. How did I find this out? Using this screen as a draft … doing tests … Hugs
The percentage is based on the screen size not in the components size. In this case, you should have set each component with 45% or fill parent in both.
Testing is sth we cannot avoid … some components/features fit to lay-out automatically eg. side menu, bottom navigation, etc others we have to imagine, create and try it out.
The percentage is based on the screen size not in the components size. In this case, you should have set each component with 45% or fill parent in both.
But the component is inside another component …
Screen →
---------parent component 100% (fill parent)
----------------child component 90%
------------------------ component 45%
-------------------------component 45%
So the next tree would look like this if I wanted to split it in half:
Screen →
----- parent component 100% (fill parent)
-------- child component 90%
------------component 45%
---------------component 22.5%
---------------component 22.5%
----------- component 45%
---------------- component 22.5%
----------------------component 11.25%
----------------------component 11.25%
-----------------component 22.5%
OH!
I think to have got your point, layout creation is sometimes problematic for me too. But in regards to this
I think that the solution would be to choose “fill parent” for both child arrangements, they should split perfectly the parent arrangement in this way. Hope this is a useful hint
About this other point I’d love that the “preview screen” in the Viewer area had custom resolutions (or several selectable screen resolutions, not only the tablet one) in order to have an idea of the final look on every device without the need to use emulators.
Why don’t you use Kodular Companion ?
With the Companion you can visualise the layout of your app in real time on your phone.
You just keep on designing in Creator and Companion will automatically show the changes.
Real WYSIWYG feature.
Why don’t you use Kodular Companion ?
Yes I use. On my Motorola G7 smartphone. At first, every change I made in the development environment was updated on the smartphone screen. Now it’s not like this When I change something, the Kodular Companion closes on my smartphone. I have to reset the connection, re-open the QR code, and position the smartphone in front of the computer.
Are you using big assets in your app?
Great pictures? Do not. These alignment “problems” happen only by inserting components into components (I know this is how it works: we have to insert them inside the horizontal and vertical arregememt and build the layout). But as I showed in the image, sometimes the component disappears from the development screen and in the Kodular Companion shows that there is still a lot of space to fill.But, I have not yet tested the tips that have happened to me here in the topic.
I am also facing this problem from two days. Is there any bug in Kodular?
This problem I mentioned above, I discovered that only happens when the app has only 1 screen.
Not sure if i’m too late but here goes:
Fill parent fills the component to the parent component. The percentages however are based on the Screen height and width and not the parent component. To get a 50/50 split in a component set the 2 inner components to fill parent and they will evenly split. If you want 30/30 for example, you can use a space set to 40% (or use more than one space that all add up to 40%). Play around with the UI to see what looks best but thats what tips i could give.
2 Likes
If you have two layouts in another layout that you want to evenly split to ratios other than 50/50 (since you can get 50/50 by just setting both to fill parent) you can use spaces to fill in the rest but still set the two layouts to fill parent.
In my example I wanted the two layouts to be both 30% so you set them both to fill parent and add a space between them of 40%. Since without the space it would make them both 50% now it will be 30% because percentages add up to 100%. (30+30+40=100). I’m sorry if I can explain properly but this is usually the way I do it
1 Like
Same problem, even for very small project