Easiest Way To Encapsulate A Html5 Webpage Into An Android App?

We have developed a large web-based, responsive HTML5 data visualization that works nicely on PCs as well as on mobile devices. There's one thing though that is a bit annoying (on

Solution 1:

How to start a basic project that loads a simple HTML page.

If you create a new project choice for Empty Activity

First you will need to define your layout. You need to add a Webview layout to your Activity_main.xml

Activity_main.xml is located under res -> layout

This your Webview layout:

<WebView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/webView"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

The parent layout-tag needs to be <RelativeLayout

The second thing you need to do is to define what permissions you need you can do this in the AndroidManifest.xml

AndroidMainfest.xml is located under manifest

You need to add this permission:

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

If you forgot these permission it will give you an error because he can't find the webpage even its a local file this permission is needed.

One problem with webview is that if you rotate your phone your activity will be restarted. That is not user-friendly so will lock the view to portrait. So what we need to do is this:

<activityandroid:name=".MainActivity"android:configChanges="orientation"android:screenOrientation="portrait">

So your AndroidManifest will look something like this:

<?xml version="1.0" encoding="utf-8"?><manifestxmlns:android="http://schemas.android.com/apk/res/android"package="YOUR_PACKAGE_NAME"><uses-permissionandroid:name="android.permission.INTERNET"/><applicationandroid:allowBackup="false"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/AppTheme"><activityandroid:name=".MainActivity"android:configChanges="orientation"android:screenOrientation="portrait"><intent-filter><actionandroid:name="android.intent.action.MAIN" /><categoryandroid:name="android.intent.category.LAUNCHER" /></intent-filter><intent-filter><actionandroid:name="android.intent.action.VIEW" /><categoryandroid:name="android.intent.category.DEFAULT" /><categoryandroid:name="android.intent.category.BROWSABLE" /><!-- ATTENTION: This data URL was auto-generated. We recommend that you use the HTTP scheme.
              TODO: Change the host or pathPrefix as necessary. --><dataandroid:host="[ENTER-YOUR-HTTP-HOST-HERE]"android:pathPrefix="/main"android:scheme="http" /></intent-filter></activity><meta-dataandroid:name="com.google.android.gms.version"android:value="@integer/google_play_services_version" /></application>

Now will add the java code to the MainActivity to load the webpage we want:

MainActivity.java is located under java -> [YOUR_PACKAGE_NAME]

The first line we will define our class:

publicclassMainActivityextendsActivity

There in will we write some functions, the first function is to create the webview.

We declare a private var Webview. To write less code.

privateWebView view;

@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = (WebView) this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setAllowFileAccess(true);
        view.getSettings().setDomStorageEnabled(true);
        view.setWebViewClient(newMyBrowser() {});
        view.loadUrl("HERE_YOUR_LINK");
        view.setWebChromeClient(newWebChromeClient() {});
}

If you want to load a local file the link will be something like this:

    view.loadUrl("file:///android_asset/www/index.html");

If you want to load a website like google it will be:

    view.loadUrl("https://www.google.com/");

Later on I will say where you need to locate your local HTML files that you want to load.

If you have something on your site like a link mailto:. It think you would like if people click on that it will open the Gmail app or an other email app. You can do that by creating a OverrideUrlLoading methode.

privateclassMyBrowserextendsWebViewClient {
       @OverridepublicbooleanshouldOverrideUrlLoading(WebView view, String url){
               if (url.startsWith("tel:") || url.startsWith("sms:") || url.startsWith("smsto:") || url.startsWith("mailto:") || url.startsWith("mms:") || url.startsWith("mmsto:") || url.startsWith("market:") || url.startsWith("https://youtu")){
                Intentintent=newIntent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);
                returntrue;
            } else {
                view.loadUrl(url);
                returntrue;
            }
     }
}

Like you can say I have also add url.startsWith("https://youtu"). I have personally because I find it user-friendly that you link to a Youtube video it will open in the Youtube app because people can then view it in full screen.

The only function we need is what do to if people click back on their phone.

public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) {
            view.goBack(); //method goback()returntrue;
        }
        return super.onKeyDown(keyCode, event);
    }

You need to add those lines to your build.gradle:

compile'com.android.support:appcompat-v7:25.3.1'compile'com.android.support.constraint:constraint-layout:1.0.2'compile'com.google.gms:google-services:3.1.0'

So it will look something like this:

//here is so more code in the file
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile'com.android.support:appcompat-v7:25.3.1'compile'com.android.support.constraint:constraint-layout:1.0.2'compile'com.google.gms:google-services:3.1.0'
    testCompile 'junit:junit:4.12'
}

apply plugin: 'com.google.gms.google-services'

If you want to load local files instead of a website that is also possible. But where do I need to place them?

You need to create a map called assets.

Where will that map be located. Go to your file-explore on your PC navigate to this:

YOUR_PACKAGE_NAME -> app -> src -> main

In that folder you will create a map assets and there in a map www there in you will paste your files

If you have any questions please respond

Solution 2:

I suggest you to check some existing webview based framework, for instance:

Adobe Phonegap

It will help you to generate an app that is compatible with different devices and platforms (including iOS). You can easily find documentation online, e.g., to make it fullscreen.