Android PhoneGap with Native Controls - android

I am trying to build an Android application with PhoneGap.
I need to be able to use the PhoneGap WebView (super.appView) and all of its javascript magic but I also need to display some native UI controls around the WebView.
This post goes part way to providing a solution Android PhoneGap Plugin, UI tabbar, resize WebView
Has anyone managed to implement PhoneGap with a native UI?
I will also be using a GestureOverlayView but thats another story ;)

Answer:
super.onCreate(savedInstanceState);
//creates super.appView and calls setContentView(root) in DroidGap.java
init();
//just an empty LinearLayout
layoutId = R.layout.blank;
view = new LinearLayout(this);
setContentView(layoutId);
view.addView(your_component_here);
view.addView((View) appView.getParent()); //adds the PhoneGap browser at index 1
//accesses the browser at index 1. Tells browser to not fill view
view.getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1));
setContentView(view);
I would struggle to tell you how this works, all I can tell you is that it does and it is all my own work.
Setting the view to a different colour can help you to see what is going on too....
view.setBackgroundColor(Color.BLUE);
Working with PhoneGap-1.0.0.jar the latest release so far.

A more cleaner approach:
super.onCreate(savedInstanceState);
// Create native view with UI controls.
View header = View.inflate(getContext(), R.layout.header, null);
// PhoneGaps WebView is located inside a LinearLayout.
// The protected (and therefore inherited) variable root
// references this LinearLayout. Add your native Views
// to this variable.
root.addView(header);
// Create WebView and add it automatically to the LinearLayout.
super.loadUrl("file:///android_asset/www/index.html");

Yes, you can embed native controls within HTML by using the plugin.
Call the native method which contains your native view from HTML page using plugin.
e.g. window.plugins.anatomyPlugin.showAudio();
I use this for showing audio player design in native.
This guide from PhoneGap may be helpful.

Related

How can I add android widget to ViroCore scene?

I am developing panorama application and I cannot find some ways to implement my Android layouts or Android widgets(TextView, ImageView etc.) to my scene on ViroView.
Is it possible to do in this 3rd party library(ViroCore)?
Thanks, a lot!
first you need to inflate the view , then create an AndoridViewTexture ,and finally use the function attachview and give it the inflated view as a parm.
AndroidViewTexture androidTexture = new AndroidViewTexture(viroView.provideView(), pxWidth, pxHeight, isAccelerated);
androidTexture.attachView(inflated);

Can native UI controls be accessed directly from Nativescript

Am I able to access UIKit through Nativescript or what ever the equivalent would be in Android directly from NativeScript code? For example, if I wanted to add a drop shadow to a UIView and add this view to the screen, would I be able to create a new UIView and programmatically add a drop-shadow if it's not supported in the XML and CSS implementations? I know they are supposed to have a 100% parody of the Native API's so it should be possible but just want to make sure as I'm having trouble finding examples in the docs.
Yes, you have full access to native objects for both iOS and android.
For example (taken from http://docs.nativescript.org/runtimes/ios/Overview.html):
Obj-C
UIView *view1 = [[UIView alloc] init];
// Or with the short-cut
UIView *view2 = [UIView new];
JS equivalent
var view1 = UIView.alloc().init();
// Or with the short-cut
var view2 = UIView.new();
Look around the runtime references in the docs as there are other examples of how do you operate with native objects for iOS/Android

Eclipse Android App Zoom In Code WebView

I'm very new to developing android apps. I've edited this app I found, which was open source and have got it working to a good extent. There's some code that isn't being used at all (Like the preferences menu) but I haven't removed that as I simply don't want to mess it up. Anyway, when I view the website it's zoomed in.. I've researched the problem and found a few ways to fix it, but none have worked. The app files can be downloaded at this link: http://www.megafileupload.com/en/file/504860/App-zip.html
Thanks for any help!
Now, here's where the answer comes in.
You get the settings for your webview before you instantiate it. You need something like:
void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard); // do this first
WebView webView = (WebView) findViewById(R.id.yourwebviewid); // either this or
either the above to tie the Java object to an xml object
or create a view and add it to some parent
View parent = (View)findViewById(R.id.yourparent_layout_for_webview); // this
WebView webView = new WebView();
parent.add(webView);
webView.getSettings().setBuiltInZoomControls(true);

Progressdialog for phonegap projects

I am very new to html5, css and javascript. i have knowledge in android development.
Now i have started working on phonegap projects.
In my project i want show a loader just like a progressdialog in android when application moves from one screen to another screen or loading something.
Can any one help me to do this in html5?
I had similar need . I was able to do it using navigator object. Please find below sample code
to load data in background
function someJSFunctionLoadingData() {
navigator.notification.activityStart("Your message....", "loading");
////// some activity
navigator.notification.activityStop();
}
Further to navigate around you could use introduce a small delay ( 2 secs) and let progress bar load during that time and then direct user to the url you need. Below is the example for same
function loadMyUrl(){
navigator.notification.activityStart("Loading some url....", "loading");
setTimeout(function loadMyUrl(){
navigator.app.loadUrl('file:///android_asse/www/someurl.html');
navigator.notification.activityStop();
}, 2000 );
}
I got above idea from this link
An easy solution would be to just create a css based spinner element and set it to hidden/visible when needed via your js.
I searched and found tons of examples online here is one for example.

android phonegap/cordova change property on webview

In the past, I have changed a normal Webview property on Android. For example:
wv.getSettings().setAllowUniversalAccessFromFileURLs(true);
where wv is a variable of webview. Now, I have an phonegap/cordova app, and I want to change
the same line of code, I have been trying the the following way:
super.appView.getSettings().setAllowUniversalAccessFromFileURLs(true);
and also like:
super.appView.getSettings().setAllowUniversalAccessFromFileURLs(true);
I don't get any compiling errors, but when I add that line of code on the onCreate method, the app just closes. I have been trying to add the line on the onCreate method at different places, like, before and after the super.onCreate and before and after loading the html (super.loadUrl("file:///android_asset/www/index.html"), but the app always closes. Any of you know if it is possible to change that property on phonegap/cordova ?
That code is already in our web view so you don't need to set it. Probably the reason it is crashing is that you are not running on an ICS device. That method is only available in ICS or better.
If you really want to add it do:
if(android.os.Build.VERSION.SDK_INT > android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
super.appView.getSettings().setAllowUniversalAccessFromFileURLs(true);
}

Categories

Resources