What is WebView class?
The WebView class is a subclass of “android.view” class that facilitates to fetch external URL running in web server and display it in device’s screen. It is specifically useful for displaying dynamic contents from the web server application. However, it will show only the contents, not the features of a fully html based web browser functionality.
In the WebView app, we implemented following steps to display the web content on device and also enabling the app to upload file to the web page contents:
- Verify the availability of device’s network connection
- Add progress bar logic for on click event of hyper-link in web page
- Add ability to upload file from local file storage on device through webview.
The only Requirement is…
External website URL should have UI contents compatible with the android device’s screen resolution.
Example of xml for activity
android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > android:id="@+id/webview1" android:layout_width="fill_parent" android:layout_height="fill_parent" />
Example of Main Activity class
1.MainClass.java
=======================
package com.webviewdemo;
import java.security.KeyManagementException;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import javax.net.ssl.HttpsURLConnection;
import javax.net.ssl.SSLContext;
import javax.net.ssl.TrustManager;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.ConnectivityManager;
import android.net.Uri;
import android.net.http.SslError;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.webkit.SslErrorHandler;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.Toast;
public class MainClass extends Activity {
WebView webview;
ProgressDialog progressBar;
ProgressBar progressBar1;
MainClass _activity;
AlertDialog alertDialog;
boolean loadingFinished = true;
boolean redirect = false;
private ValueCallback mUploadMessage;
private final static int FILECHOOSER_RESULTCODE = 1;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
progressBar = null;
this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
_activity = this;
setContentView(R.layout.main );
webview = (WebView) findViewById( R.id.webview1 );
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webview.setWebChromeClient(new WebChromeClient()
{
//The undocumented magic method override
//Eclipse will swear at you if you try to put @Override here
public void openFileChooser(ValueCallback uploadMsg) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
MainClass.this.startActivityForResult(Intent.createChooser(i,"File Chooser"), FILECHOOSER_RESULTCODE);
}
});
if(checkInternetConnection(_activity)==true){
if(savedInstanceState==null)
webview.loadUrl("https://www.andolasoft.com/");
else
webview.loadUrl("https://www.andolasoft.com/");
alertDialog = new AlertDialog.Builder(this).create();
progressBar = ProgressDialog.show(MainClass.this, "Please wait...", "Loading...");
webview.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String urlNewString) {
if (!loadingFinished) {
redirect = true;
}
loadingFinished = false;
webview.loadUrl(urlNewString);
return true;
}
public void onReceivedSslError (WebView view, SslErrorHandler handler, SslError error) {
handler.proceed() ;
}
@Override
public void onPageFinished(WebView view, String url) {
if(!redirect){
loadingFinished = true;
}
if(loadingFinished && !redirect){
//HIDE LOADING IT HAS FINISHED
if (progressBar != null && progressBar.isShowing()) {
progressBar.hide();
}
} else{
redirect = false;
}
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
loadingFinished = false;
progressBar.show();
}});
}
else{
AlertDialog.Builder builder = new AlertDialog.Builder(_activity);
builder.setMessage("Please check your network connection.")
.setCancelable(false)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
Intent intent = new Intent(Intent.ACTION_MAIN);
intent.addCategory(Intent.CATEGORY_HOME);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
finish();
}
});
AlertDialog alert = builder.create();
alert.show();
}
}
public static boolean checkInternetConnection(Activity _activity) {
ConnectivityManager conMgr = (ConnectivityManager) _activity.getSystemService(Context.CONNECTIVITY_SERVICE);
if (conMgr.getActiveNetworkInfo() != null
&& conMgr.getActiveNetworkInfo().isAvailable()
&& conMgr.getActiveNetworkInfo().isConnected())
return true;
else
return false;
}
@Override
protected void onActivityResult(int requestCode, int resultCode,
Intent intent) {
if (requestCode == FILECHOOSER_RESULTCODE) {
if (null == mUploadMessage)
return;
Uri result = intent == null || resultCode != RESULT_OK ? null
: intent.getData();
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK){
if(webview.canGoBack()){
webview.goBack();
return true;
}
}
return super.onKeyDown(keyCode, event);
}
}
Example of User’s permission mentioned in androidmanifest.xml
WebView is really helpful in creating quick Mobile UI without using complex Views/Layouts of Android. A HTML developer can easily build a web page with dynamic contents using CSS/HTML tags. Generally, we can run everything on WebView i.e., in android browser we can run jQuery, Flash enabled app while replicating the web based platform to mobile based smaller screen.
Benefits:
WebView are useful in following cases:
- Since the web contents are dynamically updated at server side, the android app will display the updated contents just by fetching from site through WebView.
- Web apps can be easily integrated to native application through WebView controls.
