AndroidアプリへのAdMob導入方法（Kotlin）

![AndroidStudio-4.1.1](https://img.shields.io/badge/AndroidStudio-4.1.1-brightgreen) ![Kotlin-1.4.31](https://img.shields.io/badge/Kotlin-1.4.31-brightgreen) ![minSdkVersion-23](https://img.shields.io/badge/minSdkVersion-23-brightgreen)

## はじめに
Android アプリでの AdMob のバナー表示方法に関してです。[iOS](https://qiita.com/am10/items/008d1314c1e4df18ab75) よりも簡単でした:blush:

AdMob 導入するために下記アプリをリリースしてみました。

https://play.google.com/store/apps/details?id=com.am10.spanishwords

スペイン語の単語をフラッシュカードみたいに表示できるアプリです:sunglasses:

[ソース（GitHub）](https://github.com/adventam10/SpanishWords-android)

## 導入方法
導入方法はほぼ下記を見れば OK です。
[AdMobスタートガイド](https://developers.google.com/admob/android/quick-start?hl=ja)

導入手順は下記です。

1. AdMob アカウントを作成する
1. アプリを登録する
1. プロジェクトに SDK を導入する
1. AndroidManifest.xml に AdMob アプリ ID を追加する
1. 広告表示を実装する

### AdMobアカウントの作成
下記からとりあえずアカウントを作成します。 
[AdMob に申し込む](https://support.google.com/admob/answer/7356219?hl=ja&visit_id=637511357698277783-4004852503&rd=1)

「お支払い」からお支払い情報を追加します（２、３日で承認されました）。

### アプリを登録
AdMob のサイトで広告を表示するアプリを登録します。

左上のメニュー -> アプリ -> アプリを追加

必要な情報を入力してアプリを登録します。

登録したアプリを選択して左のメニューの「広告ユニット」から広告ユニットを作成します。 
これはたぶん表示する広告の数だけ作成します。とりあえず「バナー」を追加しておきます。

### SDK導入
build.gradle（Module）に下記を追記して SDK を導入します。

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

### AndroidManifest.xmlにアプリID追加
AndroidManifest.xml に下記のように AdMob アプリ ID を追加します。

```xml
<manifest>
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    :
    :
    :
    </application>
</manifest>
```

`value` は AdMob のサイトで登録したアプリ情報から下記のように確認できます。

アプリ　-> 左メニューの「アプリ設定」 -> アプリ ID

広告表示には通信も必要なので下記も追加しておきます（とくに記載はありませんでしたが必要なはず）。

```xml
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
```

### 広告表示を実装
アプリ起動時にまず初期化しておく必要があるようで初期表示画面などに下記のように追記します。

```kotlin
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) {}
    }
    ...
}
```

#### バナー
バナー表示の手順は下記です。

1. layout.xml に AdView を置く

    ```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_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-3940256099942544/6300978111" />
    ```

1. 下記のように実装する
    
    ```kotlin
    val adView = findViewById<AdView>(R.id.adView)
    val adRequest = AdRequest.Builder().build()
    adView.loadAd(adRequest)
    ```

layout.xml で追加する場合 Palette の Google に AdView が用意されています:relaxed:

<img width="396" alt="ad" src="https://user-images.githubusercontent.com/34936885/116327420-b2046c00-a801-11eb-920c-210eb6a7d559.png">

これでバナーが表示されます:raised_hands:
バナーのサイズと ID は下記のようにコードでも設定できるようですが２つは同じ方法で実装する必要があるようです（片方を XML もう片方をコードで設定はできない）。

```kotlin
val adView = findViewById<AdView>(R.id.adView)
adView.adSize = AdSize.BANNER
adView.adUnitId = "ca-app-pub-3940256099942544/6300978111"
```

開発中は iOS 同様テスト用 ID（上記の ID はテスト用のやつです）を使用する必要があるようです。シミュレーターで起動すると勝手にテスト広告が表示されるようでした:thinking:

> アプリの開発とテストでは必ずテスト広告を使用し、配信中の実際の広告は使用しないでください。実際の広告でテストすると、アカウントが停止される場合があります。

[バナー広告のドキュメント](https://developers.google.com/admob/android/banner?hl=ja)

## おわりに
とりあえず広告表示できるようになりました:clap:

実際にアプリで広告が表示されるようになるのは AdMob のサイトから「アプリ情報」の「アプリストア」の情報を追加してはじめて表示されるようになります。私の場合はリリースしてから１日ほどかかりました（さすが Google:clap: iOS の方は１０日ほどかかりました。。。）。

iOS アプリに導入するよりはお手軽でした:sunglasses: