Example of Webview Layouts and How to use in Android

Example of Webview Layouts and How to use in Android

clip_image002-176x300

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:

  1. Verify the availability of device’s network connection
  2. Add progress bar logic for on click event of hyper-link in web page
  3. 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

[sourcecode]
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"
/>

[/sourcecode]

Example of Main Activity class

[sourcecode]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("http://www.andolasoft.com/");
else
webview.loadUrl("http://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);
}
}
[/sourcecode]

Example of User’s permission mentioned in androidmanifest.xml

[sourcecode]

[/sourcecode]

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.
Tags:
Jay
Jayadev Das
jayadev.das@andolasoft.com

Do what you do best in – that’s what I’ve always believed in and that’s what I preach. Over the past 25+ years (yup that’s my expertise ‘n’ experience in the Information Technology domain), I’ve been consulting to small, medium and large companies ‘bout Web Technologies, Mobile Future as well as on the good-and-bad of tech. Blogger, International Business Advisor, Web Technology Expert, Sales Guru, Startup Mentor, Insurance Sales Portal Expert & a Tennis Player. And top of all – a complete family man!

Shares