Android

Android WebView Example with source code

Setup Eclipse with Android ADT Plugin for test/code environment (by using Android API Level 7 and Emulator).
P.S- Above page is having around 14 images, download size could be around 700KB.

This Page and/or example code is using Android API Level 7 and tested using corresponding Emulator only.
For latest information please refer Android Official website.

Using Android API Level 7: This example will show a very simple way to demonstrate usage of WebView class from Android API. WebView can be used for showing any Web site by URL. This means WebView will show HTML content from remote web site.
 
These images are showing the complete page in two snapshots. Activity layout is having a webview and the URL is hard-coded in the application activity class file.
AndroidWebViewExample/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.techiecommunity.androidwebviewexample" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15" /> <uses-permission android:name="android.permission.INTERNET"/> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".ExampleWebViewActivity" android:label="@string/title_activity_example_web_view" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>


AndroidWebViewExample/res/layout/activity_example_web_view.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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" /> </RelativeLayout>


AndroidWebViewExample/res/menu/activity_example_web_view.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_settings" android:title="@string/menu_settings" android:orderInCategory="100" /> </menu>


AndroidWebViewExample/res/values/strings.xml

<resources> <string name="app_name">AndroidWebViewExample</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_example_web_view">ExampleWebViewActivity</string> </resources>


AndroidWebViewExample/res/values/styles.xml

<resources> <style name="AppTheme" parent="android:Theme.Light" /> </resources>


AndroidWebViewExample/src/net/techiecommunity/androidwebviewexample/ExampleWebViewActivity.java

package net.techiecommunity.androidwebviewexample; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.webkit.WebView; public class ExampleWebViewActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example_web_view); WebView webView = (WebView) findViewById(R.id.webView); // This is the warning visible in the Eclipse IDE as "Using setJavaScriptEnabled // can introduce XSS vulnerabilities into you application, review carefully". webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("http://www.techiecommunity.net"); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_example_web_view, menu); return true; } }


By enabling Javascript for the WebView instance, one can use JavaScript with HTML content for UI. So application on Android Platform with UI of any web based application. As mentioned in the AndroidManifest.xml file, this example requires a permission of "android.permission.INTERNET". WebView with another feature of loading data/HTML into the WebView class file. This example with WebView class tries to show another usage of creating UI using HTML, JavaScript and HTTP for displaying pages. In the following section I have extended this example to demonstrate on how to use WebView class with HTML content hardcoded with external JS file and showing the application on screen, as shown below:
This example has three text fields, two files are for inputting two numbers, and on click of sum link, will show summed number in the third text field.
AndroidWebViewExample/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.techiecommunity.androidwebviewexample" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15" /> <uses-permission android:name="android.permission.INTERNET"/> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".ExampleWebViewActivity" android:label="@string/title_activity_example_web_view" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>


AndroidWebViewExample/assets/Test.js

function showSum() { document.getElementById('sumDisplay').value = Number(document.getElementById('a').value) +Number(document.getElementById('b').value); }


AndroidWebViewExample/res/layout/activity_example_web_view.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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" /> </RelativeLayout>


AndroidWebViewExample/res/menu/activity_example_web_view.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_settings" android:title="@string/menu_settings" android:orderInCategory="100" /> </menu>


AndroidWebViewExample/res/values/strings.xml

<resources> <string name="app_name">AndroidWebViewExample</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_example_web_view">ExampleWebViewActivity</string> </resources>


AndroidWebViewExample/res/values/styles.xml

<resources> <style name="AppTheme" parent="android:Theme.Light" /> </resources>


AndroidWebViewExample/src/net/techiecommunity/androidwebviewexample/ExampleWebViewActivity.java

/** * This code is provided on "AS IS" basis * @Author: Ishtek * @Contact: reaching@techiecommunity.net */ package net.techiecommunity.androidwebviewexample; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.webkit.WebView; public class ExampleWebViewActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example_web_view); WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); String str = "<html><head><script type=\"text/javascript\" src=\"file:///android_asset/Test.js\">" + "</script></head><body><form><input type=\"text\" id=\"a\">+<input type=\"text\" id=\"b\">" + "=<input type=\"text\" id=\"sumDisplay\"><a href=\"javascript:showSum();\">Sum</a></form></body></html>"; webView.loadDataWithBaseURL("file:///android_asset/", str, "text/html", "utf-8", ""); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_example_web_view, menu); return true; } }


