Click here to Skip to main content
Click here to Skip to main content
Go to top

AdMob Plugin for Latest Version of PhoneGap Cordova for Android

, 20 Jun 2014
Rate this:
Please Sign up or sign in to vote.
AdMob Plugin Cordova PhoneGap 3.xx with iOS7 Frosted Panel

Introduction

This article and sample project is indended to show how to display Google's AdMob Ads using Cordova 3.xx or higher in two different ways in Eclipse. One way by adding Java code directly to create an adView and the other way by calling an AdMob Plugin from JavaScript required if you compile using Adobe's Cloud for PhoneGap. For those readers who are new to be building PhoneGap/Cordova projects in Eclipse I will briefly discuss some important issues about PhoneGap/Cordova.  With the advent of Cordova 3.xx things have changed a bit with the new use of Command Line Interface, or CLI, to retrieve Gits of plugins from a Git repository.

I posted a video of an extended sample with the AdMob Plugin at.
https://www.youtube.com/watch?v=lgn2lXv4szg

The extended sample adds the ability to search millions of hours of videos on YouTube. You can download the extended sample called "StationBreak" to see how the AdMob Pluginn works at:
http://www.SerGioApps.com

OR, from Google Play at:
https://play.google.com/store/apps/details?id=com.sergioapps.stationbreak

And the Source Code for for most of the StationBreak App can be found at:
http://www.SwipeClouds.com

In the sample project I address the problem of how to separate the AdMob ad from buttons because you aren't allowed to place the AdMob banner near buttons. AdMob doesn't really give any specifics I could find so I looked at Mobile Apps running AdMob that have been around for awhile to get some kind of feel as to how to approach this issue. You will notice that I dediced to place teh AdMob banner at the top of my app and I made the height of the header 60px to add separation from the header buttons. In practice I found this to be sufficient separation.

The iOS7 Frosted Panel Look

In the sample Android App I added the iOS7 Frosted Panel Look. To create an iOS7 Frsted Panel Look there are 3 "tricks" I used, namely:

  • Z-index of panel is -1. Prevents controls from being blurred

  • Panel's Background is transparent

  • Blur what is under the panel

Please note that filter effects (like blur, grayscale, brightness, contrast and hue) to elements only works in Android Browsers version 4.4 or higher. See http://caniuse.com/css-filters.  In In general, this website, http://caniuse.coma great reference for little gotchas that pop up in cross platform development with Phonegap/Cordova. In order to blur or frost what is under the sliding panel I used 2 classes, namely, backfrost_on and backfrost_off, that I add and remove to "scroller_player" which is the <div> tag that holds the screen content.

   $("#panel_controls").on("panelbeforeopen", function (event, ui) {
      $('#scroller_player').removeClass('backfrost_off');
      $('#scroller_player').addClass('backfrost_on');
   });

   $("#panel_controls").on("panelbeforeclose", function (event, ui) {
      $('#scroller_player').removeClass('backfrost_on');
      $('#scroller_player').addClass('backfrost_off');
   });

   .frosted::after {
      <span class="style4">/* z-index:-1 Only blurs background, NOT controls on panel */</span>
      <span class="style4">z-index: -1 !important;</span> 
      position: absolute;
      content: "";
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.5);
      -webkit-filter:blur(8px) brightness(110%);
      -moz-filter: blur(8px);
      -ms-filter: blur(8px);
      -o-filter: blur(8px);
      filter: blur(8px); 
    }

    .backfrost_on {
       -webkit-filter:blur(2px) brightness(110%);
       -moz-filter: blur(2px);
       -ms-filter: blur(2px);
       -o-filter: blur(2px);
       filter: blur(2px); 
    }
    .backfrost_off {
    }

Opening The Sample App in Eclipse

This article is intended for beginners. If you want to load the Eclipse Android Project simply unzip the project source file above and place the 2 folders, namely, HelloWorld, and HelloWorld-CordovaLib, in any directory that is NOT in your Eclipse workspace or the pathway to your Eclipse workspace. For example, my Eclipse workspace is: C:\Android_proj\workspace, and the directory I created to unzip the project file was: C:\DevSource. You can then import, for example, the C:\DevSource\HelloWorld directory is the one to import into Eclipse. However, instead of importing the project source for this article into Eclipse, you should really just build the project following the instructions below.

What's in A Name? PhoneGap vs. Cordova

Adobe bought PhoneGap. Adobe/Nitobi donated the PhoneGap codebase to the Apache Software Foundation (ASF). And Apache remaned the free version of PhoneGap to Cordova which is widely believed to have selected because the project was born at Nitobi, when the office was on Cordova Street in Vancouver. In this article we will create our project in Cordova that we will compile as a native app in Java using Eclipse. And we will show two different ways to add Google's AdMob, one way to the Java code and the other way as a plugin.

