How to create WebView App / build APK file / run in emulator  Using the Android Studio WebView.

How to create WebView App / build APK file / run in emulator Using the Android Studio WebView.

Utilizing Android Studio

Your phone's apps were all made using an Integrated Development Environment (IDE). The official IDE for developing Android apps is called Android Studio. The majority of the applications you use on your Android phone were made with Android Studio, which is also the most popular IDE.

What Makes Android Studio the Perfect IDE?

  • Numerous more toolchain components, including the Gradle build system, are included into Android Studio. As a result, setting up this IDE for Android programming is the simplest.

  • For developers, it features a fantastic graphical user interface that makes designing apps easier and more pleasant.

  • It includes an emulator built in that makes testing and debugging your program simple. In order to test apps, it may also connect to your smartphone.

  • You may develop a variety of apps with Android Studio and a variety of programming languages. It enables you to launch your app quickly with its comprehensive built-in templates.

Want to create your first Android app but delaying because you lack Android Studio knowledge? To learn how to use Android Studio, read this guide.

Download the Android Studio and Install.

This YouTube video will serve as a guideline for this tutor. Watch Here

Introduction

This post will go through how to use Android Studio WebView to create WebView apps, compile APK files, and execute them in emulators. These topics are covered in this tutorial:

  • How to create an Android WebView app for publishing on Google Play online web store.
  • Modifying MainActivity.java class file (add uses-permission android name android.permission.INTERNET property)
  • Replacing TextView with WebView
  • Changing ConstraintLayout to RelativeLayout
  • How to find WebView component and add it to main android app view
  • Where and how to import Android webkit WebSettings, WebView and WebViewClient classes / objects into your Android app.
  • Enter example WebView code into your MainActivity.java file
  • Enter second sample WebView code into MainActivity.java file
  • How to build and generate APK file in Android Studio
  • How to launch your WebView APK file in Android Studio device emulator

Download the Android Studio and Install.

How to create an Android WebView app for publishing on Google Play online web store

It's time to decide how your app's first Activity will look. One screen or view of your program is often implemented using an Activity. We'll choose an Empty Activity so that you may start fresh.

Open a New Project in Android studio and select Empty Activity click Next.

1as.png

Create a New Application and change Language from Kotlin to Java then click Finish. Installing it will take some time. Note: if the Firewall box appears click Allow Access, it will take some time for Android Studio to download Gradle.

saveimagek.png

Modifying MainActivity.java class file (add uses-permission android name android.permission.INTERNET property)

Click AndroidManifest.xml in the Manifest folder in the top-left corner when the item has finished downloading.

android-studio-manifest.jpg

Type ` < uses-premission andriod:name ="andriod.premission.INTERNET"> </uses-premission>

Screenshot 2022-09-17 031335.png Select activity main.xml from the upper-left corner, and then a view appears; from this page, click the code link in the upper-right corner.

Screenshot 2022-09-17 033930.png

Replacing TextView with WebView

Remove the TextView Component completely by selecting it and deleting

text.png

Changing ConstraintLayout to RelativeLayout

Rename this component androidx.constraint.layout.widget.Constrant to Relative

233.png

How to find WebView component and add it to main android app view

Go to Design on the top-right corner, then click the search button and enter Web because we're looking for the WebView Component.

12.png Click and drag the WebView Component

dr.png

Go to code in the top-right corner.

e.png

Go to the WebView and type android:id"@+id/webview" Open the values folder in the res folder, then click on the theme folder select theme.xml 341.png

Replace Dark with NoActionBar in the file instead of DarkActionBar.

dark.png

Where and how to import Android webkit WebSettings, WebView and WebViewClient classes / objects into your Android app.

Go to the mainactivty.java then expand import

w.png

Then import the following at the bottom of import android.os.Bundle;

y.png

Enter example WebView code into your MainActivity.java file

Now go to the MainActivity class then type private WebView myWebview

Then copy this code

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

Screenshot 2022-09-17 053027.png Replace example.com with the url of your WebView App

Enter second sample WebView code into MainActivity.java file

copy these codes

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(); } }

Paste the code below onCreate method

Screenshot 2022-09-17 061311.png

Click on Bitmap object on your code, then click on import class

Screenshot 2022-09-17 062743e.png

The Bitmap class imported

w1.png

How to build and generate APK file in Android Studio

We are ready to build APK. Go to Build on the top-left corner and select Generate signed Bundle/APK option, make sure the APK radio button selected and click Next

APK.png

Click create new to start creating a key store path.

key.png Remember to choose the folder where we want to generate the file when you pick the folder in the file exploder that appears in the top-right corner.

Go to project, name your new folder, then create your jks file at the bottom.

Complete the remaining fields and enter your password four times in each of the four boxes.

key 2.png Expand the box when the APK file has finished compiling and Go to Locate the file, It will display our completed, launch-ready APK file.

gen.png

How to launch your WebView APK file in Android Studio device emulator

click the create device button after selecting the icon.

opq.png Select "Phone," then "Nexus 5X" and then click "Next."

next.png Wait for the installation to finish after clicking the download button, then click on the Next.

DOWN.png

Clicking the play button in the Next screen's upper-right corner will start the corresponding device's emulator, then wait few minutes to load.

play.png When it's finished, open your built apk file and drag it onto your device.

Screenshot 2022-09-17 114649.png Your WebView application will be added to the device as a result, and you can then see it in your list of connected devices.

Screenshot 2022-09-17 115843.png

ghost.png

When you click the WebView App icon, the device will open and you may use it as normal.

Conclusion

You are now capable of using Android Studio. You've just been given a sneak preview of a whole new universe through this lesson.

It's time to start working on your first app. The fact is that your initial app won't be all that great. Both your second and third are not. But it is how we as developers learn and advance. But I'm certain that your fourth application will be well received!

Never forget that practice makes perfect.

The YouTube video that serve as a guideline for this tutorial. Watch Here