How to Create a Simple Android App From Your Website

This article will guide you on how to create an android app that is based on your website.

Let’s say that you have created the perfect website and now you want to create an app. You don’t want to start from scratch and recreate the UI and functionality. Wouldn’t it be great if you could base the app on your website so updates on the website also affect the app? Lucky for us there is a simple solution in Android based on the WebView component.

The WebView is basically a lightweight browser that we have full control over. For example, you can take over URL navigation and also implement your own JavaScript methods that can be called by the website. The later is useful to create an interface between the app and the website.

Photo by Mika Baumeister on Unsplash

Getting started

First off you need to create a android project and add the WebView component to your layout. If you only want the app to use the WebView, you can add it to the main activity.

To be able to connect to your website the app need internet access so add the following permission to your Manifest file.

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

Now we can start configure the WebView. I will expect you to have added the WebView to your main activity.

public class MainActivity extends AppCompatActivity {

    WebView myWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Context context = getApplicationContext();

        myWebView = (WebView) findViewById(R.id.webview);
        myWebView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");
        myWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //Users will be notified in case there's an error (i.e. no internet connection)
                Toast.makeText(context, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });
        myWebView.loadUrl("https://example.com");
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}
        myWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //Users will be notified in case there's an error (i.e. no internet connection)
                Toast.makeText(context, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });        myWebView.loadUrl("https://medical.rowland.io");
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}
myWebView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");

This adds a custom JavaScript interface that the webpage can call like below.

AndroidInterface.someMethod(args);

The WebAppInterface class specify all methods available in our interface

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void setUserId(String userId) {
        DataStore.getInstance().userId = userId;
    }
}

For example here I have specified a method setUserId that can be called by the site when we have the userId. This can then be stored in a singelton class for later use in the app. This binds together app specific functions with the website.

myWebView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //Users will be notified in case there's an error (i.e. no internet connection)
                Toast.makeText(context, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
});

The above creates a WebViewClient that is needed to actually run our website.

myWebView.loadUrl("https://example.com");

This loads the start page in the app. So change this with your url. And please use https there is workarounds for http but I don’t recommend that.

Next if the site needs to run any JavaScript you need to add these rows to enable it.

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

We are almost done now. What’s left is to implement the go back functionality in the app. Add the following code in your MainActivity class.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

Basically all this does is to listen for the Back key and then send a goBack navigation to the website.

Now you should have a functional app that will show your website. So now you can start implement app specific functionality with help of the JavaScript interface.