Saturday, 30 May 2015

Webview android example

Posted by devraj chavda on 07:54 web browser , webview No comments

Hello friends,in this example we learn how to write program for webview to load offline page which is store into ...asset/ folder. and also see how to load online website on button click. may be its very easy and simple way for you.

CREATE NEW ANDROID PROJECT

Step 1: Write code into activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#EDEDED"
android:gravity="bottom"
android:orientation="vertical"
tools:context=".WebPrintActivity" >

<WebView
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp" />

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >

<ImageButton
android:id="@+id/Imagebutton4"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@null"
android:src="@drawable/google" />

<ImageButton
android:id="@+id/Imagebutton3"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@null"
android:src="@drawable/playstore" />

<ImageButton
android:id="@+id/Imagebutton1"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@null"
android:src="@drawable/blog" />

<ImageButton
android:id="@+id/ImageButton2"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@null"
android:src="@drawable/facebook" />

<ImageButton
android:id="@+id/imageButton5"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@null"
android:src="@drawable/youtube" />
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/linearLayout1"
android:layout_alignParentRight="true"
android:layout_marginBottom="1dp"
android:orientation="horizontal" >

<ImageButton
android:id="@+id/imageButtonbackward"
android:layout_width="22dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@null"
android:src="@drawable/backward" />

<ImageButton
android:id="@+id/imageButforward"
android:layout_width="22dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="@null"
android:src="@drawable/forward" />

<ImageButton
android:id="@+id/buttonreload"
android:layout_width="22dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="@null"
android:src="@drawable/reload" />
</LinearLayout>

</RelativeLayout>

NOTE:Put image file into drawable with named above at android:src=" "

Step 2: Write code into MainActivity.java

package dev.androidapplink.webviewapp;
import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends Activity {

// private Button button;
private WebView webView;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webView = (WebView) findViewById(R.id.webView1);

webView.loadUrl("file:///android_asset/help.html");

ImageButton butone1 = (ImageButton) findViewById(R.id.Imagebutton1);

butone1.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
startWebView("https://www.google.co.in/");
}
});

ImageButton butone2 = (ImageButton) findViewById(R.id.ImageButton2);

webView = (WebView) findViewById(R.id.webView1);
butone2.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
startWebView("https://www.facebook.com/");
}
});

ImageButton butone3 = (ImageButton) findViewById(R.id.Imagebutton3);

webView = (WebView) findViewById(R.id.webView1);
butone3.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
startWebView("https://www.twitter.com/‎");
}
});
ImageButton butone4 = (ImageButton) findViewById(R.id.Imagebutton4);

webView = (WebView) findViewById(R.id.webView1);
butone4.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
startWebView("https://play.google.com/store?hl=en");
}
});
ImageButton butone5 = (ImageButton) findViewById(R.id.imageButton5);

webView = (WebView) findViewById(R.id.webView1);
butone5.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
startWebView("https://www.youtube.com/");
}
});

ImageButton butreload = (ImageButton) findViewById(R.id.buttonreload);

webView = (WebView) findViewById(R.id.webView1);
butreload.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "ReLoading...",
Toast.LENGTH_LONG).show();
webView.reload();
}
});
ImageButton butforwrd = (ImageButton) findViewById(R.id.imageButforward);

webView = (WebView) findViewById(R.id.webView1);
butforwrd.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Forward...",
Toast.LENGTH_SHORT).show();
if (webView.canGoForward()) {
webView.goForward();
} else {
Toast.makeText(getApplicationContext(), "Finish",
Toast.LENGTH_SHORT).show();
}
}
});

ImageButton butbackforwrd = (ImageButton) findViewById(R.id.imageButtonbackward);

webView = (WebView) findViewById(R.id.webView1);
butbackforwrd.setOnClickListener(new ImageButton.OnClickListener() {

@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Backward...",
Toast.LENGTH_SHORT).show();
if (webView.canGoBack()) {
webView.goBack();

} else {

Toast.makeText(getApplicationContext(), "Finish",
Toast.LENGTH_SHORT).show();
}
}
});

}

