Responsive UI


#1

Hi all,

I’m wondering if anyone has experience building a responsive UI similar to something like Sketch or Framer, in which content can be fixed to the top-left and scale to fill the horizontal width - think a header.

I’m also trying to position something to tween up from the bottom to sit in the horizontal and vertical middle of the screen, but it seems to differ from device to device. I also have a button I want to sit a fixed distance from screen bottom, but again, can’t seem to do this.

I’m not sure what the users will be using, so want to make sure it looks good cross device by locking to screen top and screen bottom at least.

Thanks for reading.

Luke


#2

Hey @luke.ryot,

Consistency across devices is definitely a good thing to keep in mind when creating your experiences :slight_smile:

Have you had a chance to look at our Coordinate Systems video from our documentation site yet?

It contains further information on how to ensure your UI stays consistent across devices with different aspect ratios and resolutions.

Hope this helps.

All the best,
Seb


#3

Hi Seb,

That looks exactly like what I’m looking for, not sure how I missed that among the others.

I did initially get confused with ScreenLeft and Right, not realising that they were also doubling as ScreenTop and Bottom when in portrait but again, the video clears everything up.

I managed to position my UI to top and bottom of the screen. The only issue now is that the button I have at the bottom, is relative to ScreenRight, but when I tween it to the center of the screen (vertically in portrait), I can’t do this without changing the relativity to Screen, which causes the animation to snap, leaving it as ScreenRight means the position is never really centered across devices - any thoughts?

Cheers
Luke