【Kotlin】AdMob 新型態橫幅廣告 Adaptive Banner(自適應橫幅)

參考資料 ----

自适应横幅广告

原本的 智能横幅广告(Smart Banner)，通常情況下，在手機上，智能橫幅在屏幕為縱向時，高度為 50dp；當屏幕為橫向時，高度為 32dp。在平板電腦上，不論屏幕方向為縱向還是橫向，橫幅高度通常均為 90dp。 

 

而 Adaptive Banner 的做法是，當圖片廣告不足以佔據所分配的整個空間時，系統會居中放置圖片，然後填充兩側剩餘的空間。

簡言之，Smart Banner 的高度是固定的，而新型態的 Adaptive Banner 是會依據螢幕的寬度，等比例顯示橫幅廣告。 

 

** 2020.11.17 更新補充 **

Smart Banner 將停用，全面以 Adaptive Banner 取代。

app 層級的 build.gradle 要使用最新版的 play-services-ads，目前(2020.07.29) 是 19.3.0。

 
...
...
dependencies {
    ...
    ...
    
    implementation 'com.google.android.gms:play-services-ads:19.3.0'
    
    ...
    ...
}    
 

strings.xml

 
...
...

    < 測試的 AdMob app id -->
    <string name="app_id">ca-app-pub-3940256099942544~3347511713</string>
    < 測試的 AdMob 橫幅 id -->
    <string name="banner">ca-app-pub-3940256099942544/6300978111</string>

...
...
 

AndroidManifest.xml

 
    <application
        ...
        ... >

        <!-- App ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="@string/app_id" />
            
        ...
        ...
        <activity
                ...
                ...
        
 

原本的 layout.xml 是在佈局中直接放一個 adview，因為要動態決定 adview 的尺寸，就不這麼做了。

 
...
...

<com.google.android.gms.ads.adview
    ads:adsize="SMART_BANNER"
    ads:adunitid="@string/banner_ad_unit_id"
    android:id="@+id/adView"
    android:layout_alignparentbottom="true"
    android:layout_alignparentend="true"
    android:layout_alignparentleft="true"
    android:layout_alignparentright="true"
    android:layout_alignparentstart="true"
    android:layout_height="wrap_content"
    android:layout_width="match_parent" />

...
...
 

改成以 framelayout 做為 AdView 的容器(container)

 
...
...

<!-- 只要是 ViewGroup 層級皆可，ex:FrameLayout...，視您的需要自行變化 -->
<LinearLayout
    android:id="@+id/ad_view_container"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_height="wrap_content"
    android:layout_width="match_parent" />
...
...
 

MainActivity.kt

 
...
...

class MainActivity : AppCompatActivity() 
{
    private lateinit var adView: AdView

    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        MobileAds.initialize(this) { }

        // 程式執行時，取得當時的螢幕寬度
        // 再動態決定 adView 的尺寸
        adView = AdView(this)
        ad_view_container.addView(adView)
        loadBanner()

    }


    // 取得螢幕尺寸
    private val adSize: AdSize get()
    {
        val display = windowManager.defaultDisplay
        val outMetrics = DisplayMetrics()
        display.getMetrics(outMetrics)

        val density = outMetrics.density

        var adWidthPixels = ad_view_container.width.toFloat()
        if (adWidthPixels == 0f)
        {
            adWidthPixels = outMetrics.widthPixels.toFloat()
        }

        val adWidth = (adWidthPixels / density).toInt()
        return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
    }

    // 載入橫幅
    private fun loadBanner()
    {
        adView.adUnitId = getString(R.string.banner)
        adView.adSize = adSize
        val adRequest = AdRequest.Builder().build()
        adView.loadAd(adRequest)
    }
 

可以看到橫幅的左，右兩邊都沒有空白了。

相關筆記 ----

AdMob(API20(含)↑) 自適應橫幅 Adaptive Banner, 適 Android R(API30↑)