Admob 을 Jetpack Compose 에서 구현하는 방법 # AndroidView

오늘은 Jetpack Compose으로 Admob을 구현하는 방법에 대해서 정리해 보겠습니다.

 

참고로 Firebase가 현재 앱과 연결되어 있지 않다면,

먼저 아래 링크를 참조해서 firebase에서 프로젝트를 생성하고 google-services.json 파일을 저장해주어야 합니다.

(https://firebase.google.com/docs/android/setup)

 

1. Admob 모듈 dependency 설정

1-1. project level  build.gradle

project 레벨의 build.gradle에는 다음과 같이 google-services를 추가해 줍니다.

 

buildscript {
    repositories {
      google()  // Google's Maven repository
      mavenCentral()  // Maven Central repository
    }

    dependencies {
      classpath 'com.google.gms:google-services:4.3.14'
    }
}

 

1-2. app level build.gradle

먼저 App레벨의 build.gradle의 plugins 에는 아래와 같이 google-services를 추가해 줍니다.

 

plugins {
  id 'com.google.gms.google-services'
}

 

 

그리고나서, 하단의 dependencies에도 play-services-ads를 추가해면 됩니다.

 

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

 

이제 라이브러리를 사용할 준비가 다 되었습니다.

 

2. Manifest에서 AppId 선언해주기

Manifest파일의 meta-data에 아래와 같이 선언해 줍니다.

먼저 string.xml에서 sample app id를 선언해 주고요.

 

<string name="admob_sample_app_id">ca-app-pub-3940256099942544~3347511713</string>

 

sample_app_id를 아래와 같이 가져와 사용해 줍니다.

 

 

 

3. initialize 하기

초기화는 앱을 최초에 실행할 때 한번만 하면 되기 때문에, Application클래스에서 실행해주면 되는데요.

아래와 같이 onCreate()안에,

MobileAds.initialize() 를 호출해서, 

초기화 해 주면 됩니다.

 

 

4. Android View

4-1. AndroidView

Android View는 Jetpack Compose를 Admob을 구현하려면 알아두어야 하는 클래스입니다.

기존의 View를 Jetpack Compose에서 사용하는데 필요한 클래스인데요.

아직 Jetpack Compose를 위한 Admob API가 없기 때문입니다.

 

이 API는 크게 2가지 파트로 나누어 집니다.

factory블록과 update블록입니다.

뷰를 얻기위해서 최초 한번 실행되는 것이 factory블록이구요.

Compose에 의해서 recompose 될때마다 실행되는 부분이 update 부분입니다.

 

 

4-2. AndroidView에서 광고로드

AndroidView를 이용해서 AdMob의 광고를 구현하려면 다음과 같이 해주면 되는데요.

facotry와 update를 구현해주고, modifier도 ui맞게 설정해 주면 됩니다.

 

factory 에 들어간 코드를 보면,

Adview()객체에 adsize와 id를 설정해 주고,

loadAd()함수로 광고를 로드해 주었습니다.

 

이후 recompose시 호출되는 update에서는,

loadAd()함수를 한번 더 호출해서 로드해 주었습니다.

 

 

 

4-3. Banner Size

위 코드를 보면, 배너 사이즈는 "AdSize.BANNER"인 것을 볼 수 있는데요.

배너 사이즈는 아래 표를 참조해 주시면 됩니다.

각 사이즈들은 AdSize constant 를 참조해서 선택해주면 됩니다.

 

 

구현을 완료하면 아래와 같이 배너를 볼 수 있습니다.

 

 

5. Test기기 등록하기

Admob을 구현하고 테스트기기에 배포해보면 테스트기기를 등록하라는 로그를 보게 되는데요.

Test기기를 등록하는 방법은 아래 글을 참조해주시면 됩니다.

>> Admob 테스트 기기등록하는 방법 # 부정클릭 방지

 

이제 구현이 정리 되었으니,

Admob에 개발된 애플리케이션에 대한 심사를 넣어서 승인이되면,

광고를 붙여서 수익을 얻을 수 있게 됩니다.