Placing a native view on top of Phonegap's webview on Android

[Juan Docal]

Hi Guys,

Well, the title says it all, is it possible to place a native view on top of the webview without changing the Phonegap sources? I've found this same question in StackOverflow (http://stackoverflow.com/questions/19372746/how-can-i-overlay-a-native-view-on-top-of-phonegaps-cordovawebview-in-android) but as you can see nobody answered or even commented. Any comment would be highly appreciated

Thanks,

Juan Docal

[Shyaam Jadhav]

Hey,

Phonegap/Cordova are also known as single page applications. All the .htmls are loaded on that one single webview of one activity.

If u ask me is it possible I would say yes Because they say "nothing is impossible".

But the real question is should u do it?

and the answer is NO.

Why would u want a native view above an sweet html runing.

u can just do so many things in just html5.

Shyaam

[Don Coleman]

One option is to create a native app and embed a Cordova webview.

http://cordova.apache.org/docs/en/3.4.0/guide_hybrid_webviews_index.md.html#Embedding%20WebViews 

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[jcesarmobile]

It can be done, look into the barcode plugin, it shows a native view with the scanning screen

[Juan Docal]

Sadly the barcode plugin does not place the camera view on top of phonegap's webview, they just open a new activity to handle the camera.

[jcesarmobile]

oh sorry, anyways it can be done, not sure how because I don't know much about android native developmetn, but the admob plugins place ads over the webview

[Shyaam Jadhav]

Like I said before the really question is should we do it or not?

I for one when creating my apps opt for either phonegap or native.

Why should I take the pain of doing both whn I can produce the output by simply using just phonegap or just native android (java) code.

[jcesarmobile]

I don't agree with you, I use phonegap as a component in a few apps, you have the best of both worlds

[rahul]

Have you seen the Ad plugins how they overlay the ad banner over current view, that will surely give you something to start with. I got this code from one of my ad plugins -

// Get the screen size.

WindowManager mW = (WindowManager)cordova.getActivity().getSystemService(Context.WINDOW_SERVICE);

int screenWidth = mW.getDefaultDisplay().getWidth();

int screenHeight = mW.getDefaultDisplay().getHeight();

// Null check.

if (displayAdView == null)

{

return;

}

int ad_width = displayAdView.getLayoutParams().width;

int ad_height = displayAdView.getLayoutParams().height;

// Resize display ad if it's too big.

if (screenWidth < ad_width)

{

// Using screen width, but substitute for the any width.

int desired_width = screenWidth;

int scale;

Double val = Double.valueOf(desired_width) / Double.valueOf(ad_width);

val = val * 100d;

scale = val.intValue();

((android.webkit.WebView) (displayAdView)).getSettings().setSupportZoom(true);

((android.webkit.WebView) (displayAdView)).setPadding(0, 0, 0, 0);

((android.webkit.WebView) (displayAdView)).setVerticalScrollBarEnabled(false);

((android.webkit.WebView) (displayAdView)).setHorizontalScrollBarEnabled(false);

// ((WebView)(displayAdView)).getSettings().setLoadWithOverviewMode(true);

((android.webkit.WebView) (displayAdView)).setInitialScale(scale);

// Resize display ad to desired width and keep aspect ratio.

LayoutParams layout = new LayoutParams(desired_width, (desired_width*ad_height)/ad_width);

displayAdView.setLayoutParams(layout);

}

if (linearLayout != null)

{

linearLayout.removeAllViews();

}

linearLayout = new LinearLayout(cordova.getActivity());

linearLayout.setLayoutParams(new ViewGroup.LayoutParams(screenWidth, screenHeight));

// Use padding to set the x/y coordinates.

linearLayout.setPadding(displayAdX, displayAdY, 0, 0);

linearLayout.addView(displayAdView);

cordova.getActivity().getWindow().addContentView(linearLayout, new ViewGroup.LayoutParams(screenWidth, screenHeight));

[Juan Docal]

Hi Rahul, 

Thank you, I'll give it a try and let you know the results.

- JD

[Juan Docal]

Hi Guys,

I was able to achieve this by using Don Coleman's approach. I put together a "hello world" project to show you how I did it in case someone need it.

Here is the link to the repo.

https://github.com/juandocal/Phonegap-Android

Thanks,

- JD