カテゴリー
Kotlin言語

Android Studio:Google AdMob の実装のしかた(Kotlin編)

Google の AdMob のテスト用バナーを Android Studio でアプリに実装する方法です。DEXファイルのエラーが出たときの対処方法もまとめてあります


Android Studio は 4.1 を使ってみますね

AdMob を実装するには

思ったより手順が多そう…

  • 利用のための設定・・・build.gradle (Project) , build.gradle (Module) , AndroidManifest.xml , 初期化コードの記述(ActivityMain)
  • XMLレイアウトへのバナーの配置(またはKotlinコードによる部品の配置)
  • クラスにバナーを表示するための記述・・・バナー読み込み, イベントに応じた処理
  • Google による説明は こちら です

設定のポイント

テスト用のものを使ってくださいね

  • Googleが用意しているテスト用のバナーを使います。アカウントに応じた実際のバナーで開発を行うと、無駄なトラフィックが発生するだけでなく、アカウントが停止される恐れがあります
  • アプリの対応する Android バージョンをある程度絞ります。Google Mobile Ads SDK は大きいです。アプリを旧バージョンの Android までサポートしようとすると 64K参照制限 によってビルドできなくなる(あるいはビルドできてもうまく動作できない)ことがあります

基本の設定

アプリで AdMob が使えるようにしますね

プロジェクトレベルの build.gradle の設定確認

つぎの設定があるか確認し、なければ追加します

allprojects {
    repositories {
        ...
        google()
    }
}

モジュールレベルの build.gradle の設定

つぎの設定を追加します

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

AndroidManifest.xml を更新

  • Google Mobile Ads SDK バージョン 17.0.0 以降を使う場合は meta-data の設定は必須です
  • テストにはサンプル広告ユニットを使います
  • バナー広告のサンプルなら、例えば ca-app-pub-3940256099942544/6300978111 を使います
  • インターネットへの接続許可のパーミッションも必要です
<manifest>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

Mobile Ads SDK を初期化

ActivityMain.kt に次の記述をして Mobile Ads SDK を初期化します

package ...
import ...
import com.google.android.gms.ads.MobileAds;

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

        MobileAds.initialize(this) {}
    }
    ...
}

バナーを配置する

バナーはレイアウト(XML)に埋め込んでもいいし、プログラム(Kotlin)で設定してもいいの

どっちが簡単かな?

うん、とくに理由がなければ XML レイアウトに埋め込んで配置するのがおすすめ

XML レイアウトに埋め込んで表示する場合

レイアウトの 子View として、main_activity.xml に次のようなコードを埋め込みます

# main_activity.xml
...
  <com.google.android.gms.ads.AdView
      xmlns:ads="http://schemas.android.com/apk/res-auto"
      android:id="@+id/adView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true"
      ads:adSize="BANNER"
      ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
  </com.google.android.gms.ads.AdView>
...

Android Studio のデザインエディタも使えます。マウスで簡単に追加できちゃう

バナー部品をプログラムで配置する場合

ActivityMain.kt に次のようなコードを記述してバナーを配置することもできます

val adView = AdView(this)

adView.adSize = AdSize.BANNER

adView.adUnitId = "ca-app-pub-3940256099942544/6300978111"
// TODO: Add adView to your view hierarchy.

バナーを読み込む(表示する)

MainActivity に次のようなコードを記述するとバナーを表示できるの

package ...

import ...
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdView

class MainActivity : AppCompatActivity() {

    lateinit var mAdView : AdView

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

        MobileAds.initialize(this) {}

        mAdView = findViewById(R.id.adView)
        val adRequest = AdRequest.Builder().build()
        mAdView.loadAd(adRequest)
    }
}

AdMob のイベント

つぎのようなイベントを利用して表示をコントロールすることもできるんですね

mAdView.adListener = object: AdListener() {
    override fun onAdLoaded() {
        // Code to be executed when an ad finishes loading.
    }

    override fun onAdFailedToLoad(adError : LoadAdError) {
        // Code to be executed when an ad request fails.
    }

    override fun onAdOpened() {
        // Code to be executed when an ad opens an overlay that
        // covers the screen.
    }

    override fun onAdClicked() {
        // Code to be executed when the user clicks on an ad.
    }

    override fun onAdLeftApplication() {
        // Code to be executed when the user has left the app.
    }

    override fun onAdClosed() {
        // Code to be executed when the user is about to return
        // to the app after tapping on an ad.
    }
}

AdMob を設定するとビルドエラーが出るとき

Android 4.4(API 19)から対応するようにしてたらビルドできなくなっちゃった…

  • Google Mobile Ads SDK は大きいため、DEX ファイルの制限(64K 参照制限)でビルドできなくなることがあります
  • アプリが対応する Android のバージョンが広い場合は、ターゲットを絞ることで回避できることがあります。具体的には Android 5(API レベル21)以上に設定してみます
  • 軽量版の Google Mobile Ads Lite を利用したり、複数の DEX ファイルを読み込む 機能を有効にしたりすることで回避できることがあります

アプリの対応する Android のバージョン(APIレベル)を上げる

対応デバイスを少し狭くしてあげるとエラーが回避できるかも

  • アプリの対応する Android のバージョンを 5(API レベル21)以上にします。Android 6 以降であれば 23 にします
  • モジュールレベルの build.gradle を開いて次のように修正します
android {
    ...
    defaultConfig {
        ...
        minSdkVersion 21
    }
}

軽量版の Google Moble Ads Lite を使う

軽量版もあるんですね

うん、でも動作させるための制限事項があるので使える場面が限られることも

  • モジュールレベルの build.gradle を開きます
  • 通常版の Google Moble Ads の代わりに、軽量版の Google Mobile Ads Lite を指定します
dependencies {
    ...
    // implementation 'com.google.android.gms:play-services-ads:19.7.0'
    implementation 'com.google.android.gms:play-services-ads-lite:19.7.0'
}

複数の DEX ファイルを読み込めるようにする

Android 5.0(API 21)より古いデバイスに対応させるときに試してみてくださいね

  • multidex ライブラリを有効にします
  • アプリを Android 5.0(API レベル 21)よりも前の Android に対応させたいときに有効です
  • Android 5.0(API レベル 21)以降ではデフォルトで複数のDEXファイルを読み込めるため、この設定は意味がありません
  • モジュールレベルの build.gradle につぎの設定を追加します
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true
    }
}
dependencies {
    ...
    implementation "androidx.multidex:multidex:2.0.1"
}