I'm writing a Phonegap application with a custom made plugin. This plugin generates a full-screen animated background (essentially a video) on it's own SurfaceView (think of it as a background video). I want the regular phonegap webview to be on top of this plugin, as a transparent overlay. How can I do that?
My current code:
public void initialize(CordovaInterface cordova, CordovaWebView webView) {
final FrameLayout layout = (FrameLayout) webView.getView().getParent();
final Activity activity = cordova.getActivity();
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
try {
// here I insert the surface
// that I want to be placed behind the webview
activity.setContentView(R.layout.preview);
MySurfaceView myView = new MySurfaceView(activity);
FrameLayout preview = (FrameLayout) activity.findViewById(R.id.myview);
preview.addView(myView);
}
catch(Exception e) {
Log.e(CamCapture.TAG, "failed: " + e.getMessage());
}
}
});
}
This question is the opposite of How can I overlay a native view on top of PhoneGap's CordovaWebView in Android?
You can do this by putting your web view over Native view in a relative layout and setting following property on your web view
wv.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.setBackgroundColor(ContextCompat.getColor(context, R.color.transparent));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
view.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
}
});
wv.setBackgroundResource(android.R.color.transparent);
It will make your webview's background transparent and you can see your native view.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With