Convert Web Code to Android App

Introduction

Before we start converting web code, we have to few basic terms about this concept. 

The terms are :

What is Web Code? 

The languages used to code Web pages and Web-based applications. See HTML5, JavaScript, Perl, Python, PHP and ASP.

What is Android App? 

Android is an open source and Linux-based Operating System for cell phones, for example, cell phones and tablet PCs. Android was created by the Open Handset Alliance, driven by Google, and different organizations. 

Android App is a product intended to run on an Android gadget or emulator. The term additionally alludes to an APK document which represents Android bundle. This record is a Zip chronicle containing application code, assets, and meta data.

What is Android Studio?

Android Studio is the authority Integrated Development Environment (IDE) for android application improvement. Android Studio gives more highlights that upgrade our usefulness while building Android applications.

What is JAVA N IDE?

Java N-IDE Java compiler is an official Android app. This app is develop to help the community learn java on android. You can build and run Java file with JDK 1.7.

Procedure for converting your web code into an workable android app in android studio & JAVA N IDE is almost same. 

Follow these steps

1. Download Android Studio.
2. Install Android Studio.
3. Create a new project.

4. Creating Files

You can observe the structure of your project at the left. You should create a folder named 'assets' in the root folder (app). Then, you should create 3 files (.html, .css, .js) in the assets folder. To do that,

Right Click 'assets'.

Click 'New'.

Click 'File'.

Copy the HTML, CSS, JS from your SoloLearn web code to the myHTML.html, myCSS.css, myJS.js files respectively.

Add <link> and <script> elements to myHTML.html for linking myCSS.css and myJS.js respectively.

5. Open XML File

 activity_main.xml if you didn't change any names during project creation in the layout (app/main/res/layout) folder. Insert the below code inside the parent layout element like LinearLayout, RelativeLayout etc,.

<WebView

  android:id="@+id/webView"

  android:layout_width="match_parent"

  android:layout_height="match_parent" >

</WebView>

Now, your web code's output will occupy the entire width and height of the screen.

6. Import webView packages in MainActivity.java

These packages inherent the information or data of these packages. 

The packages are:

import android.webkit.WebView;

import android.webkit.WebViewClient;

7. Open main activity JAVA file

 MainActivity.java if you didn't change any names during project creation within the java (app/main/java) folder. Insert the below code inside the onCreate() method.

WebView webView = (WebView) findViewById(R.id.webView);

webView.loadUrl("file:///android_asset/myHTML.html");

webView.getSettings().setJavaScriptEnabled(true);

Now, your web code runs when the activity is created i.e. when the app is launched.

8. Add Permissions in  Android Manifest file

 Before launching app, don't forgot to add permissions in AndroidManifest.xml file

If your app must have access to the Internet. To get internet access, request the INTERNET permission in your manifest file.

<manifest ... >

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

    ...

</manifest>

9. Customize (Optional) 

 You can customize your app WebView as per your preferences. Add app logo/icon to your app. Edit navigations as per your choice. You can remove actionbar just putting in package "No". 

10. Build an APK.

Yeah. You just converted your Web Code into an Android App!

Conclusion:

Install your apk file and enjoy! If you found any bug in your app while running let us now.