Convert HTML Template Into Android App – Android Studio

By Faruque Ahamed Mollick

I have already discussed about PhoneGap software which can be used to convert any JavaScript, CSS and HTML template into a native android app. Now in this article I am going to tell you how the same can be done using Android Studio with custom coding. Believe me, it is really so easy to transform your JavaScript – HTML app into a native android app from Android Studio. Just follow the steps that I am going to discuss.

Convert JavaScript, HTML template into native android app using Android Studio

So how to convert JavaScript app into android app. Here I am going to discuss.



Can you remember that android WebView tutorial where I discussed how to convert a website into a native android app using the inbuilt android WebView class? Here is the post that I suggest you to read – Simple Android WebView code for accessing a website within app. To make a native android app from JavaScript and HTML template you need to use the same code from that post. You just need to change one line of code and need to create a assets folder inside app.

At first you need to create the assets folder and then put the HTML template inside this folder. To understand it better see the picture below:

Remember the WebView code I used in this post – Simple Android WebView code for accessing a website within app. You will find this code inside the main java file to load the website:

myWebView.loadUrl("https://www.codespeedy.com");

Just change this code into this one to load the template instead of the website:

myWebView.loadUrl("file:///android_asset/sample.html");

 

Complete code to convert your HTML template into android app:

Here is the complete code of this tutorial:

activity_main.xml

<FrameLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="MergeRootFrame">

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

    <TextView
        android:text="Network Not Available!  Please Check Internet Connection..."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/NoNetworkText"
        android:textSize="25sp"
        android:textColor="@android:color/holo_red_dark"
        android:textAlignment="center" />

</FrameLayout>

 

MainActivity.java

package com.codespeedywebviewdemo;

import android.app.ProgressDialog;
import android.content.Context;
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.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;
    ProgressDialog mProgress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.activity_main_webview);

        // Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        //Check if network or internet is available
        ConnectivityManager ConnectionManager=(ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo networkInfo=ConnectionManager.getActiveNetworkInfo();


        if(networkInfo != null && networkInfo.isConnected()==true )
        {
            // Open your website with WebView if network or internet connection available

            //Toast.makeText(MainActivity.this, "Network Available", Toast.LENGTH_LONG).show();

            mProgress = ProgressDialog.show(this, "Loading...", "Please wait...");

            //Here is the template path from assets folder
            mWebView.loadUrl("file:///android_asset/sample.html");
          // Force links and redirects to open in the WebView instead of in a browser
            mWebView.setWebViewClient(new WebViewClient() {

                @Override
                public void onPageFinished(WebView view, String url) {

                    //show webview
                    findViewById(R.id.activity_main_webview).setVisibility(View.VISIBLE);

                    //Remove the progress dialog after the website loaded completely
                    if(mProgress.isShowing()) {
                        mProgress.dismiss();
                    }

                }

            });

            //Hid the TextView from main activity with id NoNetworkText when Internet connection or network available.
            findViewById(R.id.NoNetworkText).setVisibility(View.GONE);

        }
        else
        {
            // Do this if network or internet connection is not available

            //Show this text when there are no Internet connection or network available
            Toast.makeText(MainActivity.this, "Network Not Available", Toast.LENGTH_LONG).show();

            //Show the TextView from main activity with id NoNetworkText when there are no Internet connection or network.
            findViewById(R.id.NoNetworkText).setVisibility(View.VISIBLE);

        }

    }

}

That’s the code of main Java file and main layout XML file. Now you can build your native android application from JavaScript, HTML template. Use your own template that you like to converted into android app. In this process you can also convert your JavaScript game into android game.

As you can see that there are no difference between building an android app for a website and converting a offline HTML template into an android app. You just need to load the URL to build android app for a website and in the case of build app with HTML template you need to load the local path from the assets folder where your template is located.

Leave a Reply

Your email address will not be published. Required fields are marked *