Making a responsive UI

In this section, we are going to learn how to make the UI we created previously adapt to different screen sizes. We are going to discuss the following concepts:

• Dynamic positioning and sizing
• Dynamic scaling
• Using relative positions

Let’s start by discussing how we can make the Position and Size of our objects adapt to the screen size.

Dynamic positioning and sizing

So far, we have used the Left and Top position attributes in order to specify the x and y positions of our elements with respect to the top-left corner of the screen, and then Width and Height to define the Size. While essentially that’s all that’s needed to define an object’s position and size, it is not very useful in all cases, especially when we need to adapt to different screen sizes.

For example, if you need to place an object in the top-right corner of the screen, knowing its size is 100x100 pixels and the screen size...