Following section is updated as of 16th Dec 2013
As shown in the screen above, I have used jQuery Core, jQuery UI, and jQuery Theme in the HTML content, loaded in the WebView class.
AndroidWebViewExample/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.techiecommunity.androidwebviewexample" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15" /> <uses-permission android:name="android.permission.INTERNET"/> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".ExampleWebViewActivity" android:label="@string/title_activity_example_web_view" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>


AndroidWebViewExample/res/layout/activity_example_web_view.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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" /> </RelativeLayout>


AndroidWebViewExample/res/menu/activity_example_web_view.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_settings" android:title="@string/menu_settings" android:orderInCategory="100" /> </menu>


AndroidWebViewExample/res/values/strings.xml

<resources> <string name="app_name">AndroidWebViewExample</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_example_web_view">ExampleWebViewActivity</string> </resources>


AndroidWebViewExample/res/values/styles.xml

<resources> <style name="AppTheme" parent="android:Theme.Light" /> </resources>


AndroidWebViewExample/src/net/techiecommunity/androidwebviewexample/ExampleWebViewActivity.java

package net.techiecommunity.androidwebviewexample; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.webkit.WebView; public class ExampleWebViewActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example_web_view); WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); String str = "<!DOCTYPE html><html><head>" + "<link rel=\"stylesheet\" type=\"text/css\" " + "href=\"http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css\"/>" + "<script src=\"http://code.jquery.com/jquery-1.10.2.min.js\"></script>" + "<script src=\"http://code.jquery.com/ui/1.10.2/jquery-ui.min.js\"></script>" + "<script>$(function() {$( \"#dialog\" ).dialog();});" + "</script></head><body><div id=\"dialog\" title=\"Basic Dialog\">" + "<p>This is a basic dialog using jQuery Core and UI.<br/>This dialog will be " + "shown on load of this page.</p></div></body></html>"; webView.loadDataWithBaseURL("http://code.jquery.com/", str, "text/html", "utf-8", ""); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_example_web_view, menu); return true; } }


Following is the HTML content embed in the Activity class file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
 <script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic Dialog">
<p>This is a basic dialog using jQuery Core and UI.<br/>
   This dialog will be shown n load of this page.</p>
</div>
</body>
</html>
Using Meta tag 'ViewPort' and border for achieving following screen, as shown below:
  
HTML content used with thie example using WebView:
<!DOCTYPE html> <html> <head> <link rel=\"stylesheet\" type=\"text/css\" href=\"http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css\"/> <script src=\"http://code.jquery.com/jquery-1.10.2.min.js\"></script> <script src=\"http://code.jquery.com/ui/1.10.2/jquery-ui.min.js\"></script> <meta name=\"viewport\" content=\"width=device-width, initial-scale=0.5\"> <style> body { background-color: #ccc; } .shadow { box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); font-size:20px; background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); border: solid #ccc 3px; text-align: center; text-shadow: 0 1px 2px #fff; padding:10px 60px; -moz-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); -webkit-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); margin-top: 5px; } </style> </head> <body> <div class=\"shadow\"> This is a test </div> <div class=\"shadow\"> This is a test </div> </body> </html>
ExampleWebViewActivity.java
package net.techiecommunity.androidwebviewexample; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.webkit.WebView; public class ExampleWebViewActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example_web_view); WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); String str = "<!DOCTYPE html>" + "<html>" + "<head>" + "<link rel=\"stylesheet\" type=\"text/css\" " + "href=\"http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css\"/>" + "<script src=\"http://code.jquery.com/jquery-1.10.2.min.js\"></script>" + "<script src=\"http://code.jquery.com/ui/1.10.2/jquery-ui.min.js\"></script>" + "<meta name=\"viewport\" content=\"width=device-width, initial-scale=0.5\">" + "<style>" + "body {" + " background-color: #eee;" + "}" + ".shadow {" + " box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5)," + " inset 0 1px 1px rgba(255,255,255,0.8);" + " background: -webkit-gradient(linear, left top, left bottom, " + " color-stop(0%,#f6e6b4), color-stop(100%,#ed9017));" + " font-size:20px;" + " background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);" + " border: solid #ccc 2px;" + " text-align: center;" + " text-shadow: 0 1px 2px #fff;" + " padding:10px 60px;" + " -moz-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5)," + " inset 0 1px 1px rgba(255,255,255,0.8);" + " -webkit-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5)," + " inset 0 1px 1px rgba(255,255,255,0.8); margin-top: 5px;" + "}" + "</style>" + "</head>" + "<body>" + "<div class=\"shadow\">" + "This is a test" + "</div>" + "<div class=\"shadow\">" + "This is a test" + "</div>" + "</body>" + "</html>"; webView.loadDataWithBaseURL("http://code.jquery.com/", str, "text/html", "utf-8", ""); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_example_web_view, menu); return true; } }
If interested in commenting related to Android WebView Example
Click Here

