How to Create Webview App with admob ads Integration

How to Create a Webview application using Android Studio with Admob integration:

Webview is the tool used for converting your website into an android application. For example, if you have a website called “example.com” means, you can convert them into application format.

So, users can easily view your website on their mobile without using any browser. Also, you can add AdMob ads in that application; by the way, you can multiple your earnings.

So, in this article, we are going to see how to create a web view, how to integrate ad mob banner ads, how to create offline applications, how to add JavaScript, CSS, and HTML on your application etc.

How to Create a Webview application?

Step1: For creating a web view application, you should have an android studio. If you have already installed means, just leave it. If you are not yet installed means, you can download it from this link.

Note: Android Studio requires a minimum of 2 GB Graphics, 4GB RAM.

Step2: After installation click on to start a new project. => Then Click on Empty activity which is 4^th one. Then press next.

Step3: Enter the application name => package name = > Choose the android version. Note that, While using Admob ads, you should create an application that should run a minimum API level of 16 (Android 4.1).

Watch IPL Matches Live in oreo tv apk for Free

Step4:  Then Click on Finish. => Afterwards your application is landed with the mainactivitity.java file. In that, you can enter your java codes.

Step5: Copy the below-mentioned Code which I have developed already for you. So you can paste it in the mainactivity.java file (No need to save). Also, note that you should not replace the entire codes of your mainactvity.java. You should leave “your package name”.

Create webview application

In other words, your mainacticity.java file should contain your package name (package com.activedigital.test – in our case) + my codes which you will copy from the below.

package com.activedigital.myapplication;


import android.os.Bundle;
import android.webkit.WebView;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

import static com.google.android.gms.ads.AdRequest.*;

public class MainActivity extends AppCompatActivity {

    AdView adView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView mywebview = (WebView) findViewById(R.id.webView);
        mywebview.loadUrl("file:///android_asset/index.html");
        mywebview.getSettings().setJavaScriptEnabled(true);
        MobileAds.initialize(this, new OnInitializationCompleteListener() {
            @Override
            public void onInitializationComplete(InitializationStatus initializationStatus) {
            }
        });

        adView = findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        adView.loadAd(adRequest);



    }
    @Override
    public void onBackPressed()
    {
        WebView webView = (WebView) findViewById(R.id.webView);
        if(webView.canGoBack()){
            webView.goBack();
        }else{
            super.onBackPressed();
        }
    }
}

Step6: Now go to the activity_main.xml file. Then copy my code of activity_main.xml codes. In this, you can replace the entire code with my codes.

<?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="0dp"
        android:layout_height="690dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="331dp"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="660dp"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-3940256099942544/6300978111"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/webView"
        app:layout_constraintVertical_bias="0.969" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step7: Now you can go to your manifest file which will be located at the left-hand side. In that just click on the arrow mark, then you see a file called androidmanifeast.xml.

manifest xml file

You just copy the below user permission codes and paste it in the top as shown in the figure.

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

Also, you should add Admob codes that are given below.

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-3940256099942544~3347511713"/>

Step8: In the same left sidebar, you see a file option called “Gradle scripts” Click on that. Then you see the main option, in that choose the second one “build. Gradle (Module: app)”.

Step9: Now you see some punch of code along with dependencies, Just replace all the code with the below code. Do not worry, the below code is used to load your Admob ads.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'com.google.android.gms:play-services-ads:19.3.0'
    implementation 'com.google.firebase:firebase-ads:18.3.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

Now we have added all the required codes on our file.

Step10: Now go to the mainactivity.java file. There you see a default link is called “http://bloggerbeginner.com” just replace it with your link. Now you just run the emulator.

Step11: Afterwards you see your website in an application.

How to run Admob ads in the web view?

Admob is the Google platform used to publishers earn from their application. Also note that, if you are creating an application from android studio means, the AdMob ads will run after publishing the play store only.

So, while installing Admob ads, I recommend you to test your application with AdMob test ads. By default, I have given you along with the test ads. However, Let us start how to install Admob banner ads in the web view.

Step1: Now go to the activity_main.xml file. There you see an AdMob id. In that just replace with your Admob ads ID. If you do not have then create a new AdMob account and create new banner ads in that account.

Step2: now you go to the manifest.xml file. In that, you see punch of number prefix with ca-app-pub-xxxxxxx codes. Just replace it with your own codes. This is an application ID you can get it in the Admob account by visiting the application setting.

Step3: then run the emulator, your ads will appear if you use test ads. In case if you use your own ad id means, it will be visible only at play store downloads.

Step4: Note that, as per Admob policy viewing your own ads is strictly prohibited. That’s all.

Never forget to replace the added ID and application ID with yours.

How to create offline applications?

Offline application is used to use your app without the internet. It increases your user experience and rating in the play store. Let start,

Step1: Now go to mainactivity.java file => there you see a web URL of http://bloggerbeginner.com Just replace the code by using the URL “file:///android_asset/index.html”.

Step2: Now go to your left side folder => Right Click on the “app” => new => new folder => Asset => then add it to “main”

asset folder in webview

Note that, the asset folder is used to store bulk images, HTML, JavaScript CSS files etc.

Step3: Now you see a new folder “Assets” in the sidebar under the java (generated) folder. Right-click on that => New => File => You see a pop => just enter index.html => Click on enter => Then cursor will land in the index.html file.

Add HTML Pages

In that, you can add any html, JavaScript and css file.

Step4: if you need further you can repeat the same step3 with different names. For linking file 1 and file 2 you can use an anchor tag.

That’s all you have successfully created a new web view application along with Admob ads.