New Tutorials:   TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  Google AdMob  Mobile Application  
   Technology    Programming

How to add Admob Interstitial Ad in Android App

         
 NOVEMBER 3, 2020   by onlyklohan

In this article we will learn how to integrate Google Admob Interstitial Ad in our android app, so before going to the coding part we will first learn some basics and features of Interstitial Ads. We have already covered how to add banner ads in android app.

Interstitial Ads:

Interstitial ads is a full screen ad which cover the entire screen of the user ,it is usually show when a certain task is completed such as when user completed the level of the game,or when user wanted to download the image from the app ,or transition between the activities of the app. it totally depends on you when to show the Interstitial Ad

Feature of Interstitial Ads:

  • Show both text ads,video ads , image ads

  • Support frequency cap means you can decide how many ads are show to the user daily or hourly

  • User can interact with the ad as it also contains playable ads

  • The eCPM is hight as compare to Banner Ads , so it leads to more revenue

  • support both Mobile phones and Tablets

  • fill rate is maximum

So let's implement a simple Admob Interstitial Ad in our android app.

Step 1: Create a new Project

  1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

  2. Choose "Empty Activity" from the project template window and click Next

  3. Enter the App Name,Package name, save location, language(Java/Kotlin ,we use Java for this tutorial ) and minimum SDK(we are using API 19: Android 4.4 (KitKat) )

  4. Next click on Finish button after filling the above details

  5. Now wait for the project to finish building.

Step 2: Adding the Mobile Ads SDK

To show the ads in our app we have to first implement the Admob sdk in our app ,to do so

Go to Gradle Scripts->build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top

dependencies {
     // adding Admob SDK
     implementation 'com.google.android.gms:play-services-ads:19.4.0'
}

Now our build.gradle file look like,

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"

    defaultConfig {
        applicationId "com.studytonight.project"
        minSdkVersion 19
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    // adding Admob SDK
    implementation 'com.google.android.gms:play-services-ads:19.4.0'

}

Step 3: Modify AndroidManifest.xml

Go to app->manifests->AndroidManifest.xml file and add the internet permission to the Android Manifest file

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

Now we add add our AdMob AppId to your in the AndroidManifest file by adding the <meta-data> tag inside the <application> tag

<manifest>
    <application>

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

   </application>

</manifest>     

To show video ads inside the Interstitial ad views, hardware acceleration must be turned on. In Android the hardware acceleration is enabled by default, we can also enable and disable it for the entire or for each activity separately in our android manifest file as show below:

<!-- for the entire app --> 
<application
    android:hardwareAccelerated="true"></application>
<!-- for the each activity -->
<application>
        <activity
           android:hardwareAccelerated="true"> </activity>
</application>

The Complete code of AndroidManifest.xml file is shown below:

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

    <!-- adding internet permission to show allow app to use internet to load and show ads -->
    <uses-permission android:name= "android.permission.INTERNET"/>

    <!-- hardware Acceleration is turned on for the entire app -->
    <application
        android:hardwareAccelerated= "true"
        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/AppTheme">
        <activity
            android:screenOrientation="portrait"
            android:name= ".MainActivity">
            <intent-filter>
                <action android:name= "android.intent.action.MAIN" />

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

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

    </application>

</manifest>

Step 4: Modify activity_main.xml

We will now create 2 Buttons to load and show Interstitial ad insde a vertical linearLayout:

<!-- vertical linear layout with 2  button -->
<LinearLayout
    android:layout_centerInParent= "true"
    android:layout_margin= "16dp"
    android:orientation= "vertical"
    android:layout_width= "match_parent"
    android:layout_height= "wrap_content">

    <!-- Simple Buttons to Load Interstitial Ad when clicked -->
    <Button
        android:textSize= "24dp"
        android:layout_margin= "16dp"
        android:id= "@+id/loadInterstitialBtn"
        android:text= "Load Interstitial  Ad"
        android:fontFamily= "serif"
        android:textStyle= "bold"
        android:textColor= "#ffffff"
        android:background= "@color/colorPrimary"
        android:layout_width= "match_parent"
        android:layout_height= "60dp"/>

    <!-- Simple Buttons to Show  Interstitial Ad it is is loaded when clicked -->
    <Button
        android:textSize= "24dp"
        android:layout_margin= "16dp"
        android:id= "@+id/showInterstitialBtn"
        android:text= "Show Interstitial  Ad"
        android:fontFamily= "serif"
        android:textStyle= "bold"
        android:textColor= "#ffffff"
        android:background= "@color/colorPrimary"
        android:layout_width= "match_parent"
        android:layout_height= "60dp"/>

