Display advertisements on iOS and Android Apps using Google Admob in Titanium

Posted By : Anuj Vashistha | 18-Jan-2013

admob android ios

The blog below exemplifies the effectual way to integrate Admob Ads within your titanium mobile app in iOS and Android.

We'll discuss the method with the source code below. First you need to download the Admob module.

You can download it through the link :

https://github.com/appcelerator/titanium_modules/blob/master/admob/mobile/android/dist/ti.admob-android-2.1.0.zip (for ANROID)

http://github.com/appcelerator/titanium_modules/blob/master/admob/mobile/ios/ti.admob-iphone-1.4.0.zip (for iOS)

Click on View Raw to download the zip files for both ios and android.

Follow the steps below to Integrate the admob module with your titanium app and show ads in your app.

(1) Integrate Admob Module in titanium studio.

After successfully downloading the zip file, extract it.

You will find "ti.admob" inside 'iPhone' and 'android' folders.

Navigate to your ~"/Library/Application Support/Titanium/modules" folder, there you will find two folders "android" and "iPhone".

Copy the downloaded "ti.admob" for android in "android" folder and another one in "iPhone" folder.

Now open titanium studio, create a new "titanium project".

Open project's tiapp.xml file.

Open overview tab, Add the "ti.admob" module by clicking on the '+' symbol at the top right corner.

Open tiapp.xml tab.

Now replace the code :

	<android xmlns:android="http://schemas.android.com/apk/res/android"/>

with

<android xmlns:android="http://schemas.android.com/apk/res/android">
       <manifest>
            <supports-screens android:anyDensity="true"
                android:largeScreens="true" android:normalScreens="true" android:smallScreens="true"/>
        </manifest>
        <uses-permission android:name="android.permission.INTERNET"/>
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
        <tool-api-level>14</tool-api-level>
        </android>

# Here you are done with successful installation and integration of admob module in titanium.

(2) Using the module to display ads on device.

Since, we've different modules for Android and iOS applications, their api's are also little variant. We''ll create different ad views for "Android" and "iOS".

Open "app.js" file in your project.

Include Admob module in the main window :

	var adMob = require ('ti.admob');

Create Ad View for iOS :

	var ad = adMob.createView({
	width : '320dp',
	height : '50dp',
	top : '-50dp',
	publisherId : " ", // You can get your own at http://www.admob.com/
	testing : false
	});
	win1.add(ad);

Add Event Listener to show ad in iOS when received :

	ad.addEventListener('didReceiveAd', function() {
	ad.animate({ 
        top : 0, 
        duration : 500 }); 
    });

Create Ad View for Android :

	var ad = adMob.createView({
	width : '100%',
	height : '50dp',
	top : '-50dp',
	backgroundColor : '#000',
	focusable : true,
	publisherId : " ",// You can get your own at http: //www.admob.com/
	testing : false
	});
	win1.add(ad);

Add Event Listener to show ad in Android when received :

	 ad.addEventListener(adMob.AD_RECEIVED, function() {
         ad.animate({
         top : 0,
	  duration : 500 }); 
     });

Ultimately, your "app.js" would look relatively like :

	// this sets the background color of the master UIView (when there are no windows/tab groups on it)

	Titanium.UI.setBackgroundColor('#000');

	 

	// create tab group

	var tabGroup = Titanium.UI.createTabGroup();

	 

	// include ti.admob module

	var adMob = require('ti.admob');

	var osName = Ti.Platform.osname;

	// create base UI tab and root window

	var win1 = Titanium.UI.createWindow({
	title : 'Tab 1',
	backgroundColor : '#fff'
	});

	var tab1 = Titanium.UI.createTab({
	icon : 'KS_nav_views.png',
	title : 'Tab 1',
	window : win1
	});
	 

	var label1 = Titanium.UI.createLabel({
	color : '#999',
	text : 'I am Window 1',
	font : {
	fontSize : 20,
	fontFamily : 'Helvetica Neue'
	},
	textAlign : 'center',
	width : 'auto'
	});
	 
	win1.add(label1);
	 

	if(osName != 'android')
	{
	var ad = adMob.createView({
	width : '320dp',
	height : '50dp',
	top : '-50dp',
	publisherId : " ", // You can get your own at http: //www.admob.com/
	testing : false
	});
	win1.add(ad);
	ad.addEventListener('didReceiveAd', function() {
	            ad.animate({
	                top : 0,
	                duration : 500
	            });
	        });
	}
	else{
	var ad = adMob.createView({
	width : '100%',
	height : '50dp',
	top : '-50dp',
	backgroundColor : '#000',
	focusable : true,
	publisherId : " ",// You can get your own at http: //www.admob.com/
	testing : false
	});
	win1.add(ad);

	ad.addEventListener(adMob.AD_RECEIVED, function() {
	            ad.animate({
	                top : 0,
	                duration : 500
	            });
	        });
	}
	 
	 
	//
	//  add tabs
	//
	tabGroup.addTab(tab1);
	 
	// open tab group
	tabGroup.open();