Amazon Gift Cards

Tuesday, February 3, 2009

WebView with ZoomControls in Android

Here is an article on how to use WebView with ZoomControls enabled. First of all add an Internet permission to your manifest file.
<uses-permission android:name="android.permission.INTERNET">
</uses-permission>

Layout (webview.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" 
>
  <WebView
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
  />
</LinearLayout>


public class Main extends Activity {
  private WebView myWebView;
  private static final FrameLayout.LayoutParams ZOOM_PARAMS =
new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
Gravity.BOTTOM);

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.webview);
    this.myWebView = (WebView) this.findViewById(R.id.webView);

    FrameLayout mContentView = (FrameLayout) getWindow().
    getDecorView().findViewById(android.R.id.content);
    final View zoom = this.myWebView.getZoomControls();
    mContentView.addView(zoom, ZOOM_PARAMS);
    zoom.setVisibility(View.GONE);

    this.myWebView.loadUrl("http://www.almondmendoza.com");
  }
}



Quick Explanation:
The stuff here were extracted from BrowserActivity, so if there is an error on my explanation, i apologize in advance.

FrameLayout mContentView = (FrameLayout) getWindow().getDecorView().findViewById(android.R.id.content);
-- According to Windows Decoration, this would retrieve the top-level window decor view.

final View zoom = this.myWebView.getZoomControls();
-- this would get the zoom controls of the webview object

mContentView.addView(zoom, ZOOM_PARAMS);
-- this would add the zoom controls to our our top-level window, the ZOOM_PARAMS was just copied from BrowserActivity, so i dont actually know what it means :)

zoom.setVisibility(View.GONE);
-- This would hide the zoom at the start, we do this because we want to show the zoom controls only when the user's scroll the browser.

this.myWebView.loadUrl("http://www.almondmendoza.com");
-- This would load the url to our webview.


Source:
The codes above are all the sources, you just have to import the right classes. In eclipse just highlight the errors and right click then Quick Fix.

Reference:
BrowserActivity

6 comments:

Tim said...

In Eclipse, what is the Application Name, Package Name, etc.?

monmonja said...

@tim the application name is like what it implies, the name of your application. the package name is again like how its written is the name of the package of your activities (kindly learn java if you still dont understand what packages means), the Create activity is the main activity that would be launched when you start the app (you can still change this later on), the min sdk version is what version of android you are targeting your app with (you can see this on the build target above the form, the API level). Hope this helps :)

Unknown said...

I know this is a bit old, but why not just use this?

myWebView.getSettings().setBuiltInZoomControls(true);

Unknown said...

There is something wrong when loading the "R.layout.webview". The only option given by eclipse is to manually modify the R.java file.

ProductLabz said...

Hi, very well written post:
Here's another post for WebViews, this is also good little theoratical
http://androiddeveloperuser.blogspot.com/2011/05/webview-part-1-capabilities-and.html

Anonymous said...

hi, in response to what alejo posted, is there any solution to it?