It is important to point out that EVERY Cordova / PhoeGap App is compiled for each mobile device in the native language for that device. So a Cordova / PhoeGap App for Android is compiled in Java (SDK) or C++ (NDK) as a Native Android App. Similarly, a Cordova / PhoeGap App for the iPhone is compiled in Objective C as a Native iPhone App using the XCODE compiler.

HTML Skins, Screens, and Screen Controls

Back in late 1995, I started writing and selling software applications written in C code that created a dynamic instance of Internet Explorer where I SHAPED the rectangular window of Internet Explorer's frame into a nice-looking shape or region to give my apps a cool skinned look, I called what I did "Slick Skins™" The Graphical User Interface or GUI was just an ordinary html web page. The advantages are that you can create really cool-looking GUI using HTML, CSS, and JavaScript which shortens development time. The first app I sold was to a South American ISP that set as a requirement that the maximum size of the Windows application had to be under 100 kilobytes including the installer.  My first app where I created a dynamic instance of Internet Explorer and a non-rectangular region, including the installer was 69 kilobytes--most of this size was the installer code! So when mobile apps came along my first thought was to create the GUI using a web page because it was rapid development and looked better than native controls. You can see an example of this concept using C# to create skinned messengers with video that I posted here on CodeProject called TaskbarNotifiers, Resizable Skinned MSN Messenger-Like Popups with Video. And I am planning on positing a new article on creating Skinned Regions in mobile apps to create small popup mobile apps that can run above other mobile apps.

This is the same idea behind PhoneGap, namely, to create screens in mobile apps using HTML, CSS, and JavaScript. Cordova is a collection of classes in various native languages that help in using a webView as your Graphical User Interface or GUI. The UI layer of a PhoneGap application is a web browser view that takes up 100% of the device width and 100% of the device height. Think of this as a "chrome-less" web browser. It renders HTML content, without the "chrome" or window decoration of a regular web browser. You build your application to take advantage of this space, and you build navigational/interactive/content elements and application chrome into your HTML and CSS based user interface. The web view used by PhoneGap is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView. Since there are differences in the web view rendering engines between operating systems, we need to account for this in our UI implementation. PhoneGap provides an application programming interface (API) that enables you to access native operating system functionality using JavaScript. You build your application logic using JavaScript, and the PhoneGap API handles communication with the native operating system. There is a lot of misunderstanding about PhoneGap because of the use of terms like "hybrid" where a lot of people think a PhoneGap app is not a native app.  PhoneGap/Cordova Apps are Native Apps that need to be compiled in their native language. Below is illustrated the idea of how PhoneGap/Cordova uses web pages as the screens in mobile devices.

 

Geting Started, What You Will Need

 

You need the following platforms / software packages:

For the purpose of this article I will assume that you have Java, the Android SDK, the Integrated Development Environment (IDE) Eclipse, Apache Ant, and GitHub already installed on a Windows computer. If not, there are numerous articles on the Internet that can walk you through the setting up of these tools. This article will focus on installing Node.js and Cordova (not PhoneGap) and then creating a Cordova 3.xx project with plugins that can then be easily imported into Eclipse.

Create Link to Command Window & Set "Run As Administrator"

This is important, I kept getting odd errors until I opened my command window to "Run As Administrator" before installing node.js and for all the installations described below.

Install NodeJs

To install node.js gGo to http://nodejs.org to download and install NodeJs following the directions on their website. To confirm the installation was successful and that you are running the latest version, type this and make sure you see a version number:

npm -v

Next run the following command to make sure you don't get the following common error:
Error fetching plugin:
Error: "git" command line tool is not installed: make sure it is accessible on your PATH.

npm install -g git
OR, just download the Windows version of git at:
http://git-scm.com/

Now you must make sure that the /bin directory location is added to the PATH Environment Variable. Search for the file location where Git was installed, this can be something like:

C:\Users\{your identy}\AppData\Local\GitHub\bin

But it can also be:

C:\Program Files (x86)\Git\bin 

Once you have the location of Git you should see a /bin sub-folder which you need to add to your PATH variable. It is also very common to find git's "bin" directory in a PortableGit folder, e.g., mine is:

C:\Users\{your identy}\AppData\Local\GitHub\PortableGit_054f2e797ebafd44a30203088cd3d58663c627ef\bin

Copy this path and then go to:

ontrol Panel > System > System Protection > Advanced > Environment Variables

