Admob Native Android SDK Integration with Phonegap/Cordova without Plugins

Just like we’ve Google’s AdSense program for all web publishers to generate revenue off their content, for mobile app developers there’s Google’s AdMob ads platform to monetize and promote their web app. PhoneGap is a great tool to convert JavaScript rich web apps to native mobile app. But when it comes to monetizing via ads, just putting Adsense code is not the solution as its meant for web usage only and is against Google’s terms and conditions. We’ll go through a simple process that I came across to integrate the native admob android sdk to our cordova apps and games without using any phonegap plugins.

Let’s just follow these few steps.

Install the Native Android SDK

Download the Android Admob SDK, extract it and copy GoogleAdMobAdsSdk-*.*.*.jar to the PhoneGap project’s libs directory.

Admob jar SDK in the project

Now refresh your project directory in Eclipse and add the newly downloaded SDK’s jar file to the project’s build path. You can do this by following these simple steps:

  • Right click on the project (in the project browser) and choose ‘Build Path’ -> ‘Configure Build Path’ from the context menu.
  • Now select the ‘Libraries’ tab and click on ‘Add Jars’ button.
  • Select yourProject/libs/GoogleAdMobAdsSdk-*.*.*.jar

Include Admob’s Library

Add the following lines in your MainActivity.java right below other imports.

import com.google.ads.*;
import android.widget.LinearLayout;

Here, the first import contains the functions related to ads while the second one will help us in inserting the ads into the screen.

Configure your AdMob ad unit ID

Now, inside the main class of your MainActivity.java file, create a new private string AdMob_Ad_Unit like this:

private static final String AdMob_Ad_Unit = "xxxxxxxxxxxxxxx";

Make sure to replace xxxxxxxxxxxxxxx with your own ID as putting incorrect ID there will result in no ads showing up. Now we are ready to show the ads in our app!

Create the Ad View

Below the newly added string, add one more private variable adView of AdView type like this:

private AdView adView;

This will be the container for the ad. Now, inside the onCreate function, add the following lines at the bottom:

adView = new AdView(this, AdSize.BANNER, AdMob_Ad_Unit); 
LinearLayout layout = super.root; 
layout.addView(adView); 
AdRequest request = new AdRequest();

adView.loadAd(request); 

This should be enough for the ads to show up in a real device. However, if you want to test the ads on a Android Virtual Machine, then you’ll have to add this line above adView.loadAd(request); and ads will start showing up in the AVDs.

request.addTestDevice(AdRequest.TEST_EMULATOR);

Make sure to comment out the above added line before publishing the app for obvious reasons!

So the entire code file should look like this:

/*
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
 */

package com.project.android;

import android.os.Bundle; 
import org.apache.cordova.*;
import com.google.ads.*;
import android.widget.LinearLayout;

public class MainActivity extends DroidGap
{
	private static final String AdMob_Ad_Unit = "xxxxxxxxxxxxxxx";
	private AdView adView;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
    	
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html")
        
        adView = new AdView(this, AdSize.BANNER, AdMob_Ad_Unit); 
        LinearLayout layout = super.root; 
        layout.addView(adView); 
        AdRequest request = new AdRequest();
        
        // Comment this out before publishing.
        // request.addTestDevice(AdRequest.TEST_EMULATOR);
        adView.loadAd(request); 
 
    }
}

Final Steps

The last step is to define the newly created Ads activity into the AndroidManifest.xml file. Add this line in your manifest file after the closing tag of your main activity.

<activity android:name="com.google.ads.AdActivity"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/>

Now you must be able to see the ads when running the app in an emulator or on a real device. If you run into a problem or doesn’t get it to work then drop us a comment here and we’ll help you! :)

Reference: https://github.com/sainttex/PhoneGap-Android-Native-AdMob

Share:

9 thoughts on “Admob Native Android SDK Integration with Phonegap/Cordova without Plugins

  1. Prasun Bannerjee

    Thanks Rishabh. I was looking for the same Being a new Android developer pushed into the field, I wanted to integrate admob and cordova, but couldn’t find a good solution to my doubts. Anyways, What I would like to ask is I can see the line –super.loadUrl(“file:///android_asset/www/index.html”)– commented. Do I have to un-comment it before using the html page? Doubtful as totally new to android development.

    Thanks
    Prasun

    Reply
    1. Kushagra Agarwal

      Hey Prasun,

      About the super.loadUrl() thing, you don’t need to uncomment that as super.loadUrl(Config.getStartUrl()); does the job of the commented line. You just need to edit the config file to add the URL of the main page you want to load when the app starts — it’s index.html by default.

      Also, let me know what other doubts you have regarding Admob.

      Reply
  2. Hanifullah Khan

    In “LinearLayout layout = super.root; ”
    at super.root it give an error.
    Any alternate solution???

    Reply
  3. yuvaraj

    PLEASE PROVIDE THE ADMOB EXACT CODE FOR BANNER1
    I AM STRUGGLE TO MAKE IT.PLEASE AND EXCUSE.
    THANKS.
    1.IS JAVA ENOUGH
    2.ELSE PROVIDE EVERYTHING IN XML
    MOBILE NUMBER 8807586592.

    Reply
  4. Mo

    Great article however is getting out dated as the Google Play Services library is taking over from AdMob SDK.
    Would love to see the same approach of integrating native Google Play Services ads against a Phonegap project??

    Reply
  5. Stefan

    Hi, perfect guide!

    I have one question. This code add banner on bottom of my app. I need to place banner on top. But how?

    Reply

Leave a Reply

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


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>