</LinearLayout>

Complete code of activity_main.xml is show below:

<?xml version=  "1.0" encoding=  "utf-8"?>
<RelativeLayout 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">

    <!-- vertical linear layout with 2  button -->
    <LinearLayout
        android:layout_centerInParent= "true"
        android:layout_margin= "16dp"
        android:orientation= "vertical"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content">

        <!-- Simple Buttons to Load Interstitial Ad when clicked -->
        <Button
            android:textSize= "24dp"
            android:layout_margin= "16dp"
            android:id= "@+id/loadInterstitialBtn"
            android:text= "Load Interstitial  Ad"
            android:fontFamily= "serif"
            android:textStyle= "bold"
            android:textColor= "#ffffff"
            android:background= "@color/colorPrimary"
            android:layout_width= "match_parent"
            android:layout_height= "60dp"/>

        <!-- Simple Buttons to Show  Interstitial Ad it is is loaded when clicked -->
        <Button
            android:textSize= "24dp"
            android:layout_margin= "16dp"
            android:id= "@+id/showInterstitialBtn"
            android:text= "Show Interstitial  Ad"
            android:fontFamily= "serif"
            android:textStyle= "bold"
            android:textColor= "#ffffff"
            android:background= "@color/colorPrimary"
            android:layout_width= "match_parent"
            android:layout_height= "60dp"/>

    </LinearLayout>

</RelativeLayout>

Step 5: MainActivity.java file

First we have to import the library inside the ActivityMain.java

//library for Button, View and Toast
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

// important library for Google adMob
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.InterstitialAd;
import com.google.android.gms.ads.LoadAdError;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

Now inside the MainActivity class we create object of InterstitialAd, Button (loadAdBtn, showAdBtn)

//creating Object of InterstitialAd
private InterstitialAd interstitialAd;


//creating Object of Buttons
private Button loadAdBtn;
private Button showAdBtn;

Now Inside the onCreate we initialize the MobileAds and showing a simple toast message when initialization is completed using the below code:

//initializing the Google Admob SDK
MobileAds.initialize(this, new OnInitializationCompleteListener() {
    @Override
    public void onInitializationComplete(InitializationStatus initializationStatus) {

        //Showing a simple Toast Message to the user when The Google AdMob Sdk Initialization is Completed

      Toast.makeText (MainActivity.this, "AdMob Sdk Initialize "+ initializationStatus.toString(), Toast.LENGTH_LONG).show();

    }
});

Next, we will initilize the object inside the oncreate method after initializing the SDK

//Initializing the InterstitialAd  objects
interstitialAd = new InterstitialAd (MainActivity.this) ;

// Initializing the Button  objects to their respective views from activity_main.xml file
loadAdBtn = (Button) findViewById(R.id.loadInterstitialBtn);
showAdBtn = (Button) findViewById(R.id.showInterstitialBtn);

Now we set the ad ID to the interstitialAd, for this tutorial we are using only test ads which are provided by google Admob, and if you want to earn revenue you can change it to your own ad id:

//setting Ad Unit Id to the interstitialAd
interstitialAd.setAdUnitId ( "ca-app-pub-3940256099942544/1033173712" ) ;

Now we will create a simple method loadInterstitialAd() to load the Interstitial Ad inside MainActivity class as show below:

private void loadInterstitialAd()
{
    // Creating  a Ad Request
    AdRequest adRequest = new AdRequest.Builder().build() ;

    // load Ad with the Request
    interstitialAd.loadAd(adRequest) ;

    // Showing a simple Toast message to user when an ad is Loading
    Toast.makeText ( MainActivity.this, "Interstitial Ad is loading ", Toast.LENGTH_LONG).show() ;
}

Next, we will create one more method private void showInterstitialAd() to show the Interstitial Ad to the user if it is loaded and if it is not loaded we will load the ad using the above method loadInterstitialAd() as shown below:

private void showInterstitialAd()
{
    if ( interstitialAd.isLoaded() )
    {
        //showing the ad Interstitial Ad if it is loaded
        interstitialAd.show() ;

        // Showing a simple Toast message to user when an Interstitial ad is shown to the user
        Toast.makeText ( MainActivity.this, "Interstitial is loaded and showing ad  ", Toast.LENGTH_LONG) .show();
    }
    else
    {
        //Load the Interstitial ad if it is not loaded
        loadInterstitialAd() ;

        // Showing a simple Toast message to user when an ad is not loaded
        Toast.makeText ( MainActivity.this, "Interstitial Ad is not Loaded ", Toast.LENGTH_LONG).show() ;
    }
}

Now we create a click listener inside onCreate method so that the above function are executed when the buttons are clicked, which we have created in our activity_main.xml file:

//click listeners for buttons
loadAdBtn.setOnClickListener( new View.OnClickListener() {
    @Override
    public void onClick( View view) {
        //calling the loadInterstitialAd method to load Interstitial Ad
        loadInterstitialAd() ;
    }
});

showAdBtn.setOnClickListener( new View.OnClickListener() {
    @Override
    public void onClick( View view) {
        //calling the showInterstitialAd method to show Interstitial Ad
        showInterstitialAd() ;
    }
});

To know the status of the Interstitial ad we will add the AdListener to our interstitialAd object inside the onCreate method and we will call the loadInterstitialAd() when the ad is closed,

// creating different AdListener for Interstitial Ad with some Override methods

interstitialAd.setAdListener( new AdListener() {
    @Override
    public void onAdLoaded() {

        // Showing a simple Toast message to user when an ad is loaded
        Toast.makeText ( MainActivity.this, "Interstitial Ad is Loaded", Toast.LENGTH_LONG).show() ;
    }

    @Override
    public void onAdFailedToLoad( LoadAdError adError) {

        // Showing a simple Toast message to user when and ad is failed to load
        Toast.makeText ( MainActivity.this, "Interstitial Ad Failed to Load ", Toast.LENGTH_LONG).show() ;
    }

    @Override
    public void onAdOpened() {

        // Showing a simple Toast message to user when an ad opens and overlay and covers the device screen
        Toast.makeText ( MainActivity.this, "Interstitial Ad Opened", Toast.LENGTH_LONG).show() ;
    }

    @Override
    public void onAdClicked() {

        // Showing a simple Toast message to user when a user clicked the ad
        Toast.makeText ( MainActivity.this, "Interstitial Ad Clicked", Toast.LENGTH_LONG).show() ;
    }

    @Override
    public void onAdLeftApplication() {

        // Showing a simple Toast message to user when the user left the application
        Toast.makeText ( MainActivity.this, "Interstitial Ad Left the Application", Toast.LENGTH_LONG).show() ;
    }

    @Override
    public void onAdClosed() {

        //loading new interstitialAd when the ad is closed
        loadInterstitialAd() ;

        // Showing a simple Toast message to user when the user interacted with ad and got the other app and then return to the app again
        Toast.makeText ( MainActivity.this, "Interstitial Ad is Closed", Toast.LENGTH_LONG).show() ;

    }
});

Overridable methods of AdListener:

Here is a list of overridable methods of AdListener:

public void onAdLoaded()

The onAdLoaded method is executed when an ad is loaded.we can update the UI or do other stuff we the ad is loaded such as give user more lies or coins in case of game or providing premium content to user for showing ad
public void onAdFailedToLoad(LoadAdError adError)

The onAdFailedToLoad method is the only one which includes a parameter. The adError parameter is of type LoadAdError describes which type of error is occurred
public void onAdOpened() 

The onAdOpened() method is executed when the user clicks on the Interstitial ad and ad is opened
public void onAdClicked()

The onAdClicked() method is executed when the user clicks on the Interstitial ad
public void onAdLeftApplication()

This method is executed after onAdOpened(), when a user click to opens another app(such as click the ad to install the game or app), backgrounding the currently running app
public void onAdClosed()

When the user returns back to the app after viewing an Ad or play store for installing app or game, onAdClosed() method is executed

The completed code of MainActivity.java is shown below:

package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

//library for Button, View and Toast
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

// important library for Google adMob
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.InterstitialAd;
import com.google.android.gms.ads.LoadAdError;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

public class MainActivity extends AppCompatActivity {

    //creating Object of InterstitialAd
    private InterstitialAd interstitialAd;

    //creating Object of Buttons
    private Button loadAdBtn;
    private Button showAdBtn;

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

