Banner Ad Examples

This page shows minimal examples for displaying banner ads on each platform. For complete working projects, see the example repositories:

For customizing loading and error states, see Customize loading state and Customize error state. For custom targeting, content mapping, and publisher provided identifiers, see Other Guides.

iOS

SwiftUI

In SwiftUI you can use FuseAdViewRepresentable wrapper around FuseAdView.

import SwiftUI
import FuseAppSDK

struct MyView: View {

    var body: some View {
        VStack {
            FuseAdViewRepresentable(code: "<zone_code>")
                .padding()
        }
    }
}

For a complete working example, see BannerView.swift in the iOS example repository.

UIKit

import UIKit
import FuseAppSDK

class MyViewController: UIViewController {

    var adView: FuseAdView?

    override func viewDidLoad() {
        super.viewDidLoad()

        let adView = FuseAdView(code: "<zone_code>")
        view.addSubview(adView)
        self.adView = adView

        ...
    }
}

For a complete working example, see BannerViewController.swift in the iOS example repository.

UICollectionView

FuseAdView objects can be used inside an UICollectionViewCell in the same way as other UIView objects.

Make sure you hold on to the banner view objects once created, as re-creating them will reload the banner (triggering a new banner ad request to the server).

class FuseCell: UICollectionViewCell {
    static let reuseIdentifier = "FuseCell"

    var adView: FuseAdView? {
        didSet {
            configureAdView()
        }
    }

    func configureAdView() {

      if let adView {
        // Add to cell content view.
        contentView.addSubview(adView)

        // Apply layout constraints.
        NSLayoutConstraint.activate([
          adView.topAnchor.constraint(equalTo: contentView.topAnchor),
          adView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
          adView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
          adView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
        ])
      }
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        adView?.removeFromSuperview()
        adView = nil
    }
}

For a complete working example, see the iOS example repository.

UIStackView

FuseAdView objects can be used inside a UIStackView in the same way as other UIView objects.

// Add a banner to a stack view.
let adView = FuseAdView(code: "example_adaptive_banner")
stackView.insertArrangedSubview(adView, at: 3)

For a complete working example, see the iOS example repository.

Android

Jetpack Compose

FuseAdView can be used in Compose using ComposeFuseAdView provided by the SDK.

@Composable
fun CustomView(code: String) {
    LazyColumn(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item {
            Text("Fuse ad view", style = MaterialTheme.typography.headlineLarge)

            Spacer(Modifier.height(8.dp))

            ComposeFuseAdView(code)

            Spacer(Modifier.height(8.dp))

            Text("Some other content", style = MaterialTheme.typography.bodyMedium)
        }
    }
}

For a complete working example, see ComposeActivity.kt in the Android example repository.

Layout XML

Add a custom view FuseAdView to your XML layout. You specify the zone code of the banner by adding the custom attribute ad_zone_code in the XML attributes of the view.

<com.publift.fuseappsdk.ads.FuseAdView
    android:id="@+id/fuse_ad_view_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:ad_zone_code="<zone_code>"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

NOTE: FuseAdView created in XML does not support extra parameters like custom targeting, content mapping and PPID.

For a complete working example, see example.xml and XmlActivity.kt in the Android example repository.

RecyclerView

FuseAdView objects can be used in a RecyclerView in the same way as other views.

You may want to hold on to the banner view objects once created, as re-creating them will reload the banner (triggering a new banner ad request to the server).

When views are no longer needed, they should be destroyed by calling destroy() on each of them.

class AdViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    var adContainer: ConstraintLayout = view.findViewById(R.id.ad_container)
    var adView: FuseAdView? = null

    fun bind() {
        adView?.let {
            adContainer.addView(it)
        }
    }

    fun unbind() {
        adView?.let {
            adContainer.removeView(it)
        }
    }
}

For a complete working example, see the Android example repository.

Flutter

import 'package:fuseapp_plugin/fuseapp.dart';
import 'package:flutter/services.dart';

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    initializeSDK();
  }

  Future<void> initializeSDK() async {
    try {
      await FuseAppPlugin.initializeSDK();
    } on PlatformException catch (e) {
      debugPrint("SDK init failed: ${e.message}");
    }

    if (!mounted) return;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('My App')),
        body: ListView(
          children: [
            const Text("Welcome"),
            FuseAdView(code: "example_fixed_size_banner"),
          ],
        ),
      ),
    );
  }
}