Home » Android

Create Webview inside Android Application

In this article, we are going to learn about WebView and how to use it for creating a window to view your website?
Submitted by Manu Jemini, on February 16, 2018

In the example, below we are going to use the WebView and WebViewClient class to create a window to open any website or web page in your app.

To implement this in your program you will need to import: android.webkit.WebView, android.webkit.WebViewClient in your java file.

Then create two layout files first with a single ImageView and Button:

<ImageView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/image"
	android:layout_centerHorizontal="true"
	android:src="@drawable/includehelp"/>

<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Click to save text"
	android:id="@+id/button"
	android:layout_below="@+id/editText"
	android:onClick="share" />

And Second, layout with a webView like this:

<WebView
	android:layout_width="match_parent"
	android:layout_height="400dp"
	android:id="@+id/webView"
	android:layout_gravity="center_horizontal"
	android:layout_weight="1.03" />

In the Button above we have put an onClick property and set it to share function which is in the java File. We assign on click function directly like this : android:onClick="share".

First, we will take the reference of the webView from the layout file and set it to a local variable.

Then when ever user clicks the button, we enabled the javascript by passing true. After that we create a new WebViewClient and set it to the WebView. Then, we load the url with the webView like this:

        W = (WebView) findViewById(R.id.webView);
        W.getSettings().setJavaScriptEnabled(true);
        W.setWebViewClient(new WebViewClient());
        String url="http://www.includehelp.com";
        W.loadUrl(url);

1) Java file 1:

package com.example.hp.myapplication;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity
{
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

	}
	public void webview(View v) {
		Intent in=new Intent(MainActivity.this,Main2Activity.class);
		startActivity(in);
	}
}

2) Java file 2:

package com.example.hp.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class Main2Activity extends AppCompatActivity {
	WebView W;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main2);
		W = (WebView) findViewById(R.id.webView);
		W.getSettings().setJavaScriptEnabled(true);
		W.setWebViewClient(new WebViewClient());
		String url="http://www.includehelp.com";
		W.loadUrl(url);
	}
}

3) XML file 1:

<?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="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hp.myapplication.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image"
        android:src="@drawable/includehelp"
        android:layout_centerHorizontal="true"
        android:theme="@style/Base.TextAppearance.AppCompat" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click here to go to second page"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:onClick="webview"/>

</RelativeLayout>

4) XML file 2:

<?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="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hp.myapplication.Main2Activity">


    <WebView
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:id="@+id/webView"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1.03" />
</RelativeLayout>

5) Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.hp.myapplication">
<uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Output