The Google AdMob SDK makes it easy to serve AdMob ads and monetize your mobile applications. If your app contains a ScrollView , the placement of the ad in your layout can be tricky. In this post, we will discuss the best practice for adding AdMob ads to scrollable content.
Consider the following XML snippet (XML attributes omitted for brevity):
<ScrollView>
<LinearLayout>
<TextView android:text="Place very long string here..."/>
</LinearLayout>
</ScrollView>
Let’s say we want to place an ad in this layout. Defining an AdView in XML is pretty straightforward with the Google AdMob SDK:
<com.google.ads.AdView
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adUnitId="INSERT_YOUR_AD_UNIT_ID_HERE"
ads:adSize="BANNER"
ads:testDevices="TEST_EMULATOR"
ads:loadAdOnCreate="true"/>
Now we have to determine where to insert the AdView in the layout. If we were to insert the AdView inside the LinearLayout after the TextView , the ad would be displayed at the bottom of the ScrollView.
This is a poor ad placement from the user's perspective. Depending on the length of the app content, the ad either sits awkwardly somewhere in the middle of the screen or is hidden at the bottom of the ScrollView.
To improve the user experience, we can move the ad outside the ScrollView and use a RelativeLayout to pin the ad to the bottom of the screen. This is the needed XML markup:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView android:id="@+id/scrollLayout"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_above="@+id/adView" >
<LinearLayout android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Place very long string here..."/>
</LinearLayout>
</ScrollView>
<com.google.ads.AdView
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="@id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
ads:adUnitId="INSERT_YOUR_AD_UNIT_ID_HERE"
ads:adSize="BANNER"
ads:testDevices="TEST_EMULATOR"
ads:loadAdOnCreate="true"/>
</RelativeLayout>
The layout_alignParentBottom attribute pins the AdView to the bottom of the screen and the android:layout_above attribute sets the ScrollView above the AdView. If the ScrollView is not explicitly set to sit above the AdView, the ad will overlay the bottom of the ScrollView. Let’s see what the final result looks like.
This layout looks much cleaner! The ad is displayed at the bottom of the screen and will stay locked to the bottom as we scroll through the app content, providing a more natural user experience.
If you have questions about this post or about the AdMob SDK, feel free to ask us in the forum or join us at our upcoming office hours Hangout session. Start monetizing your mobile applications today!
Eric Leichtenschlag , AdMob Team
