Convert Any Website to Android App Using Android Studio

A comprehensive guide to converting any website into a native Android application using WebView.

Step 1: Create New Project

Open Android Studio and click on New Project and select Empty Activity.

Step 2: Configure Project Settings

1. Give your application name
2. Choose folder location to store the project
3. Select JAVA as the programming language
4. Select Minimum SDK of Android OS
5. Click on Finish

Step 3: Navigate to Project Files

In the project screen you will see two files are already opened: MainActivity.java and activity_main.xml.

1. Open one more file from manifests from the left side menu
2. Expand manifests and double click on AndroidManifest.xml file
3. Select activity_main.xml and click on the Code view

Step 4: Update Activity Layout

Open activity_main.xml and replace the <TextView> element (from <TextView to parent" />) with the WebView code below. This code will convert the Android App into a Web View.

Replace the TextView with:

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

The complete activity_main.xml file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

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

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Enable Internet Permissions

Allow Internet connection to the Android App by adding the following permissions in AndroidManifest.xml file, right under the package="com.example.yourappname"> line:

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

Step 6: Remove Action Bar

Expand the res folder from the left side menu:

1. Expand values
2. Expand themes
3. Double click on both themes.xml files (one for light theme, one for dark theme)
4. Find DarkActionBar and replace it with NoActionBar

This will remove the extra header from your app.

Step 7: Add Application Icon

1. Copy your icon image file first
2. Expand res in the left side menu
3. Right-click on drawable and paste the copied icon
4. You will find your icon name under drawable (e.g., in this example the icon name is bas.png)

Step 8: Update Manifest Icon References

Once the icon is uploaded, go back to the AndroidManifest.xml file:

1. Find @mipmap/ic_launcher and @mipmap/ic_launcher_round
2. Replace both with @drawable/bas (or your icon name without the file extension)

Example:

• Replace @mipmap/ic_launcher with @drawable/bas
• Replace @mipmap/ic_launcher_round with @drawable/bas

Step 9: Update MainActivity Code

Open MainActivity.java file and replace all code right under the import statements with the code below.

Important: Don't forget to replace https://www.computerbas.nl/ with your own website URL.

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String websiteURL = "https://www.computerbas.nl/"; // sets web url
    private WebView webview;

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

        if(!CheckNetwork.isInternetAvailable(this)) //returns true if internet available
        {
            //if there is no internet do this
            setContentView(R.layout.activity_main);
            //Toast.makeText(this,"No Internet Connection",Toast.LENGTH_LONG).show();

            new AlertDialog.Builder(this) //alert the user that there is no internet
                    .setTitle("No internet connection available")
                    .setMessage("Please check your Mobile data or Wifi network.")
                    .setPositiveButton("Ok", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            finish();
                        }
                    })
                    //.setNegativeButton("No", null)
                    .show();

        }
        else
        {
            //Webview stuff
            webview = findViewById(R.id.webView);
            webview.getSettings().setJavaScriptEnabled(true);
            webview.getSettings().setDomStorageEnabled(true);
            webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
            webview.loadUrl(websiteURL);
            webview.setWebViewClient(new WebViewClientDemo());
        }
    }

    private class WebViewClientDemo extends WebViewClient {
        @Override
        //Keep webview in app when clicking links
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

    //set back button functionality
    @Override
    public void onBackPressed() { //if user presses the back button do this
        if (webview.isFocused() && webview.canGoBack()) { //check if in webview and the user can go back
            webview.goBack(); //go back in webview
        } else { //do this if the webview cannot go back any further
            new AlertDialog.Builder(this) //alert the person knowing they are about to close
                    .setTitle("EXIT")
                    .setMessage("Are you sure you want to close this app?")
                    .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            finish();
                        }
                    })
                    .setNegativeButton("No", null)
                    .show();
        }
    }
}

class CheckNetwork {

    private static final String TAG = CheckNetwork.class.getSimpleName();

    public static boolean isInternetAvailable(Context context) {
        NetworkInfo info = (NetworkInfo) ((ConnectivityManager)
                context.getSystemService(Context.CONNECTIVITY_SERVICE)).getActiveNetworkInfo();

        if (info == null) {
            Log.d(TAG,"no internet connection");
            return false;
        }
        else {
            if(info.isConnected()) {
                Log.d(TAG," internet connection available...");
                return true;
            }
            else {
                Log.d(TAG," internet connection");
                return true;
            }
        }
    }
}

Step 10: Enable Screen Rotation (Optional)

To enable screen rotation, add the following code in AndroidManifest.xml file inside the <activity> tag (within the <application> section):

android:screenOrientation="landscape"

Note: Use "landscape" for landscape-only mode, "portrait" for portrait-only mode, or "sensor" to allow automatic rotation.

Step 11: Test Your Application

Run your application on the Virtual Mobile device:

1. Press the Play button (▶) in Android Studio
2. Select a virtual device or connect a physical Android device
3. Verify that the app loads your website correctly
4. Test navigation, back button functionality, and internet connection error handling

Step 12: Build APK for Distribution

Once everything is working correctly:

1. Build Debug APK (for testing): Go to Build > Build Bundle(s) / APK(s) > Build APK(s)
2. Build Signed Release APK (for Google Play Store):
   • Go to Build > Generate Signed Bundle / APK
   • Select Android App Bundle or APK
   • Create or select your keystore
   • Follow the wizard to create a signed release bundle/APK
   • This signed APK can be uploaded to the Google Play Store

Credits

Thanks to:

• TechsBucket
• Yes you can!

Additional Tips

• Website URL: Make sure to update websiteURL in MainActivity.java to your own website
• App Name: Change your app name in res/values/strings.xml
• Permissions: Add additional permissions in AndroidManifest.xml if your website needs them (e.g., camera, location)
• Testing: Always test on multiple Android versions and screen sizes
• Security: Consider adding certificate pinning if your website handles sensitive data