Convert Website to Mobile App Free in 5 mins

What's in this blog? Hide

Convert Website to Mobile App Free
1. Explaination
2. android_dvlprs

In this blog, you’ll learn How to Convert Website to Mobile App Free. For this, you must have Android Studio installed on your PC or Mac.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

Convert Website to Mobile App Free

We’ll use our website https://www.androiddvlpr.com. To make an Android App of your website follow the steps given below:

Open Android Studio and create an Android Project.

Create Empty Activity.

Open activity_main (search in the Project Panel on the left) and enter XML code for WebView inside layout tags. Code for this is as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androiddvlpr.website.androiddvlpr.MainActivity">
    <WebView
        android:id="@+id/websiteload"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </WebView>

</android.support.constraint.ConstraintLayout>

How to Track lost mobile with IMEI Number

Now, Open AndroidManifest.xml and now insert code for ‘user-permission’ to access the Internet. It will be placed before or after tag.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androiddvlpr.website.androiddvlpr">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

Now Open MainActivity.java file and extend the class MainActivity to ‘Activity’ as shown below, this is done to remove the toolbar from your app as AppCompatActivity comes with a toolbar.

Now Copy pastes the code shown below. The explanation is done after the code.

package com.androiddvlpr.website.androiddvlpr;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

    private WebView webview;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webview = findViewById(R.id.websiteload);
        WebSettings settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

        webview.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(getApplicationContext(), "Oh no! " + description, Toast.LENGTH_SHORT).show();

            }

        });
        webview.loadUrl("https://androiddvlpr.com");

        }
    }

Explaination

In the code written in mainActivity.java file as shown above, following methods are used:

WebSettings

It manages the settings of the WebView, we have used it to enable JavaScript in our app WebView.

setJavaScriptEnabled

Its used to enable or disable JavaScript ability in the WebView.

shouldOverrideUrlLoading(WebView view, String url)

We have used it to take control of the loading of the URL in the WebView. It will load the URL inside the WebView If the user navigates to some other page on the website.