Converting Website into Android App using WebView
|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.
- To load remote website we use loadUrl() method which requires url of the website as shown below.
Contents
Introduction to webview
1 2 3 4 5 |
webView.loadUrl(url); |
1 2 3 4 5 |
webView.loadData(sHtml, "text/html", "UTF-8"); |
1 2 3 4 5 6 |
Boolean canGoForward = webView.canGoForward(); Boolean canGoBack = webView.canGoBack(); |
1 2 3 4 5 6 |
//SetWebViewClient webView.setWebViewClient(new myWebViewClient()); |
Creating new Android Studio Project
Adding webview in our activity_main
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!--?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> |
Configuring Webview
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
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
1 2 3 4 5 |
<uses-permission android:name="android.permission.INTERNET"> </uses-permission> |