private void startWebView(String url) {

webView.setWebViewClient(new WebViewClient() {
ProgressDialog progressDialog;

// If you will not use this method url links are opeen in new brower
// not in webview
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}

// Show loader on url load
public void onLoadResource(WebView view, String url) {
if (progressDialog == null) {
// in standard case YourActivity.this
progressDialog = new ProgressDialog(MainActivity.this);
progressDialog.setMessage("Loading...");
progressDialog.show();
}
}

public void onPageFinished(WebView view, String url) {
try {
if (progressDialog.isShowing()) {
progressDialog.dismiss();
progressDialog = null;
}
} catch (Exception exception) {
exception.printStackTrace();
}
}

});

// Javascript inabled on webview
webView.getSettings().setJavaScriptEnabled(true);

// Other webview options

webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings()
.setUserAgentString(
"Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0"); // agent
webView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_INSET);
webView.setScrollbarFadingEnabled(false);
// other
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setSaveFormData(true);
webView.getSettings().setAllowFileAccess(true);
// webView.getSettings().setSupportMultipleWindows(true);
// webView.setWebViewClient(new WebViewClient());
webView.setClickable(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.setWebChromeClient(new WebChromeClient());

// Load url in webview
webView.loadUrl(url);
/*
* if (Build.VERSION.SDK_INT >= 16) {
* webView.getSettings().setAllowFileAccessFromFileURLs(true);
* webView.getSettings().setAllowUniversalAccessFromFileURLs(true); }
*
* if (Build.VERSION.SDK_INT >= 11) {
* webView.getSettings().setAllowContentAccess(true); }
*/
}

@Override
// Detect when the back button is pressed
public void onBackPressed() {
if (webView.canGoBack()) {
webView.goBack();
Toast.makeText(getApplicationContext(), "Backward",
Toast.LENGTH_SHORT).show();
} else {
// Let the system handle the back button
super.onBackPressed();
Toast.makeText(getApplicationContext(), "CLOSED!",
Toast.LENGTH_SHORT).show();
}
}
}

Step 3: Now Write HTML code into NOTEPAD and save it having name is "help.html"

<!DOCTYPE html>
<html>
<head>
<style>
from tg.i18n import ugettext as _

class RootController(BaseController):
@expose('myproj.templates.index')
def index(self):
body {background-color=#fff}
h1 {color:green}
h2 {color:green}
p {color:black}
p3 {color:green}
.myButton {
-moz-box-shadow: 0px 10px 14px -7px #3e7327;
-webkit-box-shadow: 0px 10px 14px -7px #3e7327;
box-shadow: 0px 10px 14px -7px #3e7327;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
background-color:#77b55a;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #4b8f29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
text-shadow:0px 1px 0px #5b8a3c;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
background-color:#72b352;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
</head>
<body>
<h1 align="center">Welcome to</h1>
<h2 align="center">Androidapplink</h2>
<p align="center">Thank you for connected with us.</p>
<p align="center">NOTE:Double tap to zoom control</p>
<p align="center">
<a class="myButton" href="http://androidapplink.blogspot.in/">Blog</a>
</p>
<p align="center">
<a class="myButton" href="https://www.facebook.com/sharer/sharer.php?u=http://androidapplink.blogspot.in/">Share on Facebook</a>
</p>
<p align="center">
<a class="myButton" href="https://plus.google.com/share?url=http://androidapplink.blogspot.in/">Share on Google+</a>
</p>
<p id="demo" align="center"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
</script>
<p align="center">Copy app link:-<br>http://androidapplink.blogspot.in/<br><br><br>Thank you for your kind Support<br></p>
</body>

</html>

Step 4: Give permission in AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

NOTE: YouTube is not supported,still finding solution.

Step 5: Now run Your Project and see Output: