How to add native custom views to HTML pages in PhoneGap/Cordova?

Question

I am developing an Android PhoneGap application, where I need to add my custom camera/gallery views to HTML page - for example some empty DIV in my HTML Page, whose ID, I already have. How to achieve it?

I know how to write Plugins and basic HTML stuff.

is there any way, I can access elements of current HTML page in Cordova Webview?

my requirement is to add my customized camera view to HTML page with whatever dimensions I can.

Answer 1

Update the answer:

I finally figured out how to do this.

First of all, you need to add your view, such as button, into the Cordova WebView. The Cordova WebView takes care the scroll.

webview.addView(button);

https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/master/src/android/plugin/google/maps/GoogleMaps.java#L373

If the device orientation is changed, you need to change the size. But in Cordova, you can't not receive the event in java, so you need to listen the event in JavaScript.

window.addEventListener("orientationchange", onMapResize);

https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/master/www/googlemaps-cdv-plugin.js#L1381

And here is the key point. Change the position in HTML to the point in View, you can do this

Math.round(d * webView.getScale());

https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/master/src/android/plugin/google/maps/GoogleMaps.java#L383

Here is my plugin. I embed a Google Maps Android API v2 into the specified div tag.