Android PhoneGap Plugin, UI tabbar, resize WebView

Question

I am creating a tasty PhoneGap plugin that hopefully will be opened up once it is ready.. The plugin is mostly finished, I just need a nice UI for user interaction.

In a nutshell I want to create a "native" android toolbar component. Much how you would if you implement the PhoneGap UIControls Tabbar library for IOS by Decaf Ninja Software.

Ideally;

• The toolbar should be called from JavaScript through PhoneGap to "show" and "hide".
• On these calls the WebView appView is resized as the toolbar appears / disappears from the bottom of the screen.

I can resize the appView on launch with;

super.init();

//re-configure appView layout
super.appView.setLayoutParams(new LinearLayout.LayoutParams(width,
height));

But I am not sure if this is the right approach, also, how can I do this in runtime? (the webview should be fill_parent at app start) I assume I cannot use XML sheets for changing the layout in mid- runtime. The PhoneGap library handles all the layout programmatically so I should probably leave XML out of it.

Also as the appView is protected it is very difficult to play with this unless I am not extending DroidGap in my activity :(

DroidGap.class

/*  184 */     this.root = new LinearLayoutSoftKeyboardDetect(this, width, height);
/*  185 */     this.root.setOrientation(1);
/*  186 */     this.root.setBackgroundColor(-16777216);
/*  187 */     this.root.setLayoutParams(new LinearLayout.LayoutParams(-1, -1, 0.0F));

then,

/*  208 */     this.appView = new WebView(this);
/*  209 */     this.appView.setId(100);
/*  211 */     this.appView.setLayoutParams(new LinearLayout.LayoutParams(-1, -1, 1.0F));

and,

/*  249 */     bindBrowser(this.appView);
/*      */ 
/*  252 */     this.appView.setVisibility(4);
/*  253 */     this.root.addView(this.appView);
/*  254 */     setContentView(this.root);

Any Ideas??

I think this would be useful for anyone who wants to implement native UI controls on top of PhoneGap's webview~~~~

* EDIT

I was able to force a relative layout to the parent of the WebView appView which enabled me to add other relative elements which I can then control the alignment...

with;- (onCreate)

// Initiate appView
super.init();

setContentView(R.layout.main);

// Re-configure appView layout by adding a RelativeLayout between root view and appView
RelativeLayout view = (RelativeLayout)findViewById(R.id.phonegap_container);
html = (View)super.appView.getParent();
html.setBackgroundColor(Color.RED);
view.addView(html, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

I am still looking for some help on animating the appView "up" when my nav bar animates up from the bottom......

Answer 1

Why don't you create a div in the app you are using, which can imitate a slider?

http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/

Or is there a reason for you to do it natively ?