概要
バナー広告は画面の一部に表示される矩形の広告です。XMLレイアウトとコードの両方で使用できます。主な特徴
- 画面の上部、下部、または中央に固定配置可能
- 画像および動画広告に対応
- XMLレイアウトとプログラム方式の両方に対応
- リスナーによる広告イベント処理
開発環境ではテストユニットIDを使用してください:
PUBLIC_TEST_UNIT_ID_320_100XMLレイアウト実装
XMLレイアウトでAdropBannerを定義し、ActivityまたはFragmentからロードする方式です。
1. XMLレイアウト定義
FrameLayoutまたは他のコンテナにAdropBannerを配置します。
activity_main.xml
コピー
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- メインコンテンツ -->
<TextView
android:id="@+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="メインコンテンツ"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<!-- バナー広告コンテナ -->
<FrameLayout
android:id="@+id/banner_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<io.adrop.ads.banner.AdropBanner
android:id="@+id/adrop_banner"
android:layout_width="320dp"
android:layout_height="100dp"
android:layout_gravity="center"
app:adrop_unit_id="YOUR_UNIT_ID" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2. Activityからロード
コピー
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import io.adrop.ads.banner.AdropBanner
import io.adrop.ads.banner.AdropBannerListener
import io.adrop.ads.model.AdropErrorCode
class MainActivity : AppCompatActivity() {
private var banner: AdropBanner? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 1. XMLで定義したバナービューを取得
banner = findViewById(R.id.adrop_banner)
// 2. リスナー設定
banner?.listener = object : AdropBannerListener {
override fun onAdReceived(banner: AdropBanner) {
println("バナー広告の受信成功")
}
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
println("バナー広告の受信失敗: $errorCode")
}
override fun onAdImpression(banner: AdropBanner) {
println("バナー広告のインプレッション")
}
override fun onAdClicked(banner: AdropBanner) {
println("バナー広告がクリックされました")
}
}
// 3. 広告をロード
banner?.load()
}
override fun onDestroy() {
super.onDestroy()
// 4. メモリ解放
banner?.destroy()
banner = null
}
}
XML属性
| 属性 | 説明 | 必須 |
|---|---|---|
app:adrop_unit_id | 広告ユニットID | O |
android:layout_width | バナーの幅 (dp) | O |
android:layout_height | バナーの高さ (dp) | O |
プログラム方式での実装
コードで直接AdropBannerインスタンスを作成してビューに追加する方式です。
コピー
import android.os.Bundle
import android.widget.FrameLayout
import androidx.appcompat.app.AppCompatActivity
import io.adrop.ads.banner.AdropBanner
import io.adrop.ads.banner.AdropBannerListener
import io.adrop.ads.model.AdropErrorCode
class MainActivity : AppCompatActivity() {
private var banner: AdropBanner? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 1. バナーインスタンスを作成
banner = AdropBanner(this).apply {
unitId = "YOUR_UNIT_ID"
// 2. リスナー設定
listener = object : AdropBannerListener {
override fun onAdReceived(banner: AdropBanner) {
println("バナー広告の受信成功")
}
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
println("バナー広告の受信失敗: $errorCode")
}
override fun onAdImpression(banner: AdropBanner) {
println("バナー広告のインプレッション")
}
override fun onAdClicked(banner: AdropBanner) {
println("バナー広告がクリックされました")
}
}
}
// 3. ビュー階層に追加
val container = findViewById<FrameLayout>(R.id.banner_container)
val params = FrameLayout.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.WRAP_CONTENT
)
container.addView(banner, params)
// 4. 広告をロード
banner?.load()
}
override fun onDestroy() {
super.onDestroy()
// 5. メモリ解放
banner?.destroy()
banner = null
}
}
AdropBannerの初期化
コンストラクタ
ActivityまたはApplicationのContext
コピー
val banner = AdropBanner(context)
ユニットIDの設定
Adropコンソールで作成したユニットID
コピー
banner.unitId = "YOUR_UNIT_ID"
広告のロード
バナーを画面に追加した後、load()メソッドを呼び出して広告をリクエストします。
コピー
banner.load()
バナーが画面に表示されている時点で
load()を呼び出してください。表示されていない状態でロードすると、インプレッションが正確に測定されない場合があります。リスナーの実装
AdropBannerListenerインターフェースは広告のライフサイクルイベントを処理します。
onAdReceived(必須)
広告の受信に成功した時に呼び出されます。コピー
override fun onAdReceived(banner: AdropBanner) {
println("バナー広告の受信成功")
// ローディングインジケーターを非表示にするなどの処理
}
onAdFailedToReceive(必須)
広告の受信に失敗した時に呼び出されます。コピー
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
println("バナー広告の受信失敗: $errorCode")
// エラー処理および代替コンテンツの表示
}
onAdImpression(オプション)
広告が画面に表示された時に呼び出されます。コピー
override fun onAdImpression(banner: AdropBanner) {
println("バナー広告のインプレッション")
// インプレッション分析ログなどの処理
}
onAdClicked(オプション)
ユーザーが広告をクリックした時に呼び出されます。コピー
override fun onAdClicked(banner: AdropBanner) {
println("バナー広告がクリックされました")
// クリック分析ログなどの処理
}
コンテキストIDの設定
コンテキストターゲティングのためにコンテキストIDを設定できます。コピー
banner.contextId = "article_123"
コンテキストIDは広告をロードする前に設定する必要があります。
ライフサイクル管理
destroy()
バナーを使用しなくなった時は、必ずdestroy()を呼び出してリソースを解放してください。
コピー
override fun onDestroy() {
super.onDestroy()
banner?.destroy()
banner = null
}
destroy()を呼び出さないとメモリリークが発生する可能性があります。広告サイズ
バナー広告はユニットに設定したサイズに合わせてビューのサイズを指定する必要があります。一般的なバナーサイズ
| サイズ | 用途 |
|---|---|
| 320 x 50 | 小型バナー |
| 320 x 100 | 中型バナー |
| 16:9比率 | 動画バナー |
XMLでサイズを指定
コピー
<io.adrop.ads.banner.AdropBanner
android:id="@+id/adrop_banner"
android:layout_width="320dp"
android:layout_height="100dp"
app:adrop_unit_id="YOUR_UNIT_ID" />
コードでサイズを指定
コピー
val params = FrameLayout.LayoutParams(
dpToPx(320), // 幅
dpToPx(100) // 高さ
)
container.addView(banner, params)
// dpをpxに変換するユーティリティ関数
fun dpToPx(dp: Int): Int {
val density = resources.displayMetrics.density
return (dp * density).toInt()
}
テストユニットID
開発およびテスト時は以下のテストユニットIDを使用してください。| 広告タイプ | テストユニットID | サイズ |
|---|---|---|
| バナー (320x50) | PUBLIC_TEST_UNIT_ID_320_50 | 320 x 50 |
| バナー (320x100) | PUBLIC_TEST_UNIT_ID_320_100 | 320 x 100 |
| カルーセルバナー | PUBLIC_TEST_UNIT_ID_CAROUSEL | 可変 |
| バナー動画 (16:9) | PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_16_9 | 16:9比率 |
| バナー動画 (9:16) | PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_9_16 | 9:16比率 |
使用例
コピー
import io.adrop.ads.AdropUnitId
val banner = AdropBanner(this).apply {
unitId = AdropUnitId.PUBLIC_TEST_UNIT_ID_320_100
}
ベストプラクティス
1. メモリ管理
ActivityやFragmentが終了する時は必ずバナーを解放してください。コピー
override fun onDestroy() {
super.onDestroy()
banner?.destroy()
banner = null
}
2. 画面の可視性
バナーが画面に表示されている時に広告をロードしてください。コピー
override fun onResume() {
super.onResume()
banner?.load()
}
3. エラー処理
広告ロード失敗時の適切なエラー処理を実装してください。コピー
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
when (errorCode) {
AdropErrorCode.ERROR_CODE_NETWORK_ERROR -> {
println("ネットワークエラー:接続を確認してください")
}
AdropErrorCode.ERROR_CODE_NO_FILL -> {
println("表示可能な広告がありません")
}
else -> {
println("広告ロード失敗: $errorCode")
}
}
}
4. RecyclerViewでの使用
RecyclerViewでバナーを使用する時は、ViewHolderで適切に管理してください。コピー
class BannerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
private val banner: AdropBanner = view.findViewById(R.id.adrop_banner)
fun bind() {
banner.listener = object : AdropBannerListener {
// リスナー実装
}
banner.load()
}
fun recycle() {
banner.destroy()
}
}
// アダプター内で
override fun onViewRecycled(holder: BannerViewHolder) {
holder.recycle()
}
完全な例
Kotlinの例
コピー
import android.os.Bundle
import android.view.View
import android.widget.FrameLayout
import android.widget.ProgressBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import io.adrop.ads.banner.AdropBanner
import io.adrop.ads.banner.AdropBannerListener
import io.adrop.ads.model.AdropErrorCode
class BannerActivity : AppCompatActivity() {
private var banner: AdropBanner? = null
private lateinit var progressBar: ProgressBar
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_banner)
progressBar = findViewById(R.id.progress_bar)
setupBanner()
}
private fun setupBanner() {
// 1. バナーインスタンスを作成
banner = AdropBanner(this).apply {
unitId = "YOUR_UNIT_ID"
// コンテキストID設定(オプション)
contextId = "article_123"
// 2. リスナー設定
listener = object : AdropBannerListener {
override fun onAdReceived(banner: AdropBanner) {
println("バナー広告の受信成功")
progressBar.visibility = View.GONE
}
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
println("バナー広告の受信失敗: $errorCode")
progressBar.visibility = View.GONE
// エラー処理
when (errorCode) {
AdropErrorCode.ERROR_CODE_NETWORK_ERROR -> {
showToast("ネットワーク接続を確認してください")
}
AdropErrorCode.ERROR_CODE_NO_FILL -> {
println("表示可能な広告がありません")
}
else -> {
showToast("広告を読み込めませんでした")
}
}
}
override fun onAdImpression(banner: AdropBanner) {
println("バナー広告のインプレッション")
}
override fun onAdClicked(banner: AdropBanner) {
println("バナー広告がクリックされました")
}
}
}
// 3. ビュー階層に追加
val container = findViewById<FrameLayout>(R.id.banner_container)
val params = FrameLayout.LayoutParams(
dpToPx(320),
dpToPx(100)
)
container.addView(banner, params)
// 4. 広告をロード
progressBar.visibility = View.VISIBLE
banner?.load()
}
private fun dpToPx(dp: Int): Int {
val density = resources.displayMetrics.density
return (dp * density).toInt()
}
private fun showToast(message: String) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
}
override fun onDestroy() {
super.onDestroy()
// 5. メモリ解放
banner?.destroy()
banner = null
}
}
Javaの例
コピー
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import io.adrop.ads.banner.AdropBanner;
import io.adrop.ads.banner.AdropBannerListener;
import io.adrop.ads.model.AdropErrorCode;
import org.jetbrains.annotations.NotNull;
public class BannerActivity extends AppCompatActivity {
private AdropBanner banner;
private ProgressBar progressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_banner);
progressBar = findViewById(R.id.progress_bar);
setupBanner();
}
private void setupBanner() {
// 1. バナーインスタンスを作成
banner = new AdropBanner(this);
banner.setUnitId("YOUR_UNIT_ID");
// コンテキストID設定(オプション)
banner.setContextId("article_123");
// 2. リスナー設定
banner.setListener(new AdropBannerListener() {
@Override
public void onAdReceived(@NotNull AdropBanner banner) {
System.out.println("バナー広告の受信成功");
progressBar.setVisibility(View.GONE);
}
@Override
public void onAdFailedToReceive(@NotNull AdropBanner banner, @NotNull AdropErrorCode errorCode) {
System.out.println("バナー広告の受信失敗: " + errorCode);
progressBar.setVisibility(View.GONE);
// エラー処理
if (errorCode == AdropErrorCode.ERROR_CODE_NETWORK_ERROR) {
showToast("ネットワーク接続を確認してください");
} else if (errorCode == AdropErrorCode.ERROR_CODE_NO_FILL) {
System.out.println("表示可能な広告がありません");
} else {
showToast("広告を読み込めませんでした");
}
}
@Override
public void onAdImpression(@NotNull AdropBanner banner) {
System.out.println("バナー広告のインプレッション");
}
@Override
public void onAdClicked(@NotNull AdropBanner banner) {
System.out.println("バナー広告がクリックされました");
}
});
// 3. ビュー階層に追加
FrameLayout container = findViewById(R.id.banner_container);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
dpToPx(320),
dpToPx(100)
);
container.addView(banner, params);
// 4. 広告をロード
progressBar.setVisibility(View.VISIBLE);
banner.load();
}
private int dpToPx(int dp) {
float density = getResources().getDisplayMetrics().density;
return (int) (dp * density);
}
private void showToast(String message) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
}
@Override
protected void onDestroy() {
super.onDestroy();
// 5. メモリ解放
if (banner != null) {
banner.destroy();
banner = null;
}
}
}
XMLレイアウト
activity_banner.xml
コピー
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="バナー広告の例"
android:textSize="24sp"
android:textStyle="bold"
android:layout_marginTop="32dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="@+id/banner_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>