Getting Started
Documentation
Resources
Forum
Release Notes

Improved Constraints Feature

#1

Hello everyone! With today’s release you’ll see an improved Constraints section in the Dropsource editor for styling your app pages with a more granular level of control. :straight_ruler: :mag: :tada:

button-constraints-controls
button-constraints-controls.png1226x1056 48.5 KB

As many of you will know, our previous Constraints controls allowed you to specify top, left, width, and height for each Element, using relative or proportional values. This made it tricky to achieve certain layouts, especially when it came to aligning to the right or bottom. With the new Constraints feature, you can choose to specify your Element size and position using a variety of modes for vertical and horizontal alignment.

Our main section for this feature in the help center documentation provides an overview:

And more detail in a few of our FAQs:

This method of specifying your app layouts is clearly more fully featured than our previous iteration and does make a whole range of new layout use cases possible, but on the flipside it does make the controls a little more complex to learn and use - for that reason I’m extra keen to hear your perspectives on this development, so please tell us honestly how useful/usable (or not) you find it! :mega: :hear_no_evil:

One other notable mention in this release is that Dropsource apps are now iOS 12 compatible (backwards compatible to iOS 11), so Dropsource will now write your iOS apps in Swift 4.2 and will work in Xcode 10. To update any existing apps just open a project and hit the Test button to create a new build! (Note that you will need Xcode updated to 10 in order to import your newly built apps.) :iphone:

#2

Excited about this, thank you! :smiley:

#3

Let us know how you get on with it…! :slight_smile:

#4

This is definitely a useful update. Having more options and more control is almost always better even if it looks complicated on first look. Because you can always learn to do something even if it’s complex. But you’re left helpless if something isn’t available.

Previously it was very hard to center elements horizontally and vertically withing another view but this new constraint system makes it easy to achieve that now.

In terms of usability on first look, it may look confusing but once you start trying it out it becomes clearer.
I can see some few people getting a little bit confused using it for the first time but they will get it quickly.
Maybe you could do some video demo for those that may still be struggling to get the concept.

One thing though that i think is missing unless i’m the one missing something is the ability to set a fix width/height in pixels and also center the element.
Lets take the image below as an illustration. I want to keep the photo’s width of 100px fixed while also keeping it horizontally centered in the outer sea blue view.
Since the left and right constraints determins the the width it means my photo’s width will change on different screens.
On the other hand if i use the left and width constraints, I may lose the ability to have the photo in the center of my blue box.
Am i missing something or how will I achieve this?

image
image.png773x540 41.7 KB

On different note this update is very useful to (android) developers who may have to export their source code and make modifications.
The generated code from the previous system based on the deprecated Percent Relative Layout was a bit messy and difficult to modify in code.
I expect the code from this Constraint Layout to be cleaner and easy to modify.
Haven’t exported any code from this yet so we will see.

Overall a very useful and important update.
The design too is smart. Good job guys.

#5

I am having the same issue. I want to have an image to be full width, but I am not able to set the width of the element to this, the photo is only the size of half the screen. Ex: I want 360px, but image is only 160px. I can’t make it 360px

#6

Also here are two things i will want to suggest.

  1. Ability to increase/decrease the constraint values (both percent and pixels) with mouse scroll or up/down arrow keys.
    To for example if i have my mouse inside the value input i can easily use mouse scroll up or down to quickly change the values. This will save a bit of keystrokes when trying our different values to see the effect.
  2. This not really important but i think you should prevent entering invalid values. For example if using the left and right percentage constraint I shouldn’t be able to enter values whose sum is greater than 100%. This may sound stupid as no one will intentionally do it but it can happen especially for transparent elements or views if you don’t pay attention to the screen and accidentally enter wrong number.
    image
#7

@skyblue23 did you try the Image Asset Scale options

image

What i was talking about is a bit different. My issue is the ability to fix the width/height while still centering it.

#8

Hey @seanhoots - thanks so much for this detailed feedback…! :fireworks: :+1: :pray:

Yes you are absolutely right, the centering option you’re describing was originally planned but was deprioritized for this release in order to scope it more effectively. However I’ll pass on a note from QA engineer @dhemrick that might be helpful:

If you make the object a fixed width, set the left (or right) constraint to be %, then center it using the smart guides, it will automatically be centered on any sized screen. You can verify this by switching between the left width and right width constraints and set both left and right to be %. They should both end up being the same (or nearly the same) oddball %.

Am definitely with you on the feature not being 100% intuitive straight away, I had the same experience myself, although you’ve articulated the tension between control / learnability better than I had lol. Will definitely look into some additional education resources, video (or maybe some animated gifs) sound like a good option to me too, feels like something visual will work best here.

And thanks for calling out the Android layout update, the hope is that your source code will be a lot cleaner and easier to work with as you’ve mentioned.

Thoughts much appreciated…!

#9

Wondering if the tip I’ve included from engineering might be worth a try…?

If you make the object a fixed width, set the left (or right) constraint to be %, then center it using the smart guides, it will automatically be centered on any sized screen. You can verify this by switching between the left width and right width constraints and set both left and right to be %. They should both end up being the same (or nearly the same) oddball %.

#10

Noted, I will pass these on. I have a feeling validation was also initially considered but again fell out of scope for this iteration.

#11

And just a note that the tip from Dale won’t result in 100% accurate centering, just a hack to get as close as you can in the current implementation.

#12

Thanks Sue and Dale for the idea.
Actually this brings up some question i had in mind but forgot to ask.

Should we take the “smart guide” literally as in just a guide or there is something more to it in terms of the generated code.
For example if i use the smart guide to center something, is some sort of constraint generated in code or the smart guide is just a visual guide in the editor.
Because i actually thought about Dale’s idea of setting my photo to the fix width and centering it with the smart guide but i wasn’t sure if the smart guide generates some constraint in code.

#13

So moving an element on the canvas using smart guides won’t change your selected constraint mode or value type (i.e. fixed or relative), but the number values will update according to what’s on the canvas. If you e.g. set your constraints to use relative values, using the center smart guides will result in percentages that come close to centering for most phone screens (you might notice more of a difference on much larger screens mind you). It doesn’t do anything different in the source, that’ll just be a reflection of the values you see in the editor.

#14

Another tip from Dale on centering image elements - if your image asset is uploaded at the size you want to display it - use a percentage width value that is larger than you think you’ll need (or left and right leaving more space than you need for the image in between) and select center mode for the asset scale.

#15

Thanks Scale Aspect Fill worked for me

#16

Thanks @Sue and Dropsource team. This is a step in the right direction.

The only thing you might need to document well is how to address the margin that’s between elements using additional View Element. This might be necessary when you have more than three elements to position at the same height.

Secondly there is a need to auto adjust text size when using % constraint to auto size text elements to maintain the look.

Nexus 5
image ![image|563x326]

Nexus 7
image

Well done, Dropsource team.

#17

Hi Timothy, thanks for the feedback!

I’m not 100% clear on the issue you’re describing with margins, could you go into a little more detail?

And yep I’d say adjusting text size dynamically / scaling fonts would maybe be a different feature but can see that would be useful.

#18

Idk, I like the old functionality better. I’m having an extremely hard time getting labels and slider buttons to line up completely.

#19

Hi Chris, sorry to hear you’re having trouble - the downside to having additional options is that the complexity is increased a little. Could you give me an example of a case where you’re struggling to line something up e.g. with screengrabs in case I can advise?

#20

Capture
Capture.PNG940x537 29.6 KB

This is how I have to align the slider buttons to get them to align properly on my Android device. I’m using percentages for the constraints. Please advise.