Z-ordering on Android not working as expected

[wolfenrain]

Bug Report

Current behavior
Z-index does not fully work on Android, its either on top or on bottom but overlapping multiple views won't work

Steps to reproduce

• Create Publisher with z-index of -1
• Create Subscriber that is overlapping the Publisher with a z-index of -2
• Steps 1 and 2 with z-index reversed
• See the difference

What is the current bug behavior?
The plugin uses(by default) SurfaceViews, this particular View does not work as any normal View(More info). Because of that the setZ or setTranslationZ won't do much expect putting it in front or behind the WebView.

What is the expected correct behavior?
That the given z-index puts the right view "in front".

To do so we could use TextureViews(tokbox reference). I am not entirely sure if there is a reason for not using TextureViews, maybe @msach22 knows something about that.

Both TextureViews and SurfaceViews have their pros and cons, but in general you should try to keep the total count of SurfaceViews down.

I have writen an implementation that makes use of the TextureView and Matrix transforms. The implementation makes use of a custom ViewGroup that will be used instead of the TextureView(mPublisher.getView(), mSubscriber.getView()). The ViewGroup adds the TextureView as a child and overides the dispatchDraw method. We then position and scale the TextureView using Matrix transforms and in the dispatchDraw we use Path to clip the TextureView within the given bounding rectangle.

IMPORTANT
This implementation has been written and used in combination with PR49 and PR59.

I can make a PR with this implementation if required, I do belief that this is a needed feature if people want to make properly use of z-ordering on Android.

[msach22]

@wolfenrain @mark-veenstra I'll review this issue and the associated PRs in the upcoming week so we can get this out in the next feature release. Apologies for the delay

[mark-veenstra]

@wolfenrain Can you add a PR without the usage of PR59

[msach22]

@wolfenrain Are you still working on the PR without #59 ?

[sagivf]

If it helps anyone this fork solved the issue for me:
https://github.com/talkspiritlab/cordova-plugin-opentok

[wolfenrain]

@msach22 sorry for the late response, I havent worked on it yet, but I can make some time to work on it if needed

[rhclayto]

@msach22 sorry for the late response, I havent worked on it yet, but I can make some time to work on it if needed

Any updates on this?

[msach22]

@wolfenrain No worries, do you think you will have the capacity to create a PR?

[Shtibel]

I also have the same problem
trying to add html button with absolute position on top of the video and I can't see the element

[Shtibel]

This is a problem also in IOS
Please update the issue title

[wolfenrain]

@msach22 sorry, I haven't gotten around to it. But as we mentioned in #59 we could use a polyfill. That would make this issue useable.

One such polyfill could be [webcomponentsjs] (https://github.com/webcomponents/webcomponentsjs). Using that we can have the MutationObserver that gives us #59 functionality

[mark-veenstra]

Why not skip the API level 16 in the Cordova plugin. Then no changes are needed. API level 16 is also NOT supported by Cordova itself: #59 (comment)

[damianrejman]

It might help damianrejman@db1692b