Android Webview Example

Webview is an android widget in which you can load web pages inside your application. You can either load webview with a url which is already having some html content or you can create a html content inside your android code and after that it can be loaded into webview. In this tutorial we will learn how to implement a webview in android.

Contents

  • Layout  code for webview
  • How to load web url in a webview
  • Add permissions
  • How to load html string in webview
  • How to enable java script in webview
  • Implement a sample project using webview

Layout code for webview

The first step of implementing a webview in your application is to have a webview widget in your layout file. For displaying a webview widget in your application you just need to add the following code inside your layout file.

<WebView
    android:id="@+id/wv_codesfor"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

How to load web url in a webview

Once the layout is added we need to do some coding to load the web page. First step is initialize the webview in your java file and then use the following code to load the webview in your acitivty

wv_codesfor.loadUrl("http://www.codesfor.in/");

If your file needs any input for loading data you can just pass it with the above url as get parameters.

Add permissions

For loading a webview in android application you just need to have internet permission only, The following permission is to be added in your AndroidManifest.xml as the child of manifest tag.

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

How to load html string in webview

So now we know how to load a web url in android webview . But what if we do not have our content in a web page and we just have its html code. All we need to do is create a string with the entire html code and load it in the webview as shown below.

String html_string="<html><h1>This is a text webview</h1></html>";
wv_codesfor.loadData(html_string,"text/html", "UTF-8");

The above code will load the html content coded inside the string. Here in the above example it is just a simple html tag with one heading tag which will print a small heading.

How to enable javascript in webview

Now we have seen how to load a web url as well as html content directly in a webview. But if there is any javascript content inside the webview for example suppose if there is a graph or something which requires javascript to load ,it will not load automatically without enabling the javascript. In this step we will learn how to enable javascript in webview. All you need to do is to place the following code before loading the url or html content

wv_codesfor.getSettings().setJavaScriptEnabled(true);

Implement a sample project using webview

Now let us see an example of how to use webview in an android application. Let us start by creating a project in android studio

Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Add the webview widget to the layout file

After creating the project in android studio the following file might have automatically created if you have set the defaults. All you need to do is just add the webview widget into the layout file as follows.

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.codesfor.web.MainActivity"
    tools:showIn="@layout/activity_main">

    <WebView
        android:id="@+id/wv_codesfor"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Implementing the java code for loading webview

For using this webview you need to get the reference of webview in your java file . Here is the code for MainActivity .java which contains reference to webview and it also shows how to load url in a webview.

MainActivity.java


package com.codesfor.web;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    WebView wv_codesfor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //method for initialisation
        init();

        wv_codesfor.getSettings().setLoadsImagesAutomatically(true);
        wv_codesfor.getSettings().setJavaScriptEnabled(true);
        wv_codesfor.setWebViewClient(new WebViewClient());
        
        
        //loading url to webview

        wv_codesfor.loadUrl("http://www.codesfor.in/");

    }

    private void init() {

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        wv_codesfor = (WebView) findViewById(R.id.wv_codesfor);

    }

   
}

 

Expected output

android_webivew_tutorial
android_webivew_tutorial

 

Now let us see a how to load pdf inside a WebView in android. You need to enable the  javascript enabled first as mentioned on previous steps . Now simply use the following code for loading pdf in a WebView

yourwebview.loadUrl("http://drive.google.com/viewerng/viewer?embedded=true&url=" + your pdf url);

 

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

13 Comments

  1. denden October 25, 2016 Reply
    • rameesAuthor October 25, 2016 Reply
  2. denden October 25, 2016 Reply
    • rameesAuthor October 25, 2016 Reply
  3. denden October 25, 2016 Reply
  4. denden October 25, 2016 Reply
    • rameesAuthor October 25, 2016 Reply
  5. denden October 24, 2016 Reply
    • rameesAuthor October 25, 2016 Reply
  6. denden October 24, 2016 Reply
    • denden October 24, 2016 Reply
      • rameesAuthor October 24, 2016 Reply
        • denden October 25, 2016 Reply

Add a Comment

Your email address will not be published. Required fields are marked *