Adding Zoom controls and loading HTML, CSS, JavaScript and Images from Assets to WebView in Android

August 29, 2012
By

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”

New Android Application Project

Figure 1 : New Android Application Project


2. Design application launcher icon

Design Application Launcher Icon

Figure 2: Design Application Launcher Icon


3. Create a blank activity for MainActivity

Create a blank Activity

Figure 3 : Create a blank Activity


4. Enter MainActivity details

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

Download this file to assets folder of the aplication

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

WebView loaded with HTML, CSS, JavaScript and Image from assets

Figure 6 : WebView loaded with HTML, CSS, JavaScript and Image from assets


14. Download


15. Reference

http://developer.android.com/guide/index.html


How to hire me?

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


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , , , ,

One Response to Adding Zoom controls and loading HTML, CSS, JavaScript and Images from Assets to WebView in Android

  1. Vinayak on January 8, 2016 at 12:44 am

    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

Leave a Reply to Vinayak Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner