How to Integrate Admob ads in Webview| Webview App Development Series Part 13

Hi Everyone, Our Webview App Development Series almost completed. We have added all the basic functionality in our App. Now we will add Admob ads in our Webview app. So that we can earn from our App. Last post I have shown you How to create an Admob account. If you don't have an Admob account, you can follow my last post.

By the way, Today I will show you how to create ad units in Admob and also how to integrate ads in our Webview App. Let's Start.

First we will go to Admob. Then click on the "Sign in" button. And then login to your Admob account.

Then you need to click on "Apps" from the left menu bar. Then click on 

Then it will ask you, have you published your app on Google Play or the App store? If your App is already published then click on Yes. After that, you can see below the image you need to enter your app name, developer name or app id.  Then click on the Search button. It will show your app, then click on ADD App.

But we have not published our Webview App yet. So, we will click on "No". Then you need to write your app name, select platform 'Android or ios' app. Then click on the "ADD" button.

You will see it says Congrats! your app has been added to Admob. And they will give you an App Id. Later we will implement this App ID in our project.

Now you need to click on "Create Ad Unit", It will show you ad format like Banner, Interistials, Reward, Native Advanced. I am going to Choose Banner ads. Click on "Select".

Then you need to give a name for the ad unit name. I am writing Banner. Then click on "Create AD UNIT"

Now you will see the below image, We have added our app, also have created an ad unit. Now we will copy APP ID and Ad unit id and paste it in a text file for easy to use.

We have done everything in AdMob, Now we will move to the android studio for implementing Admob ad in our project. For doing that, First, we need to integrate SDK in our project, you can do it in 2 ways, One is using dependencies, another one is Manual Download.

I will use dependencies to integrate SDK in Webview App, First, you need to go build.gradle(Module: App),then paste below dependency.

Code:

implementation 'com.google.android.gms:play-services-ads:19.0.1'

After that click on "Sync Now".

Now move to the "AndroidManifest.xml" file. And paste the below code inside the Application tag.

Code:

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="PLACE YOUR APP ID"/>

Example:

Now go to "activity_main.xml" file, and then paste below code, this code is for ads layout.

Code:

<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto" android:id="@+id/adView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:layout_gravity="center" ads:adSize="BANNER" ads:adUnitId="PLACE YOUR AD UNIT ID"> </com.google.android.gms.ads.AdView>

I have used test ads Ad unit id. You should not test app with your real ad unit id, for testing purposes you should always test with test ads. Otherwise Admob can banned your Admob Account.

Before Build your App for publishing in Google Play Store, don't forget to replace "test ad unit id" with your real ad unit id. Otherwise Admob will only serve test ads in your app and you will not get any revenue.

Example:

After that go to "MainActivity.java" file. Now you need to take a variable first "adview".

Code:

private AdView mAdView;

Now copy the below code and paste it in your "MainActivity.java" file in onCreate.

Code:

MobileAds.initialize(this,"PLACE YOUR APP ID"); mAdView = findViewById(R.id.adView); AdRequest adRequest = new AdRequest.Builder().build(); mAdView.loadAd(adRequest);

Example image:

That's it. We have finished the coding. Now you can run your project. As you can see below screenshot My app is showing test ads. So we have successfully integrated Admob Ad in our Webview App. Thank you.