Android PhoneGap with Native Controls

Question

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 1

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.

Answer 2

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");

Answer 3

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.