How to Convert any Website to Android App in Android Studio (WebView tutorials)

In this blog, I am going to show how to convert a website into an Android App in Android Studio.


This requires mainly the WebView class that handles the web content display in Android App. The WebView is basically an extension to the View Class to take care of the URLs. We will also need to use the WebViewClient to properly handle the WebView in the App.


The code snippet for MainActivity.class is below

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("https://learnandroid.net/");
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

    private class MywebClient extends WebViewClient{
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            return super.shouldOverrideUrlLoading(view, request);
        }
    }
    @Override
    public void onBackPressed() {
        if(webView.isFocused() && webView.canGoBack())
        {
            webView.goBack();
        }else{
            super.onBackPressed();
        }
    }
}

Now, we need to include the WebView in our XML. The code snippet for activity_main.xml is below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</RelativeLayout>

You may like to modify the way our website is manifested in the app by removing the upper bar. We also need the add permission to use the Internet.


The code snippet for AndroidManifest.xml is below:


<manifest package="com.allcodingtutorial.mywebactivity" xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET">
    <application android:allowbackup="true" android:icon="@drawable/logo" android:label="@string/app_name" android:roundicon="@drawable/logo" android:supportsrtl="true" android:theme="@style/Theme.MyWebActivity">
        <activity android:exported="true" android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN">

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

Notice the highlighted logo.png file above. You can put your own logo to give the App your personal touch and look more professional.


The Youtube video link to the tutorial is below:




38 views0 comments