Improved Constraints Feature


Could you explain a bit more about what problem you’re having? Is it not appearing the way you expect it to?


When I give the sliders and labels the exact same coordinates in the editor with percentile constraints. But they render like this once they compile.


What do you mean when you say exact same - same as what? Do you mean they all have e.g. the same left/right value or something? Also are they inside other elements or at the root level in the page?


Am trying to reproduce the issue but not having any luck… Essentially I’d recommend using the same left and/or right value for elements you want to line up horizontally and the same top and/or bottom value for elements you want to line up vertically. Is it only happening on a physical device?


Same left and left, yes. They are not inside any other elements. This is happening on a physical device. It’s bad. I don’t know what to do.


When I set my constraints, it seems like they keep changing on their own. Like I set a percent, it goes back to pixel, or the value keeps changing after I set it.


Could you forward your project url so we can check it out?



OK I think I see what the issue is. You have elements you’re trying to line up vertically but you’re using the top value for one and the bottom value for the other - to make two elements line up vertically I would try to use the same mode - e.g. top and height values for both elements.

Because a percentage value is calculated when the page renders, you’re effectively setting different positions for the elements you’re trying to line up because one is specified relative to the top and one is specified relative to the bottom - these change according to the screen size.


I’m giving up on using sliders. Not sure why the experience is so different on the Android platform. I just swapped the sliders out for drop-downs, and I’ll just write code to convert the drop downs values to bools. It’s coming out much better. But if you could send a screen shot of what you’re doing constraint wise, and a screen shot of the UI result, that would help moving forward.


I don’t have an app I’m working on with switches (your issue seems to be with switches rather than sliders), I just looked at your project and figured out the issue from there. To line two elements up vertically you would just need the vertical constraints to look identical - if you look at yours you’ll see that elements on the same line are using different settings (hoping you don’t mind if I include these screengrabs, they’re just the same page that you included above):

The first one is using the bottom value and the second one is using the top value - they should both use the same e.g. top.


I’m apologize, I misspoke, I meant switches. If there is anyway I could see a best practice example with switches, that would be great. In the meantime, I’ll stick with dropdowns.


No problem at all Chris. I’m not sure what you mean by best practice though, the element positioning is the same as for all elements, you just need to use consistent settings between elements to line them up as I’ve indicated above - e.g. the exact same vertical settings for the two elements highlighted above instead of one having top and the other having bottom.