How to create android app for your website


Do you have any plans or have you ever wondered of how to create an android application for your website? Look no further cause you’re at the right place.
In order to go ahead with this tutorial, you need to have android studio installed and java running on your pc.
Follow the below steps to get started.
1. Create an empty project using android studio.
2. Open your AndroidManifest.xml file located under the manifests directory. We want to add add the internet permissions now before we end up forgetting lol. Add the below code to your manifest file. It should be placed before the application tag.

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

3. Now let’s head straight to our activity_main.xml which is the layout file for our application. Place the below code into this file.

<?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"
    tools:context="com.techobbyist.mywebapp.MainActivity">

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

    <RelativeLayout
        android:id="@+id/loadingPan"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            />

    </RelativeLayout>

</RelativeLayout>

The webview loads the website content into the application and the progress bar is displayed on loading a page.

4. We now head straight to MainActivity.java where the brain of the application will be placed.
Declare the following variables in this class

private WebView webView;
private static final String URL = "http://www.techobbyist.com";

Change the URL here to the url of your website.

5. Place this code in the onCreate method of your class

webView = (WebView)findViewById(R.id.webView);
        this.registerReceiver(this.mConnReceiver,
                new IntentFilter(ConnectivityManager.CONNECTIVITY_ACTION));

Here, you initialize your webview and broadcast receiver which is going to check for active internet connection.

`

6. You will need to unregister your broadcast receiver when your application is closed. Therefore this code will come in handy.

@Override
    protected void onDestroy() {
        super.onDestroy();
        this.unregisterReceiver(this.mConnReceiver);
    }

7. We now write our Broadcast receiver class for handling the internet connection.

private BroadcastReceiver mConnReceiver = new BroadcastReceiver() {
        public void onReceive(Context context, Intent intent) {
            boolean noConnectivity = intent.getBooleanExtra(ConnectivityManager.EXTRA_NO_CONNECTIVITY, false);
            String reason = intent.getStringExtra(ConnectivityManager.EXTRA_REASON);
            boolean isFailover = intent.getBooleanExtra(ConnectivityManager.EXTRA_IS_FAILOVER, false);

            NetworkInfo currentNetworkInfo = (NetworkInfo) intent.getParcelableExtra(ConnectivityManager.EXTRA_NETWORK_INFO);
            NetworkInfo otherNetworkInfo = (NetworkInfo) intent.getParcelableExtra(ConnectivityManager.EXTRA_OTHER_NETWORK_INFO);

            if(currentNetworkInfo.isConnected()){
                loadPage(URL); //load website when there is internet connection
            }else {
                loadPage("file:///android_asset/noconnection.html"); /*load html page when there is no internet connection*/
            }
        }
    };

When there is no internet connection a default webpage will be loaded to show users that you do not have an active connection. You need to create this default webpage which will be located in your assets folder under your main folder code.
noconnection

Lets now create our default html page and save it as noconnection.html.Write the following code in this file.

<head>
<title>Techobbyist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>			       
	<h3>Please check your internet connection</h3>
</body>
</html>

8. Finally we add our loadPage method for loading the page into the webview

private void loadPage(String url){
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(url);
        webView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                findViewById(R.id.loadingPan).setVisibility(View.VISIBLE);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                findViewById(R.id.loadingPan).setVisibility(View.GONE);
            }
        });
    }

Final code in MainActivity.java

package com.techobbyist.mywebapp;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.graphics.Bitmap;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private static final String URL = "http://www.techobbyist.com";

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

        webView = (WebView)findViewById(R.id.webView);
        this.registerReceiver(this.mConnReceiver,
                new IntentFilter(ConnectivityManager.CONNECTIVITY_ACTION));
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        this.unregisterReceiver(this.mConnReceiver);
    }

    private BroadcastReceiver mConnReceiver = new BroadcastReceiver() {
        public void onReceive(Context context, Intent intent) {
            boolean noConnectivity = intent.getBooleanExtra(ConnectivityManager.EXTRA_NO_CONNECTIVITY, false);
            String reason = intent.getStringExtra(ConnectivityManager.EXTRA_REASON);
            boolean isFailover = intent.getBooleanExtra(ConnectivityManager.EXTRA_IS_FAILOVER, false);

            NetworkInfo currentNetworkInfo = (NetworkInfo) intent.getParcelableExtra(ConnectivityManager.EXTRA_NETWORK_INFO);
            NetworkInfo otherNetworkInfo = (NetworkInfo) intent.getParcelableExtra(ConnectivityManager.EXTRA_OTHER_NETWORK_INFO);

            if(currentNetworkInfo.isConnected()){
                loadPage(URL);
            }else {
                loadPage("file:///android_asset/noconnection.html");
            }
        }
    };

    private void loadPage(String url){
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(url);
        webView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                findViewById(R.id.loadingPan).setVisibility(View.VISIBLE);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                findViewById(R.id.loadingPan).setVisibility(View.GONE);
            }
        });
    }
}