How to get UI Elements to change with screen size.

Unity Engine
1

Hello all,

I have a login interface that looks great at a particular resolution but tiny when exported to my phone, for example. It looks like this:

I can’t figure out how to automatically scale the UI elements with screen size without writing a bunch of code like this:

        sizeX = Screen.width/1.975f;
        sizeY = Screen.height/16.87f;

        loginData[0].transform.position = new Vector3((Screen.width/4 - 10)*3, (Screen.height/2) + (sizeY + sizeY/2)*2,0.0f);
        loginData[0].transform.localScale = new Vector3(sizeX/160.0f, sizeY/30.0f, 1.0f);

        loginData[1].transform.position = new Vector3((Screen.width/4 - 10)*3, (Screen.height/2) + (sizeY + sizeY/2),0.0f);
        loginData[1].transform.localScale = new Vector3(sizeX/160.0f, sizeY/30.0f, 1.0f);

Is there an easier way to get my elements to scale with screen size instead of remaining absolutely sized? Anchoring to stretch across the screen won’t work because of the text labels next to the input fields; the input fields won’t have an anchor point on the left side nor would the text labels have an anchor point on the right.

Thoughts? Thank you!

2

Check Canvas component settings.

1 Like
3

This is rather simple to solve without any code. Anchoring does not have to be on exactly the left or the right side, it can for example be at 50%of the screen width till 100% of the screen width. Take a closer look at the Rect Transforms the UI elements have.The anchors have a min and max value, where the values inside can be between 0 (0% of screen width/height) and 1 (100% of screen width/height). Also notice, that you then can add padding with Left, Top, Right and Bottom. Also remember, that you can use Panels for a better structure of your elements. E.g it would be a good idea, to put the textLabel and textField in one panel, because they should always stay together → easier repositioning

1 Like
4

Probably what you want to do is change the settings on the CanvasScaler component (located in the same GameObject as the Canvas) to ‘Scale With Screen Size’, as I believe it defaults to constant pixel resolution.

1 Like