Name (To be shown on this Page:*

Email (Not to be shown):*

Website (To be shown on this Page)

Your Comments here (To be shown on this Page):*

(You can use <a> Tag in your comments)

Please enter same number as shown here 881

Name: GirishDated: 2013-12-18 00:14:02
Thanks a lot for these examples and code showing how to use WebView class in an Application on 
Android Platform.
    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 774




Android Thread Example

REST Interview Questions

JAX-WS Webservice Example

Android Overlap SurfaceView Example

Spring3 Integration of File Endpoint

JAXWS Webservice Example

Android WebView Example

Android Context Menu Example

Setting up Eclipse for Android App Development

Android SensorEvent Orientation Example

Android ImageSwitcher Example

REST API Design for Android App

Android ExpandableListView Example

Singleton Serializable on Android

Android GPS with Google MAP Example

Android Project With Example

Android Project Manageing Files

Project Ideas for App on Android Platform

Android EditText with Background

Android SQLite Database Example

Android AutoCompleteTextView Example

Android Tester

Android Interview Questions

Android ListView Example

Android Intent Notification Example

Android Intent Broadcast Example

Android TextView Link Example

Android Sensor List

Android Sensor Orientation Example

Android Intent Broadcast Receiver

Android Gallery SurfaceViews Example

Android Location Example

Android Text to Speech Example

Android Intent Example

Android Layout Example

Android Download File Example

Android Expandable ListView Example

Android Tab Example

Android RelativeLayout Example

Android Intent Example

Android Text to Speech Example

Android SQLite Example

Android CustomView Example

Android Canvas Example

Android SharedPreferences Example

Android Shape Background Example

Android ShapeButton Example

Android ViewFlipper Example

Android Gallery Example

Android TimePickerDialog Example





If interested commenting on this Page :

comments powered by Disqus
Any source code found on any of the page(s) in Techiecommunity.net is associated with following notice: 
   /*
     * TECHIECOMMUNITY.NET MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE SUITABILITY OF
     * THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
     * TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
     * PARTICULAR PURPOSE, OR NON-INFRINGEMENT. TECHIECOMMUNITY.NET SHALL NOT BE LIABLE FOR
     * ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, MODIFYING OR
     * DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
     *
     * THIS SOFTWARE IS NOT DESIGNED OR INTENDED FOR USE OR RESALE AS ON-LINE
     * CONTROL EQUIPMENT IN HAZARDOUS ENVIRONMENTS REQUIRING FAIL-SAFE
     * PERFORMANCE, SUCH AS IN THE OPERATION OF NUCLEAR FACILITIES, AIRCRAFT
     * NAVIGATION OR COMMUNICATION SYSTEMS, AIR TRAFFIC CONTROL, DIRECT LIFE
     * SUPPORT MACHINES, OR WEAPONS SYSTEMS, IN WHICH THE FAILURE OF THE
     * SOFTWARE COULD LEAD DIRECTLY TO DEATH, PERSONAL INJURY, OR SEVERE
     * PHYSICAL OR ENVIRONMENTAL DAMAGE ("HIGH RISK ACTIVITIES"). TECHIECOMMUNITY.NET
     * SPECIFICALLY DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY OF FITNESS FOR
     * HIGH RISK ACTIVITIES.
     */
   
The content provided in this page is NOT warranted and/or NOT guaranteed by techiecommunity.net .
techiecommunity.net is not liable for any negative consequences that may result/arise from 
implementing directly/indirectly any information covered in these pages/articles/tutorials.

For any of the content, if you would like to bring it to notice for removal from this web site, 
please write to this web site administrator @ EMAIL-ID (please remove space before and after @),
with appropriate concern and supporting proof(s). After thorough review and if found genuine concern,
we would take appropriate action and remove disputed content from this web site within 24 hours 
starting from the time it has brought to techiecommunity.net Administrator notice.

This website uses cookies and third party cookies to improve the user experience. 
And to provide more relevant ads. 
In case of continued use of this website implies that you accept the use of cookies on this website.
		
While using this web site, you agree to have read and accepted techiecommunity.net terms of use and privacy policy.