參考資料
----
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())
}
}
相關筆記 ----