WebView – Part 1 Capabilities and Limitations

WebView is actually a WebKit canvas for Android platform, WebKit is open source browser engine which is also being used in Apple’s Safari.

This blog outlines many things if not everything about WebView.

Capabilities

1. It is possible to intercept the events in the WebView to overload many of the default behaviour e.g. we can overload the behaviour when Page loading is completed, similarly, loads of other events can be overloaded to customize the behaviour of WebView in specific circumstances.
2. Assets like Videos and Images can be referenced from HTML running in WebView; even the Assets from APK file can be loaded.
3. Assets can also be downloaded over internet and saved into Android device then these Assest can be loaded in HTML.
4. This Widget can be used to load and display HTML’s over the network just like normal web browser.
5. HTML’s that are saved on Android device can also be loaded in WebView.
6. HTML can also be dynamically generated and viewed in WebView, e.g. we can generate HTML based on certain parameter that depends on Time elapsed like we can use GPS and Time elapsed to calculate the distance covered and then display the results in format of Dynamically generated HTML into WebView.
7. HTML code can also be presented in Application resources inside the APK file, this approach can be used to display predetermined data in a formatted way using HTML and WebView

Limitations

1. Its not easy to intercept the events generated by WebView component
2. There are many events that cannot be intercepted, and there is limitation in what behaviours can be overloaded, which limits the customization of this component and changing the default behaviour of this component difficult.
3. By default, a WebView provides no browser-like widgets, does not enable JavaScript and web page errors are ignored. If your application has such requirements it better to invoke Browser application than using WebView like this:

        Uri uri = Uri.parse("http://www.example.com");
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        startActivity(intent);

4.      By default, requests by the HTML to open new windows are ignored.

5.      By default, requests by the HTML to open new windows are ignored

Cookie and Window Management

For security reasons, your application has its own cache, cookie store – it doesn’t share browser data. Cookies will be managed in separate thread so that heavy operations related to cookies can’t block UI thread. “CookieSyncManager” is used to synchronize cookies between RAM and permanent storage, so this class must be used if you want to use cookies in your application.

By default, requests by the HTML to open new windows are ignored, no matter if the link is being opened by Javascript or by the target attribute on a link. You can customize your WebChromeClient to provide your own behaviour for opening multiple windows

You can set your activity to handle orientation and keyboardHidden changes WebView will automatically re-orient it.

Building web pages to support different screen densities

By default, WebView scales a web page so that it is drawn at a size that matches the default appearance on a medium density screen. So, it applies 1.5x scaling on a high density screen (because its pixels are smaller) and 0.75x scaling on a low density screen (because its pixels are bigger). Starting with API Level 5 (Android 2.0), WebView supports DOM, CSS, and META tag features to help you (as a web developer) target screens with different screen densities.

Here's a summary of the features you can use to handle different screen densities:

• The window.devicePixelRatio DOM property. The value of this property specifies the default scaling factor used for the current device. For example, if the value of window.devicePixelRatio is "1.0", then the device is considered a medium density (mdpi) device and default scaling is not applied to the web page; if the value is "1.5", then the device is considered a high density device (hdpi) and the page content is scaled 1.5x; if the value is "0.75", then the device is considered a low density device (ldpi) and the content is scaled 0.75x. However, if you specify the "target-densitydpi" meta property (discussed below), then you can stop this default scaling behavior.
• The -webkit-device-pixel-ratio CSS media query. Use this to specify the screen densities for which this style sheet is to be used. The corresponding value should be either "0.75", "1", or "1.5", to indicate that the styles are for devices with low density, medium density, or high density screens, respectively. For example:

  rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:1.5)" href="hdpi.css" />

The hdpi.css stylesheet is only used for devices with a screen pixel ration of 1.5, which is the high density pixel ratio.

• The target-densitydpi property for the viewport meta tag. You can use this to specify the target density for which the web page is designed, using the following values:
• device-dpi - Use the device's native dpi as the target dpi. Default scaling never occurs.
• high-dpi - Use hdpi as the target dpi. Medium and low density screens scale down as appropriate.
• medium-dpi - Use mdpi as the target dpi. High density screens scale up and low density screens scale down. This is also the default behavior.
• low-dpi - Use ldpi as the target dpi. Medium and high density screens scale up as appropriate.
• - Specify a dpi value to use as the target dpi (accepted values are 70-400).

Here's an example meta tag to specify the target density:

 name="viewport" content="target-densitydpi=device-dpi" />

If you want to modify your web page for different densities, by using the -webkit-device-pixel-ratio CSS media query and/or the window.devicePixelRatio DOM property, then you should set the target-densitydpi meta property to device-dpi. This stops Android from performing scaling in your web page and allows you to make the necessary adjustments for each density via CSS and JavaScript.
It is always best to let the WebView take the full space available in parent’s ViewGroup object, because WebView component doesn’t know about it’s size until it loads HTML into it. So its best to set size of WebView while placing it into a ViewGroup, and then load HTML into it. Otherwise there are issues with WebView.

WebView - Part 2 Accesing Files on Device and in APK itself

Cheers!!

Vivek Jain

Hello Everyone, I came across an application which allowed me to produce nice effects on Images that are in my phone and Images that I take from my phones camera, its available here, 

http://www.amazon.com/gp/product/B004WPVVU2/ref=mas_pm_pix_dp