How to overlap 2 or more UI Elements

Question

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!!

Answer 1

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.

Add comment · Show 2 · Share

Harinezumi · Aug 28, 2018 at 09:26 AM 1

Share

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.

coolbudy1998 · Aug 28, 2018 at 03:50 PM 1

Share

Yeah thanks changing sort order and rect transform worked for me.

How to overlap 2 or more UI Elements

1 Reply

Your answer

Follow this Question

Related Questions