Hello all 
Im doing pause menu UI and I cant do it responsive for all screens (resolutions).
I really can not understand how to make a responsive UI.
Can anyone help me?
Go through the UI tutorials. They teach you everything you need to know. It’s all about how you choose to lock your UI elements. Well that, and the scaling you apply to the Canvas as a whole.
Grouping them with otherwise empty GameObjects important, too. E.g., you’ll very often want a group to stretch with its container, but you’ll want individual items (buttons or whatever) to not stretch, but instead shift.
It takes a little practice, but hang in there, and you’ll get it!
1 Like
I’m not positive what you mean by “responsive” in the context of the rest of your post, but here is the manual entry for setting up your UI to work with multiple resolutions.
https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
2 Likes
Scale with screen size in the link above is the easiest, but the UI will get huge looking at higher resolutions.
Only if the higher resolutions still have big pixels. If it’s something like a Retina display, the resolution is high but the pixels are tiny.
I tried everything but I can not understand it is not working.
This is how it looks on my resolution (1920x1200)
And this is 1024x768
Assuming the dark jagged-edge thing on the left is your UI element, then it looks to me like you haven’t locked it properly to top and bottom. Of course since you’re not showing us the inspector, we can only guess.
Did you go through the UI tutorials?
Ok I tried Image just blank without any sprite and it works.
I do not know what is causing this problem.
Neither do we. And unless you learn to ask questions better (for example, by posting a screen shot of the Inspector while inspecting the troublesome element), we never will.
1 Like
All right, I’m sorry and I will make sure that future questions are better formulated.
Anyway I fixed it.
Glad you got it figured out. Please explain the solution here, for people who run across this thread in the future.
2 Likes
Which ones?
Google gave me 1.7 million results for:
Unity UI tutorials
1 Like
Probably in addition to the Multiple resolution UI tutorial/how-to already linked, these maybe? https://unity3d.com/learn/tutorials/s/user-interface-ui
1 Like
What’s already linked is NOT a tutorial.
Any of these have anything to do with Responsive Design? The words responsive, size and screen do not feature in the list of tutorials.
Things I use for responsive UI are:
- Anchors and pivots
- Canvas Scaler
- Aspect Ratio Fitter (especially Fit In Parent)
- In one of my projects, I’ve also listened to OnRectTransformDimensionsChange message on the canvas object and switched between a topbar and a sidebar, depending on the orientation of the screen (I think this is how you would accomplish truly responsive UI, but setting things up can be a little tedious)
3 Likes
Today, going through threads like this one (and the tutorials, and blog posts) I’m noticing a recurring theme with Unity UI questions/answers around Responsive:
Most people in the Unity community seem not to know what “responsive” means in the context of UI’s. It’s a famous term with specific meaning (you can google “define responsive UI” and Google will give a clear, concise, explanation), it’s been all over the web for the last 5+ years (hard to avoid, really!), so this is surprising, and I think it explains a lot of the frustration people have when asking about it: People coming from a web background can’t imagine other developers not knowing this term, and so they don’t realise they need to explain/define it.
And the links I find that mention it are usually doing the opposite of Responsive, and pretending that Unity supports Responsive (e.g. top-3 google link for me right now is someone who recreated the official Unity UI docs page on “Designing UI for Multiple Resolutions”, even down to using the exact same layout examples, and then titled it “Building a Responsive UI” even though it absolutely does not achieve that!).
I know that the Unity devs know what Responsive UI means, so it’s disappointing that Unity chose not to add the simple UI features needed in a UI system (that most/all UI systems have) which enable it. Looks like we’re still better-off building Unity UI’s in HTML and then rendering them through Asset Store HTML plugins, at least for now - it works, and you get decent Responsive etc. (If I find a good asset that covers the missing UI stuff, I’ll come back and edit this post).
3 Likes
You can request specific features here.
1 Like
It does have a responsive UI. It responds to different screen sizes…
You can get plenty of flexibility by using Horizontal/Vertical groups. Anything inside a vertical group will stack like a div.
You will have to convert horizontal lists to vertical by switching components in code, but you also have to do those conditionals in CSS anyway.
Sadly Horizontal/Vertical layout groups are still too buggy for anything complex (don’t work correctly with nesting, don’t work at all with AspectRatioFitter (tested in Unity 2018.2, 2018.3), don’t work correctly with ContentSizeFitter - although they used to back in 2015!, etc).
…but it still wouldn’t be Responsive. Responsive doesn’t mean “you have a vertical/horizontal layout group”. At the very least, you need switchers based on parent dimensions - and Unity’s layout groups don’t support any of that.
EDIT: unless there’s something I’ve missed in UI that does switching based on dimensions of parent object? The only thing I’ve seen is the canvas scaler, but that only does half the work needed. If there’s something that does this already, that would be great!