Responsive UI

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

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

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

1 Like

I’m guessing the referenced video has moved here.

Also, I think I’m missing something. I have everything working as shown in the video - i.e. for portrait orientation. The group is positioned relative to screenRight, which means it’s at the bottom in portrait orientation. I want it to remain at the bottom when in landscape orientation, and that’s working except that it doesn’t automatically scale to fill the screen horizontally as it does in portrait.

How do I get it to behave in landscape the way it does in portrait - i.e. to fill the width and scale proportionally?

1 Like