Choose PATH, click edit and paste the bin path there. If there are already any values in your PATH paste your Git path at the end separated with a semi-colon.

Install Cordova (not PhoneGap!)

You read about Cordova/PhoneGap CLI at: http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface

One prooblem you can run into from this point on is that your installations can fail because of numerous Internet connection issues. If this happens just check your Internet connection and run the command again and agian until it succeeds. To install cordova run the following command as administrator:

npm install -g cordova

Create Cordova 3.xx Jar File

We need to build our Codova 3.xx Jar File. Later we will COPY this jar file into our Libs Directory in our project AFTER we have imported our project into Eclipse. For now let's create this jar file. Select the framework directory where we installed Cordova, and run "ant build" which will create our cordova jar in the same directoy.

cd C:\Users\{your identy}\.cordova\lib\android\cordova\3.4.0\framework

ant build

Install Plugman to Install Plugins

Technically you DO NOT need to install "plugman" to install your plugins but I strongly recommend using it. For this project we will use plugman and to install plugman:

npm install -g plugman

Create Your Android Cordova Project

Now that you have codova installed it is time to create a project. Select a directory OUTSIDE of your Eclipse workspace, I created a directory for this example called "C:\Dev" to store my projects before I bring them into my Eclipse workspace.

cd c:\Dev
cordova create hello com.companyname.appname HelloWorld

The first argument specifies the name, i.e., "hello," of a directory that will be created inside of your "C:\Dev" directory which is OUTSIDE of your Eclipse "workspace" directory to store your project before it is imported into your Eclipse workspace. The second argument, "com.companyname.appname," provides your project with a reverse-domain-style identifier, and this is:  com.companyname.appname. The last argument, i.e., "HelloWorld" provides the application's display text. You can edit these values later in the config.xml file.  Inside the project that will be created will be a "www" subdirectory that will contain your application's home page or GUI interface for your application, along with various resources under css, js, and img, which follow common web development file-naming conventions. The config.xml file contains important metadata needed to generate and distribute the application.

Go to your new project directory

cd hello

and then add the Android Mobile Platform:

cordova -d platform add android

Add Your Plugins Using CLI

The first plugin we will add to enable AdMob will be the Google Play Plugin using the Command Line Interface, or CLI, as follows:

cordova plugin add https://github.com/MobileChromeApps/google-play-services.git 

Most people will simply copy the line above from this page and paste it into the Administrator Window which can add unwanted characters. To avoid this hard-to-catch "copy and paste error" make sure you paste in ONLY text characters in the cmd window as Administrator.

Next we will install our AdMob Plugin. There are a lot of these so-called AdMob Plugins floating around on GitHub. I selected the AdMob Phonegap Plugin for Android and iOS by Liming Xie after looking at the code in several of these AdMob plugins. His code was compatible with Phonegap 3.xx CLI and had many nice extra features. We add his AdMob plugin as follows: 

cordova plugin add https://github.com/floatinghotpot/cordova-plugin-admob.git

Next we are ready to build your project which might take a while the first time:

cordova build

Bring Project into Eclipse

Next we will our Codova project into Eclipse using import in Eclipse as follows: 

Next we will import our Codova project from our C:\Dev\hello directory into Eclipse as follows: 

Next we will configure the build path in Eclipse as follows: 

Next, after selecting the build path, we select the Resource Filter, we we DELETE both of the files shown below: 

Remember That Cordova Jar File We Created?

Now we will go and get that Cordova Jar File we created and paste it into or libs directory in the project we just imported into Eclipse as follows:

Next we will our 2 .jar files to our project as follows: 

Let's Set Our Order ad Export in Eclipse

And finally let's select to output our jar files in the "Export Tab" as follows: 

Modifying Our Java Activity

   /** Called when the activity is first created. */
  @SuppressLint("SetJavaScriptEnabled")
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      // Crashes if appView is not inititalized !!!
      //super.setProperty("loadingDialog", "Title, Message");
      //super.setProperty("errorUrl", "file:///android_asset/www/error.html");
      <span class="style4">super.init();</span>
      setContentView(this.root);
      <span class="style3">super.appView.getSettings().setJavaScriptEnabled(true);</span>
      <span class="style4">jv = new JavaScriptInterface(this, appView);</span>
      <span class="style4">appView.addJavascriptInterface(jv, "JavaCallback");</span>
      //USE This to load Plugin from Java by loading "index.html"
      //super.loadUrl("file:///android_asset/www/<span class="style4">index.html</span>");
      //createAdMob(this);
      //OR
      //USE this to load Plugin from JavaScript by loading "init.html"
      super.loadUrl("file:///android_asset/www/<span class="style4">init.html</span>");
  }

