How To Build Webview App APK For PWA In Android Studio

In order to publish your WebView app in Google Play store, you need to buid APK and AAB

Making a WebView App has it's pros and cons. You might not get 100% native features by converting your PWA into a WebView App. But it can get pretty close

One advantage of using a WebView wrapper around your website URL (which should be built as PWA) is you can publish it in Google play store, without having to code it in native development environment.

This tutorial is a transcript of a tutorial video by Javascriptual, you can watch it below.

In this tutorial I'm going to show you how to build your own Android WebView app using Android Studio for publishing your app in Google Play store.

Let's go ahead and open a new project in Android Studio and select Empty Activity project, click Next button and create a name for your application.

In this drop down and change Kotlin to Java: go ahead and click Finish button and it's going to take a while to install.

Now that the installation is completed, click on the finish button. If the Windows Firewall box shows up just click Allow Access.

Now it's going to take a while for Android studio to download gradle, so just wait for that to happen, you'll see progress bar in the lower right corner.

Once the resources have finished downloading. In the upper left corner go to manifest folder and click on androidmanifest.xml file in the tabs.

So here what you want to do is type:

Make sure the word INTERNET is in uppercase letters and close the bracket.

Now in the upper left corner of Android Studio editor, select the 'activity_main.xml' file, and you're going to open the following view:

Open up and from this page in the upper right corner click on code. This is going to bring up this file.

Go ahead and remove the TextView component completely . Select and delete that and then you want to rename this component entirely. So delete everything but layout and rename it to RelativeLayout. Make sure relative layout is also specified on top in the opening bracket.

Now in the upper right corner, go to design, now here click on the magnifying glass button and that will open up a new search input box. So in this search start typing the word 'web' because we're going to look for the WebView component. Now click and drag the WebView component into this box here.

Okay, now in the upper right corner go to code again and we're going to change something here. We're going to go into the WebView and right here we're going to type android:id="@+id/webview"

Now on the left hand side pane, what you want to do is go to the res folder, open Values, now open the Themes folder and select themes.xml. So in this file here, what you want to do is replace the is replace the word Dark so that what you end up with is NoActionBar So go ahead and type that in there

Now on top let's go to the MainActivity.java Here I'm going to expand import and at the bottom here you want to import android.webkit.Websettings; then import android.webkit.Webreviews and import android.webkit.WebViewClient.

Now go to MainActiviy class at the very top over here and type private WebView mywebview; don't forget the semicolon

So you'll also find this source code example in the description of the video above.

mywebView=(WebView) findViewById(R.id.webview);
mywebView.setWebViewClient(new WebViewClient());
mywebView.loadUrl("https://www.example.com/");
WebSettings webSettings=mywebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Just copy and replace example.com with URL of your WebView app. So whatever you URL is just put it there. So go ahead copy that and paste it into this area over here inside the onCreate function

Also look for this code and go ahead and copy this entire block of code and insert it here at the bottom into the class just below the onCreate method.

public 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, String url) {
            view.loadUrl(url);
            return true;
        }
    }
   @Override
    public void onBackPressed() {
        if (mywebView.canGoBack()) {
            mywebView.goBack();
    } else {
        super.onBackPressed();
    }
}

Now go to this part of the code and click on the Bitmap object and click on the import class.

This will import the Bitmap class. Now still on the same file just make sure your URL is specified here.

Now we're actually ready to build the APK file. Go to Build and select generate single bundle APK option but just make sure that APK radio button is selected and click next.

Now we're going to create a KeyStore path, so on this screen go ahead and click on the 'create new' and in the upper right corner click on this folder and in the file explorer that shows up we're going to select the folder that we want to create the file in.

So i'm going to go into projects, create a new folder and call it my project's name. Go into that folder and you can use the name of your project and at the bottom create your JKS file. Now click ok, here you're going to enter your password four times. First box, the second box then also the third and the fourth box.

I'm going to change the validity (years) from 25 to 30 even though it doesn't really matter that much. So go ahead and fill the rest of the form with your basic company information.

Go to OK button and make sure the remember password checkbox is selected and go to next step, choose release and finish.

Now your APK is going to start building so we're going to wait for that to finish then expand this box and go to locate the file.

These are the other parts from the video transcript:

So this will show our generated APK file and it's ready to be launched in the phone emulator. So go ahead and click on that button in the upper right corner and click on create device button. Here you're going to choose phone.

I'm going to choose Nexus 5X and click on the next button. so here you're going to click on the next button. Then click on the download button for that device and just wait until this installation is complete.

So now go ahead and click on the finish button. Then click on the next button and click on the finish button again. Now on the next screen in the upper right corner, click on the play button and this will launch the emulator for that device.

It's going to take a while for it to load but basically just wait it out and when it's done bring up your APK file that we compiled earlier and simply drag and drop it into device. This will have your WebView application to the device and you will see that it has been added to the list.

Go ahead and click on your WebView app icon and it will open in the device and you can start using it as you would regularly use the app.

So guys thanks for watching my android studio APK WebView tutorial. If you think this helped you build your WebView application so you can publish it on google play store I encourage you to like this video or post a comment or even subscribe to my channel. I regularly post new coding tutorials and there is always something new to learn.