Monday, 1 February 2016

Android - Web View Example


In this post we will learn how to use Web View  in android . Basically a webview in android means simply loading  a webpage through our android app , however it uses the default browser to load the url we requested.

If we use only web view  , the url we requested will load directly from the default web browser i.e  web browser opens up and loads the page , this is the same as opening our browser and browsing.

If we use Web Client , the url we requested will load in the app itself , unlike the earlier case it does not open the browser externally as a separate app instead the browser loads the url in app itself.


The layout consists of one button and webview , so when the button is clicked the url is loaded in the webview.


Layout file code is shown below ,



Get the .apk file    Application on Github

Layout ( activity_main.xml) :

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button android:id="@+id/loadUrl"
    android:layout_width="fill_parent"
    android:layout_height="20pt"
    android:text="Load Url" />


    <WebView android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"></WebView>

</LinearLayout>

Here is the java part , we initialized the button and the webview in onCreate() method , and when the button is clicked we set the WebVewClient , so the requested url is loaded in the app itself rather than opening it separately in a browser.
wv.setWebViewClient(new myWebViewClient());


The MainActivity file code is shown below ,


Java Code (Main Activity.java) :

package mycodingcorner.webviewexample;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

import static android.view.View.OnClickListener;


public class MainActivity extends Activity {
    public WebView wv;
    public String url;

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wv = (WebView) findViewById(R.id.webview);
        url = "http://www.mycodingcorner.tk/2016/02/android-web-view-example.html";
        Button load_url = (Button) findViewById(R.id.loadUrl);
        load_url.setOnClickListener(new OnClickListener() {
            @Override public void onClick(View view) {
                wv.setWebViewClient(new myWebViewClient());
                wv.getSettings().setJavaScriptEnabled(true);
                wv.getSettings().setLoadsImagesAutomatically(true);
                wv.getSettings().setJavaScriptEnabled(true);
                wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
                wv.loadUrl(url);
            }
        });


    }

    public class myWebViewClient extends WebViewClient {
        @Override public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // TODO Auto-generated method stubsuper.onPageStarted(view, url, favicon);
        }

        @Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // TODO Auto-generated method stub
view.loadUrl(url);
            return true;

        }
    }


}

Get the .apk file    Application on Github

Here in manifest file ,we have to INTERNET permission as the app loads the contents of the url from the internet.
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Manifest file (AndroidManifest.xml): 

<?xml version="1.0" encoding="utf-8"?><manifest 
xmlns:android="http://schemas.android.com/apk/res/android"package="mycodingcorner.webviewexample">

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <application android:allowBackup="true"android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
Get the .apk file    Complete Project on Github

OUTPUT :

Android - WebView Example
Android - WebView Example