For every Cordova app we need one main script file to listen to deviceready event and initialise our application and our plugins. Typically, in the index.html file created there is a piece of code app.initialize(), and the code it comes from a file called index.js. A common question is, "do I have to have this piece of code in all my html files?" In theory, since all pages are called through Ajax calls, you don't need to add that line in all your pages. But in some cases you might want to add it, for example, if there might be a chance that the particular page might not be called from an ajax call, or a user for some strange reason lands on that page, instead of your index page. But this brings up another issue, if app.initialize() loads a plugin that the plugin can get called more than once and you need to address that issue. I tried several approaches such as using a Singleton class etc. but what worked best was the following simple approach by first loading a initialization file, namely, init.html, that is only loaded once and, in turn, will load our index.html as follows if and only if you want to load the AdMob Ads using the AdMob Plugin. This would allow us to show or hide the AdMob Plugin on each new page we load. For example, you may need to hide the AdMob Ad because screen needs controls that would have to be place too close to the AdMob ad in violation of AdMob's policy.

// The <span class="style4">init.html</span> file with the code below is loaded ONLY ONCE from our Java Activity
<script type="text/javascript">
  function LoadAdMobPlugin() {
     var admob_ios_key = 'INSERT_YOUR_AD_UNIT_ID_HERE';
     //var adId = (navigator.userAgent.indexOf('Android') >= 0) ? admob_android_key : admob_ios_key;   
     if (window.plugins && window.plugins.AdMob) {
        var am = window.plugins.AdMob;
        //am.destroyBannerView();
        am.createBannerView({
           'publisherId': admob_android_key,
           'adSize': am.AD_SIZE.SMART_BANNER,
           'bannerAtTop': true
        }, function () {
           am.requestAd({ 'isTesting': true }, function () {
           am.showAd(true);
        }, function () {
           alert('failed to request ad');
           })
        }, function () {
           alert("failed to create ad view");
           });
        } else {
           alert('AdMob plugin not available/ready.');
        }
     }
     window.onload = function () {
        // We load our AdMob Plugin from here because this page is never called again.
        LoadAdMobPlugin();
        window.location = "index.html";
     };
</script>

Some Final Thoughts

PhoneGap Application Packaging and Distribution For iOS apps the output is an iOS Application Archive, or .ipa file, for Android applications the output is an Android Package, or .apk file, and for Window Phone the output is an Application Package, or .xap file. Note, an .xap file is just a .zip file--change .xap to .zip and unzip to see it is just a zip file of the project dlls!), etc.

The extension Google uses for Android Applications (APK) may seem a bit complicated at first, but it really isn’t. In fact, an .apk is nothing else than a .zip file disguised as an .apk. That’s dumbing it down, but you get it. Essentially, if one wanted to see what’s inside an app, they would just change the extension of application-name.apk to application-name.zip, unzip it. And there you have it: The contents of the .apk! We aren’t done yet, read more after the break. Here is where it gets tricky. Inside the folder where you unzipped the contents of the application, you’ll find a file named classes.dex. That’s the most important file of the whole application, containing all the java files, but it’s encrypted! No worries, that can easily be solved. You’ll need two things: Dex2Jar from http://code.google.com/p/dex2jar/.

Although PhoneGap/Cordova architecture generally uses the single-page application model, where the application logic is inside a single HTML page that is never unloaded from memory. But multi-page client-side application architectures is also supported.
 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

William SerGio
Software Developer (Senior) http://www.SerGioApps.com
United States United States
I love coding and develop desktop apps (C++, C#, Java), websites, and mobile apps (iPhone, Android, Blackberry, iPad, PhoneGap/Cordova).
 
I am launching a new national TV series that features the best mobile apps. Show me your apps!
 
I have written software for Microsoft, MySpace.com, Quicken (Intuit), Mellon Bank, U.S. Army, U.S. Navy, Franklin Templeton, Pepsi, Universal Studios, Ryder Systems, AVID, Media 100, etc.
 
Bill SerGio
http://www.SerGioApps.com
http://www.Software-rus.com

Comments and Discussions

 
GeneralCordova Pinmembernine*chandran23-Jun-14 19:39 
GeneralRe: Cordova PinmemberWilliam SerGio23-Jun-14 22:48 
GeneralMy vote of 5 PinmemberAbinash Bishoyi22-Jun-14 23:47 
QuestionAdmob PinmemberAndres Pefia20-Jun-14 20:52 
AnswerRe: Admob PinmemberWilliam SerGio20-Jun-14 23:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 20 Jun 2014
Article Copyright 2014 by William SerGio
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid