10

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?

Community
  • 1
  • 1
brunobg
  • 786
  • 6
  • 27
  • Note that current versions of CrossWalk have problems with transparency. This was part of my problem. – brunobg Aug 25 '16 at 16:53

1 Answers1

2

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.

Rakesh
  • 1,035
  • 1
  • 14
  • 31
  • 2
    Can this be done with a regular Cordova application, moving (or positioning) the webview in the relative layout (on the xml, how)? Or do I need to setup a native application and create the webview on top? – brunobg Apr 26 '16 at 15:24