【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="ca-app-pub-3940256099942544~3347511713" />
            
        ...
        ...
        <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:LinearLayout...,視您的需要自行變化 -->
<framelayout
    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)
    }
 




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





沒有留言:

張貼留言