How to Add Smart Banners in Your Android and iPad Apps

On April 4, 2013, in Android, Android Phone and Tablet, Make Money Online, by James Liu

A new ad unit, Smart Banner, is introduced after AdMob v6.0. This new ad banner make us able to render multiple size of ads on any screen size, regardless it is Portrait or landscape. Lack of screen size standard, there are too many different screen size mobiles and tablets we are using in the world. It make us too hard to create our apps to fit with all the types of screen size.

Smart Banner help us to solve the screen size problem. It smartly detect the width and height of the phone in current orientation and decide to show the most suitable size of ads in our apps. One piece of code can solve the problem to show different size ads in different device where our apps are running. For example, the Smart Banner can show either 320×50 or 360×50 size ads in portrait mode. While in landscape mode, it will show an ad in 480×32 or 682×32 which is depending on the height of the phone.

Download and Try The Example App
AdmobSmartBannerExampleQR


In android apps, you need to use SMART_BANNER as your ad size type. In iPhone and iPad apps, you need to use kGADAdSizeSmartBannerPortrait or kGADAdSizeSmartBannerLandscape. When an image ad is not big enough to fill in the space for the banner, the Smart Banner will center the ads and use a hexagonal textile filler to fill up the additional space. For AdSense ads, it will be centered with transparent filler. The Smart Banner supports following ads size.

AdMob Smart Banner Size
Device Size
iPhones and most Android phones in Portrait 320 x 50
Android Widescreen phones in Portrait 360 x 50
iPhones and Android Phones in Landscape Size between 480×32, 533×32 to 682×32
iPad in Portrait 728 x 90
iPad in Landscape 1024 x 90
Android Tablet in Portrait 800 x 90
Android Tablet in Landscape 1280 x 90
Kindle Fire in Portrait 600 x 90
Kindle Fire in Landscape 1024 x 50

 

Although AdMob v6.0 starts to support mediation ad networks, but most of the mediation ad networks don’t support Smart Banners. Check this to learn about AdMob Network Mediation. The following example will show you how to add Smart Banners into your Android apps.

The following is the layout xml. The UI layout is very simple. I just put a TextView in the LinearLayout.

<?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"
    android:gravity="center_horizontal"
    android:id="@+id/rootViewGroup"
    >
    
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:text="Above is the Ad Banner which is returned by Admob!"
    android:textSize="30sp"
    android:layout_gravity="center_horizontal"
    />
</LinearLayout>

After that, I will instantiate a AdView in the main Activity and insert above the TextView.

package com.jms.AdmobExample;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

import com.google.ads.*;
import com.google.ads.AdRequest.ErrorCode;

public class AdmobExample extends Activity implements AdListener {
    /** Called when the activity is first created. */
	private AdView myAdView;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        myAdView = new AdView(this, AdSize.SMART_BANNER, "a14f840b733d0dc");
        myAdView.setAdListener(this);
        
        //get layoutView
        LinearLayout rootView = (LinearLayout)this.findViewById(R.id.rootViewGroup);
        LinearLayout.LayoutParams layoutParams = new LayoutParams(480, 75);
        rootView.addView(myAdView, 0, layoutParams);        
        
        AdRequest re = new AdRequest();
        re.setGender(AdRequest.Gender.FEMALE);
        //re.setTestDevices(testDevices);
        //re.setTesting(testing)
        re.addTestDevice("1B91DF7A13E674202332C251084C3ADA");
        myAdView.loadAd(re);
    }
    
    @Override
    public void onReceiveAd(Ad ad) {
		TextView textview = (TextView)this.findViewById(R.id.textView);
		textview.setText("Above is the Ad Banner which is returned by Admob!");
    }

	@Override
	public void onDismissScreen(Ad arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onFailedToReceiveAd(Ad arg0, ErrorCode arg1) {
		// TODO Auto-generated method stub
		TextView textview = (TextView)this.findViewById(R.id.textView);
		textview.setText("Ad request successful, but no ad returned due to lack of ad inventory.");
	}

	@Override
	public void onLeaveApplication(Ad arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onPresentScreen(Ad arg0) {
		// TODO Auto-generated method stub
		
	}
}

Now, let’s see the advertisment returned by AdMob Smart Banner.

AdMob Smart Banners Ad in Portrait

AdMob Smart Banners Ad in Portrait

Not enough space to show ad Error

When I run this Smart Banners example in my HTC Desire in Portrait. It works fine. But the advertisments will not show after I put my phone in Landscape. In the debug Logcat, I will get following warning message:

Not enough space to show ad! Wants: <799, 48>, Has: <480, 75>

That is because I set the AdView as 480×75 in the code. When the phone is in landscape, AdMob will return a different size of advertisments banner. In my case, it will be 799×48; To avoid above error, we need to make some changes in the code.
Before Change:

        LinearLayout rootView = (LinearLayout)this.findViewById(R.id.rootViewGroup);
        LinearLayout.LayoutParams layoutParams = new LayoutParams(480, 75);
        rootView.addView(myAdView, 0, layoutParams);  

After Change:

        LinearLayout rootView = (LinearLayout)this.findViewById(R.id.rootViewGroup);
        //LinearLayout.LayoutParams layoutParams = new LayoutParams(480, 75);
        rootView.addView(myAdView, 0);

Now, let’s see the AdMob smart banner advertisment in landscape.

AdMob Smart Banners Ad in Landscape

AdMob Smart Banners Ad in Landscape

Try Example Result, download AdMobExample.apk
AdmobSmartBannerExampleQR

Tagged with:  

3 Responses to “How to Add Smart Banners in Your Android and iPad Apps”

  1. Nishit says:

    I can’t seem to get the last thing to work out, in your example the smart banner resizes it self to the width of the screen; but in my case, switching from portrait to landscape results in the same portrait sized banner to be displayed; and if switch from landscape to portrait I get not enough space to show ad message.

  2. Nishit says:

    I found a solution to problem I posted earlier. In case anyone else runs into this problem: You should override the onConfigurationChanged method where you will have to remove the old AdView and then insert a new one – simply requesting a new ad won’t solve the problem.
    http://stackoverflow.com/a/14132230

    *I guess in the above example you weren’t handling the congfigChanges in the manifest, which is why it seems to work normally without this hack.

    • James says:

      Hi Nishit,

      First of all, are you useing smart banner? Then, in my case, I instantiate the adview in the onCreate function, and add to the view. Do you create the adview instance in onCreate function, or in the layout xml?

Leave a Reply

WordPress Blog

WordPress Themes