How to make Android WebView app – Android Studio

3 min


How to make Android WebView app - Android Studio
How to make Android WebView app - Android Studio

How to make Android WebView app – Android Studio?

Do you want to make an android app for your website? So this is the best tutorial for you. Have you tried, How to convert my website in to android app? How make an android app for my website? How to make a webview app?

In this tutorial we are discussing How to make android webview app using android studio? If you did not read previously articles use this links to read that also.

How to make Android WebView app – Android Studio

1. Create a new project for your android app. (if you don’t know to create a new project use How To Make Android App using Android Studio? article.

How To Download And Install Android Studio

Android WebView component is inserted into the XML layout file for the layout we want the WebView to be displayed in.

2. Open res -> layout -> activity_main.xml (or) main.xml, create the application interface and add webview element to it.

WebView is a view that display web pages inside your application. You can also specify HTML string and can show it inside your application using WebView. WebView makes turns your application to a web application.

<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

WebView component is initialized in the MainActivity using its id defined in the activity_main.xml as shown in snippet below:

myWebView = (WebView) findViewById(R.id.webview);

WebView loadUrl() method is used to load the URL into the WebView as shown below:

myWebView.loadUrl("https://www.google.com");

Supporting JavaScript: JavaScript is by default turned off in WebView widgets. Hence web pages containing javascript references won’t work properly. To enable java script the following snippet needs to be called on the webview instance:

webSettings.setJavaScriptEnabled(true);

3. Add WebView code to Your MainActivity. Open src -> package -> MainActivity.java. Here firstly declare a webview variable, make JavaScript enable and load the URL of the website.

And also You have to add this code also for call the WebView.

private WebView myWebView;

Note: You can replace our url in below code with any other url you want to convert it into Android App.

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

4. Open AndroidManifest.xml file and add internet permission to it just after the package name. It is required because the App will load data directly from the website.

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

5. After adding the permissions the application is complete but when you run you will find that it will open the links in browser not in application itself. Solution for this is add this line of code in your MainActivity.java class.

 myWebView.setWebViewClient(new WebViewClient());

6. Now lets add on back pressed, Can go back buttons to the application. To activate go back buttons you need to add following code to your MainActivity.java class.

public void onBackPressed(){
if (myWebView.canGoBack())
{
myWebView.goBack();
}
else {
super.onBackPressed();
}
}

Here are the full codes of the project

Activity_main.xml

<?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:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.techedutricks.techedutricks;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

private WebView myWebView;

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

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

public void onBackPressed(){
if (myWebView.canGoBack())
{
myWebView.goBack();
}
else {
super.onBackPressed();
}
}
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.techedutricks.techedutricks">

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

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.TechEduTricks">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

</manifest>

Now run the App and you will see WebView App of your website. You can simply replace the url with any website url you want to convert into Android App. Note the website must be mobile friendly.

In Next lessons we are improving performance, Add more features and Make perfect WebView app. Stay with us and read/learn all the lessons/codes in techedutricks.com.


Like it? Share with your friends!

Danushka Sanjeewa
Danushka Sanjeewa is a Software engineer with more than 5 years of experience in Android App Development, Web Development, Marketing, Graphic design, Video editing, and WordPress. And also Writer/Founder of TechEduTricks.com.

0 Comments

Your email address will not be published. Required fields are marked *