Adding Admob Banner in Android ListView Header

On June 17, 2013, in Android, by James Liu

Adding AdMob ads banner in ListView header is quite difficult, comparing with adding ads banner in IOS UITableView header. It is simply because there is no header section for ListView in Android. But IOS UITableView has and UITableViewDelegate offers a very convenient way to customize the header and footer. For Android ListView, we have two ways to solve the problem. In this Android AdMob example, I will show you how to add AdMob Banners in Android ListView App.

Add AdMob ads banner on the top of ListView

This is the most simple way to solve the problem. In this way, we will keep AdMob banner on the top of the app. No matter how user scrolls the ListView, the AdMob banner will be always above ListView and I believe this approach will provide more opportunities for users to watch the advertisement. More Straightforward, it will increase the revenue from your app. The following example will show you how to add AdMob on the top edge of your app.

The main layout file is main.xml. I am using the LinearLayout as the top view container. Then I insert another LinearLayout as the AdMob banner container, followed by ListView. In this way, the AdMob banner container will not show until the AdMob AdView get the advertisement successfully. Here is main layout source code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >
	
    <LinearLayout android:id="@+id/adsContainer"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    
    <ListView
        android:id="@+id/postListView"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent" />
</LinearLayout>

In the main activity class, MainActivity.java, I will instantiate the AdView programmatically and insert it into AdMob banner container. For ListView, I will create a dummy data set and render the list. Here is example source code of MainActivity.java

package com.jms.admobtopapp;

import java.util.HashSet;
import java.util.Set;

import com.google.ads.AdRequest;
import com.google.ads.AdSize;
import com.google.ads.AdView;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.LinearLayout;
import android.widget.ListView;

public class MainActivity extends Activity {

	private AdView adView;
	private PostData[] listData;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		adView = new AdView(this, AdSize.SMART_BANNER, "a151bd35eeb068d");
		LinearLayout adContainer = (LinearLayout)this.findViewById(R.id.adsContainer);
		adContainer.addView(adView);
		
		AdRequest adRequest = new AdRequest();
		Set<String> keywordsSet = new HashSet<String>();
		keywordsSet.add("game");
		keywordsSet.add("dating");
		keywordsSet.add("money");
		keywordsSet.add("girl");
		adRequest.addKeywords(keywordsSet);
		adView.loadAd(adRequest);
		
		this.generateDummyData();
		ListView listView = (ListView) this.findViewById(R.id.postListView);
		PostItemAdapter itemAdapter = new PostItemAdapter(this,
				R.layout.postitem, listData);
		listView.setAdapter(itemAdapter);
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	private void generateDummyData() {
		PostData data = null;
		listData = new PostData[20];
		for (int i = 0; i < 20; i++) {
			data = new PostData();
			data.postDate = "May 20, 2013";
			data.postTitle = "Post " + (i + 1)
					+ " Title: This is the Post Title from RSS Feed";
			data.postThumbUrl = null;
			listData&#91;i&#93; = data;
		}
	}
}
&#91;/java&#93;

This example code supports both portrait mode and landscape mode. You can download the following example app to check the result.

<a href="http://jmsliu.com/example/androidadmobtopapp/AdMobTopApp.apk" title="Add AdMob ads banner on the top of ListView">Run Example App: Add AdMob ads banner on the top of ListView</a>
<img src="http://jmsliu.com/wp-content/uploads/2013/06/chart1.png" alt="chart" width="100" height="100"/>

<h3>Add AdMob ads banner in the first row of ListView</h3>
In some cases, we need to insert AdMob ads banners into ListView, so that the AdMob banner can scrolled up and down as a normal list row. To accomplish this approach, we have to change our Adapter class. In the ideal scenario, the Adapter will return the AdView when ListView requests for the first row, and return the normal View for other rows. The only problem is ListView will reuse the row View for performance purpose. Therefore, we have to check if the View which is passed into getView() is suitable for the current row. Now, let's see the source code about how to insert AdMob in ListView.
[java]
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder viewHolder;

		if (position == 0) {
			if (convertView == null || !(convertView instanceof AdView)) {
				if (adView == null) {
					adView = new AdView(mainActivity, AdSize.SMART_BANNER,
							"a151bd35eeb068d");
					AdRequest adRequest = new AdRequest();
					Set<String> keywordsSet = new HashSet<String>();
					keywordsSet.add("game");
					keywordsSet.add("dating");
					keywordsSet.add("money");
					keywordsSet.add("girl");
					adRequest.addKeywords(keywordsSet);
					adView.loadAd(adRequest);
				}

				convertView = adView;
			}
		} else {
			if (convertView == null || convertView instanceof AdView) {
				convertView = inflater.inflate(R.layout.postitem, null);

				viewHolder = new ViewHolder();
				viewHolder.postThumbView = (ImageView) convertView
						.findViewById(R.id.postThumb);
				viewHolder.postTitleView = (TextView) convertView
						.findViewById(R.id.postTitleLabel);
				viewHolder.postDateView = (TextView) convertView
						.findViewById(R.id.postDateLabel);
				convertView.setTag(viewHolder);
			} else {
				viewHolder = (ViewHolder) convertView.getTag();
			}

			if (datas[position].postThumbUrl == null) {
				viewHolder.postThumbView
						.setImageResource(R.drawable.postthumb_loading);
			}

			viewHolder.postTitleView.setText(datas[position].postTitle);
			viewHolder.postDateView.setText(datas[position].postDate);
		}

		return convertView;
	}

This is the code in Adapter class. In the function of getView(), I will check if it is requested for the first row of list. If it is, I will return the AdView. Otherwise, I will return the normal list row view instead. In this example, I keep the AdMob AdView reference as class attribute, so that I don’t have to create a new one every time. This will also improve the ListView performance as well. You can try the following example app for testing purpose.

Run Example App: Add AdMob Banner in ListView
chart (1)

Download Source Code of Android Example

Add AdMob ads banner on the top of ListView
Add AdMob ads banner in ListView

Tagged with:  

4 Responses to “Adding Admob Banner in Android ListView Header”

  1. angelica tan says:

    Would you mine to make this tut new one, with android studio because i’m always failed to do this, thanks

  2. Racheal says:

    You dont need android studio code,all you simply have to do is open android studio,create a new project with blank activity.Then copy and paste the java code and the layouts in their respective locations…the code goes into the java folder,the layouts go into res,then change the manifest versiion code so that it matches that of this tutorial.

  3. Fire says:

    Hi James,

    Thanks for the example. Btw am trying to integrate it with Admob in the Google Play Services and it keep crashing.

    Can you pls help up?

    Thanks

Leave a Reply

WordPress Themes

WordPress Blog