In this article, we will create an Android application containing WebView with zoom controls. The contents of the WebView will be loaded by an html page saved in assets folder of the application. The html page make use css, javascript and images which are also stored in the assets folder.
This application is developed in Eclipse Classic ( 4.2.0) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 ).
1. Create a new Android application project namely “WebViewLoadHtml”
Figure 1 : New Android Application Project
2. Design application launcher icon
Figure 2: Design Application Launcher Icon
3. Create a blank activity for MainActivity
Figure 3 : Create a blank Activity
4. Enter MainActivity details
Figure 4 : Enter MainActivity Details
5. Remove Android Support Library from this project, if exists
By default Eclipse ( 4.2.0) adds Android Support Library to Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.
6. Download the given below image file namely img6.jpg and save in assets folder
Figure 5 : Download this file to assets folder of the application
7. Update the file res/values/strings.xml
<resources>
<string name="app_name">WebViewLoadHtml</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">WebView Load HTML Content</string>
</resources>
8. Update the layout file res/layout/activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="@+id/wv_html"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="@string/hello_world"
tools:context=".MainActivity" />
</RelativeLayout>
9. Create a css file namely demo.css in the folder assets
.wpta {
color:#00ccff
}
p{
text-decoration:underline;
font-style:italic;
font-weight:bold;
}
h1,div,p {
text-align:center
}
10. Create a javascript file namely demo.js in the folder assets
function demo(msg){
document.write(msg);
}
11. Create an html file namely demo.html in the folder assets
<html>
<head>
<link rel="stylesheet" href="demo.css" />
<script language="javascript" src="demo.js" />
</head>
<body>
<h1>This is Heading1</h1>
<p>Italicized, Bold and Underlined</p>
<a href='http://google.com'>Link to Google</a><br/><br/>
<div>An image loaded from assets folder</div>
<img src='img6.jpg' /> <br/><br/>
<table border='1' align='center'>
<caption>A table with 3 rows and 3 columns</caption>
<tr>
<td rowspan='2'>Rows Spanned</td>
<td>Row1:Col2</td>
<td>Row1:Col3</td>
</tr>
<tr>
<td>Row2:Col2</td>
<td>Row2:Col3</td>
</tr>
<tr>
<td>Row3:Col1</td>
<td colspan='2' align='center'>Cols Spanned</td>
</tr>
</table>
<script language="javascript">
demo("Message by Javascript");
</script>
</body>
</html>
12. Update the file src/in/wptrafficanalyzer/webviewloadhtml/MainActivity.java
package in.wptrafficanalyzer.webviewloadhtml;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebView;
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wvHtml = (WebView) findViewById(R.id.wv_html);
wvHtml.getSettings().setBuiltInZoomControls(true);
wvHtml.getSettings().setJavaScriptEnabled(true);
wvHtml.loadUrl("file:///android_asset/demo.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
13. Screenshot of the application
Figure 6 : WebView loaded with HTML, CSS, JavaScript and Image from assets
14. Download
15. Reference
http://developer.android.com/guide/index.html
I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
Ready to test your knowledge in Android? Take this quiz :
i want to zoom only image in same example.
or open that image to another activity to open full screen so i can implement pinch to zoom or put button to download that images.
Thank You