Converting Website into Android App using WebView

Larn Tech | April 19, 2018 | Android | No Comments

Hi, Another tutorial here about Converting Website into Android App using WebView, a webview is a view which displays webpages converting web in to application. With webview you can load remote url using loadUrl() method or even load dynamic html using loadData() method. To work with webview we need to add INTERNET permission in our application.

Contents

1 Introduction to webview
2 Creating new Android Studio Project
3 Adding webview in our activity_main
4 Configuring Webview
5 Adding INTERNET permission
6 Share this:
7 Related

Introduction to webview

To load remote website we use loadUrl() method which requires url of the website as shown below.



webView.loadUrl(url);

webView.loadUrl(url);

To load dynamic html we use loadData method which require String name, String mimeType, String encoding.



webView.loadData(sHtml, "text/html", "UTF-8");

webView.loadData(sHtml, "text/html", "UTF-8");

We need to enable canGoBack() and canGoForward method for use to be able to go back and forward.



Boolean canGoForward = webView.canGoForward();
Boolean canGoBack = webView.canGoBack();

Boolean canGoForward = webView.canGoForward();

Boolean canGoBack = webView.canGoBack();

We also need to set webViewClient in our webView which monitor the activity of webview.



        //SetWebViewClient
        webView.setWebViewClient(new myWebViewClient());

//SetWebViewClient

webView.setWebViewClient(new myWebViewClient());

Lets now get start developing our application.

Creating new Android Studio Project

Open your android studio click File => New Project and give it a name you can call it WebView Tutorial .

Click next and select Empty activity and then finish.

Adding webview in our activity_main

Open your activity_main and add two button.

One button will loadwebsite when clicked.

The other button will load dynamic html when clicked

Also add webview which will load our website when the buttons are clicked.

copy and paste the code below in your activity_main.



<!--?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" tools:context="com.example.larntech.webviewtutorial.MainActivity">
<Relativelayout android:id="@+id/switcher" android:layout_margin="5dp" android:layout_width="match_parent" android:layout_height="wrap_content">
    <Button android:id="@+id/loadwebsite" android:layout_width="wrap_content"
android:text="Load Website" 
android:textsize="20dp"
android:padding="10dp" 
android:background="@color/colorPrimary" 
android:textallcaps="false"
android:textcolor="#fff"
android:textstyle="bold" 
android:layout_height="wrap_content">

</Button></Relativelayout>
<Button android:id="@+id/loadhtml"
android:layout_width="160dp" 
android:layout_height="wrap_content" android:layout_alignparentend="true" android:layout_alignparenttop="true" 
android:text="Load HTML" 
android:padding="10dp"
android:background="@color/colorPrimary"
android:textallcaps="false"
android:textcolor="#fff"
android:textstyle="bold"
android:textsize="20dp">
   
<Webview
android:layout_below="@+id/switcher" android:layout_width="match_parent" android:layout_height="match_parent" 
android:id="@+id/webview"></webview>

</button>
</Relativelayout>

<Button android:id="@+id/loadwebsite" android:layout_width="wrap_content"

android:text="Load Website"

android:textsize="20dp"

android:padding="10dp"

android:background="@color/colorPrimary"

android:textallcaps="false"

android:textcolor="#fff"

android:textstyle="bold"

android:layout_height="wrap_content">

</Button></Relativelayout>

<Button android:id="@+id/loadhtml"

android:layout_width="160dp"

android:layout_height="wrap_content" android:layout_alignparentend="true" android:layout_alignparenttop="true"

android:text="Load HTML"

android:padding="10dp"

android:background="@color/colorPrimary"

android:textallcaps="false"

android:textcolor="#fff"

android:textstyle="bold"

android:textsize="20dp">

<Webview

android:layout_below="@+id/switcher" android:layout_width="match_parent" android:layout_height="match_parent"

android:id="@+id/webview"></webview>

</button>

</Relativelayout>

Configuring Webview

To configure webview open your MainActivity class.

In this class we are going to setWebViewClient.

set canGoBack to enable user to get to the previous page when back button is pressed.

Create a custom HTML to be loaded when load html button is clicked.

Copy and paste the code below to your MainActivity class.



package com.example.larntech.webviewtutorial;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
Button loadWebsite,loadHtml;
WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //finding view
        loadWebsite = (Button) findViewById(R.id.loadwebsite);
        loadHtml = (Button) findViewById(R.id.loadhtml);
        webView = (WebView) findViewById(R.id.webview);

        // Website URL
        final String url = "https://larntech.com";

        // static html
        final String sHtml = "<title>larntech tutorials</title>" +
                "
Welcome to larntech this where you get to larn simplified tutorial, The tutorial you are reading is about converting website into mobile app using webview
" +
                "";

        //setting javascript enabled
        webView.getSettings().setJavaScriptEnabled(true);

        //Enable can go forward
        Boolean canGoForward = webView.canGoForward();
        webView.canGoBack();

        //Enable can go Back
        if(webView.canGoBack()) {
            webView.goBack();
        }
        //SetWebViewClient
        webView.setWebViewClient(new myWebViewClient());
        //load website button when clicked
        loadWebsite.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webView.loadUrl(url);
            }
        });

        //load html button when clicked
        loadHtml.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webView.loadData(sHtml, "text/html", "UTF-8");
            }
        });


    }

    private class myWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
           view.loadUrl(url);
           return true;
        }
    }
    @Override public void onBackPressed() {

        if(webView != null &amp;&amp; webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

package com.example.larntech.webviewtutorial;

import android.app.Activity;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.webkit.WebChromeClient;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.Button;

public class MainActivity extends AppCompatActivity {

Button loadWebsite,loadHtml;

WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//finding view

loadWebsite = (Button) findViewById(R.id.loadwebsite);

loadHtml = (Button) findViewById(R.id.loadhtml);

webView = (WebView) findViewById(R.id.webview);

// Website URL

final String url = "https://larntech.com";

// static html

final String sHtml = "<title>larntech tutorials</title>" +

Welcome to larntech this where you get to larn simplified tutorial, The tutorial you are reading is about converting website into mobile app using webview

" +

"";

//setting javascript enabled

webView.getSettings().setJavaScriptEnabled(true);

//Enable can go forward

Boolean canGoForward = webView.canGoForward();

webView.canGoBack();

//Enable can go Back

if(webView.canGoBack()) {

webView.goBack();

}

//SetWebViewClient

webView.setWebViewClient(new myWebViewClient());

//load website button when clicked

loadWebsite.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

webView.loadUrl(url);

}

});

//load html button when clicked

loadHtml.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

webView.loadData(sHtml, "text/html", "UTF-8");

}

});

}

private class myWebViewClient extends WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

@Override public void onBackPressed() {

if(webView != null && webView.canGoBack()) {

webView.goBack();

} else {

super.onBackPressed();

}

Adding INTERNET permission

Finally we need to add internet permission.

Open Mainifest file and add the following permission.



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

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

</uses-permission>

Now run your application and you will see output working as shown below.

Converting Website into Android App using WebView

That all if you a question or need help please comment below.

Post Views: 762

Tags:Android Convert Web To android App, Android Webview

LarnTech

Converting Website into Android App using WebView

Introduction to webview

Creating new Android Studio Project

Adding webview in our activity_main

Configuring Webview

Adding INTERNET permission

Related

About The Author

Larntech

Introduction to webview

Creating new Android Studio Project

Adding webview in our activity_main

Configuring Webview

Adding INTERNET permission

Share this:

Related

Related Posts

About The Author

Larntech