Android WebView Layout

What is Android layout?

Layout denotes the architecture of the application, where and how the controls should be organized in the UI.It defines the layout structure and holds all the elements that appear to the user.

Android allows us to create layouts for the applications using simple XML file and those layouts must be placed in /res/layout folder.

We can declare the layout in two ways and here we will discuss first way of doing it:

  1. Declare UI elements in XML
  2. Create UI elements at runtime using Java.

Different kinds of layouts in Android are:


As this application requires Internet connectivity to download html resource, it would be good if Internet connectivity check is done before trying to download html resource.

Here are the tutorials which talk about checking Wifi/Mobile Internet:

Android Check Wi-Fi Internet Connection
Android Check Mobile Internet Connection

WebView layout

WebView layout is used to display the web page inside your Activity.

There are essentially two ways to deliver an application on Android: as a client-side application (developed using the Android SDK and installed on user devices as an .apk) or as a web application (developed using web standards and accessed through a web browser—there’s nothing to install on user devices).

Subscribe and download free ebook
Email:

The approach you choose for your application could depend on several factors, but Android makes the decision to develop a web application easier by providing:

  • Support for viewport properties that allow you to properly size your web application based on the screen size
  • CSS and JavaScript features that allow you to provide different styles and images based on the screen’s pixel density (screen resolution)

Why WebView layout?

If you want to deliver a web application (or just a web page) as a part of a client application, you can do it using WebView. The WebView class is an extension of Android’s View class that allows you to display web pages as a part of your activity layout. It does not include any features of a fully developed web browser, such as navigation controls or an address bar. All that WebView does, by default, is show a web page.

Scenarios where WebView can be implemented?

A common scenario in which using WebView is helpful is when you want to provide information in your application that you might need to update, such as an end-user agreement or a user guide. Within your Android application, you can create an Activity that contains a WebView, then use that to display your document that’s hosted online.

Another scenario in which WebView can help is if your application provides data to the user that always requires an Internet connection to retrieve data, such as email. In this case, you might find that it’s easier to build a WebView in your Android application that shows a web page with all the user data, rather than performing a network request, then parsing the data and rendering it in an Android layout. Instead, you can design a web page that’s tailored for Android devices and then implement a WebView in your Android application that loads the web page.

Layout architecture:

The application that we are developing has a simple screen which displays the web page (http://apps.programmerguru.com/examples/ex1.html):

Before we start with developing application, download code from here to follow with the below listings.

Quick Links

Project Structure

Create layout XML

  • Create new android project [File >> New >> Android Project] with project name AndroidWebView
  • Click next and select target android device version [I chose version 2.2]
  • Click next and enter package name – ‘com.prgguru.android’
  • Click finish

Code Listings

By default main.xml will be created (can be found under /res/layout folder) when you create new project and the same is set as layout for the application using setContentView(R.layout.main) method. Check the onCreate method in MainActivity class to know about how the layout xml is set:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);        
setContentView(R.layout.main);
}

Open main.xml, now you can view the layout as either XML or in graphical view and just replace the XML with below one:

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/webkit"
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
/>

How to load web page in the WebView?
To load a web page in the WebView, use loadUrl() method which accepts web URL as parameter:

WebView browser;
browser=(WebView)findViewById(R.id.webkit);   
browser.loadUrl("http://apps.programmerguru.com/examples/ex1.html");

ex1.html
I have created a simple web page using jQuery mobile framework which is loaded in the WebView of this application and here is the HTML content of the page:

<!DOCTYPE html> 
<html> 
<head> 
        <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 	
        <link rel="stylesheet" href="http://apps.programmerguru.com/examples/themes/mytheme.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page" data-theme="a">

	<div data-role="header">
		<font size="2"><center>Android Webview</center></font>
	</div><!-- /header -->

	<div data-role="content" data-theme="a">	
		<p>A WebView provides no browser-like widgets, does not enable JavaScript and web page errors are ignored. If your goal is only to display some HTML as a part of your UI, this is probably fine; the user won't need to interact with the web page beyond reading it, and the web page won't need to interact with the user. If you actually want a full-blown web browser, then you probably want to invoke the Browser application with a URL Intent rather than show it with a WebView</p>		
	</div><!-- /content -->

	<div data-role="footer" data-theme="a">
		<font size="2"><center>AndroidGuru</center></font>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

Web Settings
It manages settings state for a WebView. When a WebView is first created, it obtains a set of default settings. These default settings will be returned from any getter call. A WebSettings object obtained from WebView.getSettings() is tied to the life of the WebView. By default, Javascript is disabled in WebView and font size is set with size 16, use below methods to enable Javascript and change font size.

browser.getSettings().setJavaScriptEnabled(true);
browser.getSettings().setDefaultFontSize(20);

Follow this link to know more about WebSettings in WebView.

Demo

Let us test the application:
Run click on the project >> Run as >> Android application
You could see following screen:


Download Source Code

Entire project is zipped and is available for download. Unzip the downloaded project and to import the project into eclipse, launch eclipse >> File >> Import.. >> Choose downloaded project(How to import android project in eclipse). If you just want to run the application in your mobile and see the output but don’t want to hit your head with source code, download application(apk) file and install it in your mobile device.

Download Source Code Download Application(apk)

*apk in Android is the installation file simliar to exe in windows.

 

Reference:

WebView Layout

I hope you enjoyed the post!! :)

Suggested posts for further reading



Feedback

If you like this post, please do click 'Appreciate Badge'

*You can "Appreciate" this post only once from this IP


Author: Android Guru

Share This Post On
  • med

    how can i make double tap zooming disable ?

    • http://android.programmerguru.com/ Android Guru

      Add below settings to your webview object to display double tap zoom:

      webView.getSettings().setDisplayZoomControls(false);
      webView.getSettings().setBuiltInZoomControls(false);
      webView.getSettings().setSupportZoom (false);
      webView.getSettings().setUseWideViewPort(false);

      • med

        thank u bro ;)

        • http://android.programmerguru.com/ Android Guru

          You are welcome :)

  • sathya

    really good

x
Subscribe and stay in touch!!

Enter your email and stay on top of things:

Your email address will not be published