Unity UI What is the best approach/practise for a tablet and phone responsive design?

Hi,

I need to make an App that can be use on tablets and on phones. So i have to deal with two kinds of designs of the layout of the app; one for tablets and one for phones.

Does someone has some tips, article links or movie instructions about what is the best approach to realize two UI styles in one app?

Thanks in advance!

Greetings,

Mark

 

This is most likely a good resource for what you need to do.

https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

 

Hi James,

Thanks but i know this article. I was more interested in an article / video on how to use auto layout system to make a responsive UI for tablet/phone in both portrait and landscape.

Greetings,

Mark

 

Exactly what you'd need to know to create a responsive UI that works in both portrait, landscape and with different resolutions is in that article. Some of the things such as the canvas scalar are linked and described in it too. So you'd want to follow some of those links for more detailed information about those specific aspects. I am not sure what you mean by "auto-layout" to be honest. The system just works automatically after you've set it up properly. You don't have to hand code these checks for screen resolution if you don't want to. If you're talking responsive as in web-design the built-in UI handles some of that, but not all. You'd need a custom solution for "media queries" and a way to swap images based on the device screen. I would suggest looking to YouTube at web design practices for responsiveness and then applying that over into your UI code within Unity.

 

Hi James,

Thanks for the advise and the direction to go. I really appreciate that. The problem that i am facing (and i call it auto-layout) is maybe the best shown in the 2 pictures i uploaded. I want to make by example one login screen that is shown correctly on portrait phone but also on landscape tablet. What i now have is shown in the example pictures. I think i should use Unity's auto layout (auto grid layout, layout element, etc) but can't find the way how i can solve this.

Greetings,

Mark

 

Looking at the images this can all be done with anchoring your UI elements. Nothing special required. Your UI Rect Transform will have all of the anchor settings you'll need to center elements on screen, make them stretch the full width of both portrait and landscape screens, to anchor buttons and logos with offsets to the top, left, bottom and middle of the screen. You have a very simple UI layout there and it can be accomplished using the tools from the very first link I posted up.

 

please check out my Asset Better UI (watch the third video which explains anchors). If that already solves your problem: good.
If you want more (like having the elements at completely different locations on landscape) then you should wait for the next version of Better UI which will support exactly that.
My plan is to roll out a closed Beta for owners of Better UI with that feature until end of the year (hope it will work out). If you are interested, please write me a PM, so I don't forget you when I publish the Beta.

 

@JamesArndt Thanks for the advice!

@Hosnkobf I will take a look right away at Better UI

 

Is there allready a new (beta) version of BetterUI?

 

There is the first version of the beta... A new version will come probably this month. Another project with a strict deadline steals my time right now... That is why I couldn't make another beta yet.

 

You should just work with relative anchorpoints. So make Buttons always 30% of a panel for example. So the items will always shrink or grow relatively to their parent object. I did this some time ago and just had a script that is changing one value depending on orientation, the rest was just relative UI elements that are fitting the parent.

 

I am also having trouble using Unity's UI tools to accommodate this sort of UI change. Did you ever figure out a way to design a UI, for these different aspect resolutions?