        //initializing the Google Admob SDK
        MobileAds.initialize (this, new OnInitializationCompleteListener() {
            @Override
            public void onInitializationComplete(InitializationStatus initializationStatus) {

                //Showing a simple Toast Message to the user when The Google AdMob Sdk Initialization is Completed

              Toast.makeText (MainActivity.this, "AdMob Sdk Initialize "+ initializationStatus.toString(), Toast.LENGTH_LONG).show();

            }
        });


        //Initializing the InterstitialAd  objects
        interstitialAd = new InterstitialAd (MainActivity.this) ;

        // Initializing the Button  objects to their respective views from activity_main.xml file
        loadAdBtn = (Button) findViewById(R.id.loadInterstitialBtn);
        showAdBtn = (Button) findViewById(R.id.showInterstitialBtn);

        //setting Ad Unit Id to the interstitialAd
        interstitialAd.setAdUnitId ( "ca-app-pub-3940256099942544/1033173712" ) ;

        //click listeners for buttons
        loadAdBtn.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick( View view) {
                //calling the loadInterstitialAd method to load Interstitial Ad
                loadInterstitialAd() ;
            }
        });

        showAdBtn.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick( View view) {
                //calling the showInterstitialAd method to show Interstitial Ad
                showInterstitialAd() ;
            }
        });

        // creating different AdListener for Interstitial Ad with some Override methods

        interstitialAd.setAdListener( new AdListener() {
            @Override
            public void onAdLoaded() {

                // Showing a simple Toast message to user when an ad is loaded
                Toast.makeText ( MainActivity.this, "Interstitial Ad is Loaded", Toast.LENGTH_LONG).show() ;

            }

            @Override
            public void onAdFailedToLoad( LoadAdError adError) {

                // Showing a simple Toast message to user when and ad is failed to load
                Toast.makeText ( MainActivity.this, "Interstitial Ad Failed to Load ", Toast.LENGTH_LONG).show() ;

            }

            @Override
            public void onAdOpened() {

                // Showing a simple Toast message to user when an ad opens and overlay and covers the device screen
                Toast.makeText ( MainActivity.this, "Interstitial Ad Opened", Toast.LENGTH_LONG).show() ;

            }

            @Override
            public void onAdClicked() {

                // Showing a simple Toast message to user when a user clicked the ad
                Toast.makeText ( MainActivity.this, "Interstitial Ad Clicked", Toast.LENGTH_LONG).show() ;

            }

            @Override
            public void onAdLeftApplication() {

                // Showing a simple Toast message to user when the user left the application
                Toast.makeText ( MainActivity.this, "Interstitial Ad Left the Application", Toast.LENGTH_LONG).show() ;

            }

            @Override
            public void onAdClosed() {

                //loading new interstitialAd when the ad is closed
                loadInterstitialAd() ;

                // Showing a simple Toast message to user when the user interacted with ad and got the other app and then return to the app again
                Toast.makeText ( MainActivity.this, "Interstitial Ad is Closed", Toast.LENGTH_LONG).show() ;

            }
        });
    }

    private void loadInterstitialAd()
    {
        // Creating  a Ad Request
        AdRequest adRequest = new AdRequest.Builder().build() ;

        // load Ad with the Request
        interstitialAd.loadAd(adRequest) ;

        // Showing a simple Toast message to user when an ad is Loading
        Toast.makeText ( MainActivity.this, "Interstitial Ad is loading ", Toast.LENGTH_LONG).show() ;

    }

    private void showInterstitialAd()
    {
        if ( interstitialAd.isLoaded() )
        {
            //showing the ad Interstitial Ad if it is loaded
            interstitialAd.show() ;

            // Showing a simple Toast message to user when an Interstitial ad is shown to the user
            Toast.makeText ( MainActivity.this, "Interstitial is loaded and showing ad  ", Toast.LENGTH_LONG).show() ;

        }
        else
        {
            //Load the Interstitial ad if it is not loaded
            loadInterstitialAd() ;

            // Showing a simple Toast message to user when an ad is not loaded
            Toast.makeText ( MainActivity.this, "Interstitial Ad is not Loaded ", Toast.LENGTH_LONG).show() ;

        }

    }
}

Output:

In the below snapshots , you can see how the Interstitial Ad will look in the android application.

AdMob Interstitial Ad

When Ad is show to the user,

Conclusion:

In just 5 simple steps we have integrated and shown yous the basic example for creating a Google Admob Interstitial Ad. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.