How To Make WebView App From Your PWA In Android Studio
When I worked on Ghost Messenger (Twitter) PWA I realized sooner or later I will need to publish it on Google Play Store. After doing some research I decided to make this WebView App tutorial. Why not share what I learned?
Learning to code from scratch? 👇
Please Subscribe To My Coding Channel on YouTube
(Publishing new tutorials almost daily.)
Don’t like to read? No problem. Watch the video version of this article:
Your phone apps are made using Integrated Development Environment (IDE). The official IDE for developing Android apps is Android Studio.
Table Of Contents
This post will go through the process of creating a WebView app, compile and build APK files and execute them in an emulator:
- How to create an Android
WebViewapp for publishing on Google Play online web store. - Modifying
MainActivity.javaclass file (add uses-permission android nameandroid.permission.INTERNET property) - Replacing
TextViewwithWebView. - 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.
Go ahead and download and install Android Studio if you haven’t yet.
Choosing Activity View
It’s time to decide how your app’s first Activity will look.
One screen or view of your program is implemented using an Activity.
We’ll choose an Empty Activity so that you may start fresh.
Open a New Project in Android studio.
Select Empty Activity, click Next:
Create a New Application and change Language from Kotlin to Java.
Click Finish. Installing it will take some time.
Note: If the Windows Firewall box appears click Allow Access, it will take some time for Android Studio to download Gradle. Up to 2–3 minutes!
Modifying the default MainActivity.java file
In the next step we need to add android.permission.INTERNET property inside a <uses-permission> tag. Here’s how:
Click AndroidManifest.xml in /Manifest folder in the top-left corner:
<uses-premission
andriod:name ="andriod.premission.INTERNET">
</uses-premission>(preferably on a single line, I broke it down here for clarity.)
Select activity main.xml in the opened file tabs (upper-left corner) and from this page click the tiny Code button in the (upper-right corner).
Replacing TextView with WebView
Now that you’re in activity main.xml file.
Remove the TextView component completely by selecting and deleting it:
Changing ConstraintLayout to RelativeLayout
Replace the component currently named in code as:
component androidx.constraint.layout.widget.Constrant
To just RelativeLayout as shown below:
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 to start looking for the WebView component:
Click and drag the WebView component from search results into the app view on the left hand side (the white box):
Go to Code button again in the top-right corner:
Go to the WebView and type android:id"@+id/webview"
Open the /values folder in the /res folder, then click on the /Theme folder and select /theme.xml (the first file in that folder.)
theme.xml file and open it.Replace the word Dark with No in the source code.
So instead of DarkActionBar it should now say NoActionBar.
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… (if its collapsed).
Then import the following under the line: import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
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(“https://www.example.com/");
WebSettings webSettings=mywebView.getSettings();
webSettings.setJavaScriptEnabled(true);So the changes above now look as follows:
Important: Replace example.com with the URL of your WebView App.
Enter second sample WebView code into MainActivity.java:
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 right below onCreate method
Click on Bitmap object on your code, then click on import class.
The Bitmap class was imported into the app:
Now we are ready to build the APK file!
How to build and generate APK file in Android Studio
We are ready to build the APK file.
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:
Click Create New to start creating a key store path.
Remember to choose the folder where we want to generate the file when you pick the folder in File Explorer that appears in the top-right corner.
Create a new folder anywhere then create your .jks file at the bottom.
Complete the remaining fields and enter your password four times in each of the four boxes:
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:
Launching Your APK File In Android Studio Emulator
How to launch your WebView APK file in Android Studio device emulator
Click the Create Device button after selecting the icon.
Select Phone then Nexus 5X and then click Next.
Wait for the installation to finish after clicking the download button, then click on the Next.
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.
When it’s finished open your built APK file and drag it onto your device.
Your WebView application will be added to the device as a result, and you can then see it in your list of connected devices.
The application will launch:
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. 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.
Final Notes: What Makes Android Studio the Perfect IDE?
- Numerous 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.
- It features a fantastic GUI for developers that makes designing apps easier and more pleasant.
- It includes a built-in emulator that makes testing and debugging your WebView app simple. You can also connect it to your smartphone.
- You can develop a variety of apps with Android Studio in different programming languages. It enables you to launch your app quickly with its comprehensive built-in templates.
If you want to create your first Android App but you’ve been delaying because you lack Android Studio knowledge you can learn more about how to use Android Studio in the following guide: Install Android Studio.
Oh…and one last thing
Are you learning to code from scratch? 👇
Please Subscribe To My Coding Channel on YouTube
(Publishing new tutorials almost daily.)
