Web Code to Android App

Web Code to Android App

Download Android Studio.

Install Android Studio.

All the below steps are demonstrated in this YouTube video.

Create a new project.

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.

Open your main activity 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.

Open your 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.

(Optional) Customize your WebView.

Build an APK.

That's it! You just converted your Web Code into an Android App!

html to app