How can I overlay a native view on top of PhoneGap's CordovaWebView in Android?

With Cordova Android 4.0.2, I was able to add a view on top of the webview, like this:

public class HVWMaps extends CordovaPlugin {    @Override    public void initialize(CordovaInterface cordova, CordovaWebView webView) {        FrameLayout layout = (FrameLayout) webView.getView().getParent();        TextView textView = new TextView(layout.getContext());        textView.setBackgroundColor(Color.BLUE);        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(500, 500);        params.setMargins(100, 100, 100, 100);        textView.setLayoutParams(params);        layout.addView(textView);    }}

It seems that the interface for CordovaWebView has changed recently, so this may not work with older versions. For this example, you'll also need to add <param name="onload" value="true" /> to the feature in your plugin.xml so that initialize(..) gets called:

<platform name="android">    <config-file target="res/xml/config.xml" parent="/*">        <feature name="YourPlugin" >            <param name="android-package" value="com.your.plugin"/>            <param name="onload" value="true" />        </feature>    </config-file></platform>

This doesn't scroll with the webview as you mentioned iOS does, but for my project I didn't need it to.

So I spend some time on this myself, my solution has multiple parts:

• You have your CordovaWebView in your layout XML
• Your Activity extends the CordovaActivity

• You override few methods:

  @Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_page);super.init();loadUrl("file://" + getFilesDir()+"index.html");....and other code you like...} @Override    protected CordovaWebView makeWebView() {        SystemWebViewEngine systemWebViewEngine =        new SystemWebViewEngine((SystemWebView) findViewById(R.id.cordovaWebView));return new CordovaWebViewImpl(systemWebViewEngine);    }    @Override    protected void createViews() {//must override this, otherwise crashif (preferences.contains("BackgroundColor")) {    int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);    // Background of activity:    appView.getView().setBackgroundColor(backgroundColor);}        appView.getView().requestFocusFromTouch();    }

So the makeWebView() is the key part, where you override the CordovaActivity's method to return your own CordovaWebView instance from the XML.

The createViews() method has to be override too, since if you check the CordovaActivity code there is a setContentView(appView.getView()), which going to cause crash otherwise. You make sure when you override you REMOVE that part.

finally the xml (not the whole content):

    <!-- The main content view -->    <org.apache.cordova.engine.SystemWebView    android:id="@+id/cordovaWebView"    android:layout_width="match_parent"    android:layout_height="wrap_content" />

Have you tried to see the order of your views?Maybe it's overlapped down your webview

//hide webview
//webview.setVisibility(View.GONE); //to test if thenew view appear
webview.setZOrderOnTop(true);

//show the new view myView.setVisibility(View.VISIBLE);

myView.bringToFront();

I will asume you are 100% sure this line get a valid parent which you can add a view.

FrameLayout frameLayout = (FrameLayout)webView.getParent().getParent();