While its relatively easy to use these SDKs in native applications, its still not straightforward to do so in a hybrid or mobile web application, which are becoming more popular with the cross-platform advantage they offer. So if I'm developing, say, a hybrid app, how do I use say, the Google AdMob SDK, which is primarily for an Android app? IBM Worklight, part of the IBM Mobile Foundation is a powerful development platform which allows you to do this easily. Here are some steps that outline how native ad SDKs can be used along with a hybrid app:
1. Create a Worklight project, adding all the common web code to the 'common' folder and overriding Android specific behavior in the 'android' folder by creating a new Android environment. If you're new to Worklight, you can read the Worklight tutorials to learn how to work with a Worklight project.
2. Download the Google AdMob SDK for Android.
3. Add the SDK JAR to the android>native>libs folder.
4. Declare com.google.ads.AdActivity in AndroidManifest.xml located in the android>native folder.
5. Setup the required network permissions(INTERNET and ACCESS_NETWORK) in the AndroidManifest.
6. Now navigate to android>native>res>layout>main.xml and open it in the xml view. You will see a single WebView declared in the xml. All you need to do is add an AdView to the layout right above the WebView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<com.google.ads.AdView android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adUnitId="MY_AD_UNIT_ID"
ads:adSize="BANNER"
ads:testDevices="TEST_EMULATOR, TEST_DEVICE_ID"
ads:loadAdOnCreate="true"/>
<WebView android:id="@+id/appView"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
</LinearLayout>Voila! You have your add banner in the application. An alternate way of doing this would be to first generate the Android project from the Worklight project by using "Build Environment and Deploy" option, and then modify the main.xml in the native Android project using the nice UI.
Any native code for the ad banner such as ad listeners etc. can be added to the Android activity class which references the main.xml or any other layout where the ad was added. For example:
public class HelloWorklight extends WLDroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl(getWebMainFilePath());
}
}
In the same fashion, you can add Interstitial ads by combining native and web pages in the Worklight project. Also, you can add ads into iOS/ Blackberry/ Other apps using the other SDKs provided by Google AdMob, InMobi and other networks.
In the part two of this post, I'll discuss how to use Worklight adapters and push notifications to render ads for your own business through your database or other data sources.
