- Home /
How to overlap 2 or more UI Elements
Hi, I am using Dual Touch Controls for android (from standard assets) and at the same time I have another canvas which have several buttons in it. The dual touch controls contains a turn and look around control which I have spawned for the whole upper part of screen. Now when I place canvas buttons in that part, they doesn't work. All that work is that touch and look controls. So how to get them both to work?? Thanks!!
An input to the UI system can only captured by one UI element, no matter how many there are at the input position (be it touch or mouse click). This makes sense, because the system can't know what you wanted to interact with.
So the input is passed to the first UI element in which the input arrived, so if you have overlapping RectTransforms (and nothing else is used) then only the "topmost" will receive it.
So you need to define the RecTransforms of the touch controls and the buttons (and all of their parents) in a way that they don't overlap, otherwise they will interfere with each other. To be more specific how to do it, more information is needed, for example the position of the touch controls, the position of the buttons, etc. Description as a screenshot is preferred in this case.
Answer by misher · Aug 28, 2018 at 09:02 AM
If you have 2 elements overlapping on the same canvas, the last children in hierarchy will be considered the closest and will block events for all others. If UI elements are on different canvases, you should look on canvas sort order, ui element on the canvas with higher sort order will block events for other ui elements behind it on other canvases.
Now to answer your question. You can't have 2 overlapping ui elements both receive events, there is always the topmost element and it will block events for all other elements behind it. Make sure RectTransforms of your elements are not overlapping if you want to be able to interact with them. Position your buttons outside of other interactive ui elements.
Note that with changing sort order, if the UI elements overlap it will just change which elements work and which don't (unless the canvas on top doesn't block the elements of the canvas below). So the general solution is to try to design the UI elements so that they don't overlap.
Yeah thanks changing sort order and rect transform worked for me.
Your answer
Follow this Question
Related Questions
Detect if player wants to pause or to jump 3 Answers
Standard UI Button is not working 1 Answer
How to change anchor? 1 Answer
canvas cannot show in android deveice 0 Answers