Admob Adaptive Banners implementation - Android

Jakir Hossain
3 min readDec 3, 2019

Maximize your revenue by implementing Adaptive Banners. They are responsive ads that let developers specify the ad-width and use this to determine the optimal ad size. Google says that Adaptive Banners are designed to replace both the industry standard 320x50 banner size and the smart banners. So if you want to continue to generate revenue from your Apps, you better start implementing Adaptive Banners in your Apps.

When we implement a regular Banner, we use an Ad place in our layout file. To implement an Adaptive Banner, unlike regular Banner ads, we need a FrameLayout.

Here is a sample layout XML file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>


<FrameLayout
android:id="@+id/ad_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

Let’s create an Android project in Android Studio. Then replace the layout file by the above code. As you know, we need to ad Admob dependency in our app-level gradle file:

implementation ‘com.google.android.gms:play-services-ads:18.3.0’

In your AndroidManifest.xml file, make sure you add App ID meta-data and also Internet permission. You can use sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 for testing.

Here is the complete AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.binarytuts.admobadaptivebannersdemo"
>
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~3347511713"
/>
</application>

</manifest>

There are 5 steps to show an Adaptive Banner Ad:

Step 1 — Create an AdView and set the ad unit ID on it.

Step 2 — Determine the screen width (less decorations) to use for the ad width.

Step 3 — Get adaptive ad size and return for setting on the ad view.

Step 4 — Set the adaptive ad size on the ad view.

Step 5 — Start loading the ad in the background.

Here is the complete Java code:

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Display;
import android.widget.FrameLayout;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

public class MainActivity extends AppCompatActivity {

private FrameLayout adContainerView;
private AdView adView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Initialize the Mobile Ads SDK.
MobileAds.initialize(this, new OnInitializationCompleteListener() {
@Override
public void onInitializationComplete(InitializationStatus initializationStatus) { }
});
adContainerView = findViewById(R.id.ad_view_container);
// Step 1 - Create an AdView and set the ad unit ID on it.
adView = new AdView(this);
adView.setAdUnitId("ca-app-pub-3940256099942544/6300978111");
adContainerView.addView(adView);
loadBanner();
}

private void loadBanner() {
// Create an ad request.
AdRequest adRequest =
new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
.build();

AdSize adSize = getAdSize();
// Step 4 - Set the adaptive ad size on the ad view.
adView.setAdSize(adSize);

// Step 5 - Start loading the ad in the background.
adView.loadAd(adRequest);
}

private AdSize getAdSize() {
// Step 2 - Determine the screen width (less decorations) to use for the ad width.
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);

float widthPixels = outMetrics.widthPixels;
float density = outMetrics.density;

int adWidth = (int) (widthPixels / density);

// Step 3 - Get adaptive ad size and return for setting on the ad view.
return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
}
}

You can get the project on Github.

--

--