老灰鴨的筆記本: 【Kotlin】原始/陽春/樸實的 banner 橫幅廣告

參考資料 ----

AdMob 一直在變更 banner 的樣式， Smart Banner 即將棄用，取而代之的是 Adaptive Banners ，而 Adaptive Banners 因為要對應 Java 新版本 API 的因素也一直在變更寫法。

如果不想或懶得採用最新的廣告樣式，可以考慮原始/陽春/樸實的橫幅廣告。(本筆記結合了視圖綁定)

app 層級 build.gradle

 
...
...

android {
    
    buildFeatures {
        viewBinding true
    }
    
    ...
    ...
    
}

...
...

dependencies {

    // adMob
    implementation 'com.google.android.gms:play-services-ads:21.2.0'
    
}

strings.xml

 
<resources>
    
    ...
    ...

    <!-- adMob app id 測試 -->
    <string name="admob_app_id">ca-app-pub-3940256099942544~3347511713</string>
    <!-- 橫幅 測試 -->
    <string name="banner_ad_unit_id">ca-app-pub-3940256099942544/6300978111</string>

</resources>

AndroidManifest.xml

 
<manifest

    <!-- 存取網路連線 -->
    <uses-permission android:name="android.permission.INTERNET" />

    ...
    ...

    <application  ... >

        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="@string/admob_app_id" />

        ...
        ...

        <!-- AdMob 的 AdActivity -->
        <activity
            android:name="com.google.android.gms.ads.AdActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
            android:theme="@android:style/Theme.Translucent" />

        ...
        ...

    </application>

</manifest>

activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"  ←← 注意這行
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    tools:context=".MainActivity">
        
    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_ad_unit_id" />

    <TextView
        android:id="@+id/txtHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:text="Hello World!" />

</RelativeLayout>

adSize 除了 BANNER 外，另有其他值可填入

大小 (寬 x 高)	說明	適用裝置	AdSize 常值
320x50	標準橫幅廣告	手機和平板電腦	`BANNER`
320x100	大横幅	手機和平板電腦	`LARGE_BANNER`
300x250	IAB 中矩形廣告	手機和平板電腦	`MEDIUM_RECTANGLE`
468x60	IAB 完整橫幅廣告	平板電腦	`FULL_BANNER`
728x90	IAB 超級橫幅廣告	平板電腦	`LEADERBOARD`

MainActivity.kt

 
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        binding.txtHello.text = "大家好"

        // AdMob 初始化
        MobileAds.initialize(this)
        binding.adView.loadAd(AdRequest.Builder().build())
    }
}

採用陽春型橫幅，缺點當然就是外觀顯示不夠漂亮，使用者體驗不好，因為尺寸都是固定的。

(手機直) BANNER 標準尺寸 320×50

(手機橫) BANNER 標準尺寸 320×50

大橫幅(LARGE_BANNER) 320×100

IAB 中矩形(MEDIUM_RECTANGLE) 300×250

平板 IAB 完整橫幅(FULL_BANNER) 468×60

平板(直) IAB 超級橫幅(LEADERBOARD) 728×90

平板(橫) IAB 超級橫幅(LEADERBOARD) 728×90

若希望不同尺寸螢幕的設備展示相應的橫幅，可以複製 activity_main.xml 到

/layout-w480dp/ 、 /layout-w740dp/ 並將 adSize 屬性對應不同的橫幅。

/layout-w480dp/

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    ...
    ...
    tools:context=".MainActivity">
        
    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        ads:adSize="FULL_BANNER"
        ads:adUnitId="@string/banner_ad_unit_id" />

    ...
    ...

</RelativeLayout>

/layout-w740dp/

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    ...
    ...
    tools:context=".MainActivity">
        
    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        ads:adSize="LEADERBOARD"
        ads:adUnitId="@string/banner_ad_unit_id" />

    ...
    ...

</RelativeLayout>

方法二：

想到...不然自己土砲打造 "類自適應橫幅" 好了...😁

activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:text="Hello World!" />

    <!-- 做為 自適應橫幅的 container -->
    <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"
        android:orientation="horizontal" />

</RelativeLayout>

MainActivity.kt

 

...
...

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        binding.txtHello.text = "大家好"

        // AdMob 初始化
        MobileAds.initialize(this)

        // 橫幅廣告
        // 依螢幕尺寸變更橫幅的樣式
        val adView = AdView(this)
        when(this.resources.configuration.screenLayout and Configuration.SCREENLAYOUT_SIZE_MASK) {
            Configuration.SCREENLAYOUT_SIZE_XLARGE -> adView.setAdSize(AdSize.LEADERBOARD)
            Configuration.SCREENLAYOUT_SIZE_LARGE -> adView.setAdSize(AdSize.FULL_BANNER)
            Configuration.SCREENLAYOUT_SIZE_NORMAL -> adView.setAdSize(AdSize.LARGE_BANNER)
            else -> adView.setAdSize(AdSize.BANNER)
        }
        val lp = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT)
        lp.gravity = Gravity.CENTER
        adView.adUnitId = getString(R.string.banner_ad_unit_id)
        binding.adViewContainer.addView(adView,lp)     // 注意這裡 ad_view_container 的命名方式是 "駝峰式命名"
        adView.loadAd(AdRequest.Builder().build())

    }
}

相關筆記 ----

AdMob 的測試帳號

視圖綁定 ViewBinding

老灰鴨的筆記本

2022-10-10

【Kotlin】原始/陽春/樸實的 banner 橫幅廣告

沒有留言:

張貼留言