Set AdMob banner to match parent width by XML

Question

I'm trying to set AdMob banner ad to match it's parent width.

I tried as sample:

<com.google.ads.AdView
        android:id="@+id/ad"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        ads:adSize="BANNER"
        ads:adUnitId="app-pub-id"
        ads:loadAdOnCreate="true"/>

And got:

I also tried with:

ads:adSize="SMART_BANNER"

In the IDE xml preview, I got:

But in fact the ad didn't match his parent width.

Anyone?

Answer 1

The right way to set AdMob banner to match his parent by XML is:

<com.google.ads.AdView
        android:id="@+id/ad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="ca-app-pub_id"
        ads:loadAdOnCreate="true"/>

In addition, as mention before, the ability to match parent depends on the advertiser.

If the advertiser supplied the relevant resources, the ad will stretch to match his parent.

For example full size ad on Nexus 4:

Answer 2

adView.setAdSize(AdSize.SMART_BANNER);

Answer 3

If you look at the list of Admob Banner Sizes you'll see that since you are setting a height of 50 dp, you'll be getting a 320 dp x 50 dp banner. Depending on which device you are looking at won't be able to fill the width of the ad slot (e.g. a Nexus 7). The behavior of AdMob Smart Banners is different in that it is a bit more responsive to the different Android configurations by adjusting it size.

The limitations in ad size allow for advertisers to allow the same ad creative to run on multiple platforms without change.

Check the AdMob Documentation on Banners for Android for their suggested layout XML.

Answer 4

This trick worked for me.

1. Place your AdView inside some layout

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">

   <!-- Don't create AdView now. Programatically set AdView -->

</LinearLayout>

2. On your activity or fragment access the parent layout of AdView (i.e. linear layout here) and add addOnGlobalLayoutListener

LinearLayout layout = findViewById(R.id.container);
layout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
     @Override
     public void onGlobalLayout() {

        // load your ad here 
        AdView adView = new AdView(context);
        adView.setAdUnitId("YOUR_AD_UNIT");

        // create custom banner size with same aspect ratio as type banner
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        int targetAdWidth = (int) (layout.getWidth() / displayMetrics.density);
        int targetAdHeight = targetAdWidth * 50 / 320;

        AdSize adSize = new AdSize(targetAdWidth, targetAdHeight);
        adView.setAdSize(adSize);

        layout.addView(adView);

        AdRequest.Builder adReq = new AdRequest.Builder();
        AdRequest adRequest = adReq.build();
        // add listener if required
        adView.setAdListener(adListener);
        adView.loadAd(adRequest);
        layout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
      }
});