Google AdMob - Display Ads In Xamarin Forms

Introduction

Hello everyone, I am going to show how to display Google AdMob Ads for Android and iOS applications for CSharp - Xamarin Mobile Development.

A banner Ad is like a ribbon. This is selected if our requirement is to provide an ad at the footer or at header part, this does not cover the entire region of the Page. It only uses a portion of the app page.

Interstitial Ads cover the entire page with the ad, so mostly this is displayed as a popup. This process is the same for displaying rewarded type ads.

Requirements

We need “App Id” and “Unit Id”, which are created in “AdMob by Google” available on this website,

• https://code.msdn.microsoft.com/Google-AdMob-in-Xamarinform-cd500224/https://www.google.com/admob/.

To create these follow the tutorial available here:

• @https://code.msdn.microsoft.com/Google-AdMob-in-Xamarinform-cd500224/https://code.msdn.microsoft.com/Google-AdMob-in-Xamarinform-cd500224/
• Or @http://allsoftwaredevelopments.blogspot.com/2018/09/google-admob-mobile-development_4.html
• Or @https://www.c-sharpcorner.com/article/getting-started-with-google-admob/

Steps in Brief,

Steps in Detail,

Adding required packages

Here, we are using Custom Renders so the packages are to be added in Xamarin.Android and Xamarin.iOS folders only. There is no need to add any package in PCL folder.

1. For Android
   Add “Xamarin.GooglePlayServices.Ads” package.
   
   
2. For iOS
   Add “Xamarin.Firebase.iOS.AdMob” Package

Changes to be done in Manifest.xml file (only for Android)

Add Permissions for "INTERNET" and "ACCESS_NETWORK_STATE" and then add the following lines in the Manifest.xml file in Project->Android->Properties folder.

XML

Creating Custom Renders to access Banner type Ads

1. In PCL,
   While showing the Banner ad we have to set the size also. For this purpose we have to use custom renders as we can add nuget packages for AdMob by Google in native folders only.

Different sizes of banners available are,

Size in dp (WxH)	Description	Availability	AdSize constant
320x50	Standard Banner	Phones and Tablets	BANNER
320x100	Large Banner	Phones and Tablets	LARGE_BANNER
300x250	IAB Medium Rectangle	Phones and Tablets	MEDIUM_RECTANGLE
468x60	IAB Full-Size Banner	Tablets	FULL_BANNER
728x90	IAB Leaderboard	Tablets	LEADERBOARD
Screen width x 32|50|90	Smart Banner	Phones and Tablets	SMART_BANNER

Now in PCL add the following class with name AdBanner.cs

C#

1. using System;
2. using Xamarin.Forms;
4. namespace AdMob.CustomRenders
5. {
6. public class AdBanner : View
7. {
8. public enum Sizes { Standardbanner, LargeBanner, MediumRectangle, FullBanner, Leaderboard, SmartBannerPortrait }
9. public Sizes Size { get; set; }
10. public AdBanner()
11. {
12. this.BackgroundColor = Color.Accent;
13. }
14. }
15. }

2. In Android.
   In Android we have to add the following class to create a view and use it in PCL with CustomRenders concept, let us create it here with name AdBanner_Droid.cs
   
   C#
   
   1. using System;
   2. using AdMob;
   3. using Android.Gms.Ads;
   4. using Xamarin.Forms;
   5. using Xamarin.Forms.Platform.Android;
   6. using AdMob.CustomRenders;
   7. using AdMob.Droid.CustomRenders;
   8. using Android.Content;
   10. [assembly: ExportRenderer(typeof(AdBanner), typeof(AdBanner_Droid))]
   11. namespace AdMob.Droid.CustomRenders
   12. {
   13. public class AdBanner_Droid : ViewRenderer
   14. {
   15. Context context;
   16. public AdBanner_Droid(Context _context) : base(_context)
   17. {
   18. context = _context;
   19. }
   20. protected override void OnElementChanged(ElementChangedEventArgs<View> e)
   21. {
   22. base.OnElementChanged(e);
   23. if (e.OldElement == null)
   24. {
   25. var adView = new AdView(Context);
   26. switch ((Element as AdBanner).Size)
   27. {
   28. case AdBanner.Sizes.Standardbanner:
   29. adView.AdSize = AdSize.Banner;
   30. break;
   31. case AdBanner.Sizes.LargeBanner:
   32. adView.AdSize = AdSize.LargeBanner;
   33. break;
   34. case AdBanner.Sizes.MediumRectangle:
   35. adView.AdSize = AdSize.MediumRectangle;
   36. break;
   37. case AdBanner.Sizes.FullBanner:
   38. adView.AdSize = AdSize.FullBanner;
   39. break;
   40. case AdBanner.Sizes.Leaderboard:
   41. adView.AdSize = AdSize.Leaderboard;
   42. break;
   43. case AdBanner.Sizes.SmartBannerPortrait:
   44. adView.AdSize = AdSize.SmartBanner;
   45. break;
   46. default:
   47. adView.AdSize = AdSize.Banner;
   48. break;
   49. }
   50. // TODO: change this id to your admob id
   51. adView.AdUnitId = "Your AdMob id";
   52. var requestbuilder = new AdRequest.Builder();
   53. adView.LoadAd(requestbuilder.Build());
   54. SetNativeControl(adView);
   55. }
   56. }
   57. }
   58. }
   At this line adView.AdUnitId = "Your Ad Unit id";
   
   We have to place our AdMob Banner unit id.

3. In iOS,
   In iOS we have to add the following class to create a view and use it in PCL with CustomRenders concept, let us create it here with name AdBanner_iOS.cs
   
   C#
   
   1. using System;
   2. using AdMob.CustomRenders;
   3. using AdMob.iOS.CustomRenders;
   4. using CoreGraphics;
   5. using Google.MobileAds;
   6. using UIKit;
   7. using Xamarin.Forms;
   8. using Xamarin.Forms.Platform.iOS;
   9. //using GoogleAdMobAds;
   13. [assembly: ExportRenderer(typeof(AdBanner), typeof(AdBanner_iOS))]
   14. namespace AdMob.iOS.CustomRenders
   15. {
   16. public class AdBanner_iOS : ViewRenderer
   17. {
   18. protected override void OnElementChanged(ElementChangedEventArgs<View> e)
   19. {
   20. base.OnElementChanged(e);
   22. if (e.OldElement == null)
   23. {
   24. BannerView bannerView = null;
   26. switch ((Element as AdBanner).Size)
   27. {
   28. case AdBanner.Sizes.Standardbanner:
   29. bannerView = new BannerView(AdSizeCons.Banner, new CGPoint(0, 0));
   30. break;
   31. case AdBanner.Sizes.LargeBanner:
   32. bannerView = new BannerView(AdSizeCons.LargeBanner, new CGPoint(0, 0));
   33. break;
   34. case AdBanner.Sizes.MediumRectangle:
   35. bannerView = new BannerView(AdSizeCons.MediumRectangle, new CGPoint(0, 0));
   36. break;
   37. case AdBanner.Sizes.FullBanner:
   38. bannerView = new BannerView(AdSizeCons.FullBanner, new CGPoint(0, 0));
   39. break;
   40. case AdBanner.Sizes.Leaderboard:
   41. bannerView = new BannerView(AdSizeCons.Leaderboard, new CGPoint(0, 0));
   42. break;
   43. case AdBanner.Sizes.SmartBannerPortrait:
   44. bannerView = new BannerView(AdSizeCons.SmartBannerPortrait, new CGPoint(0, 0));
   45. break;
   46. default:
   47. bannerView = new BannerView(AdSizeCons.Banner, new CGPoint(0, 0));
   48. break;
   49. }
   51. // TODO: change this id to your admob id
   52. bannerView.AdUnitID = "Your AdMob Banner Ad Unit id";
   53. foreach (UIWindow uiWindow in UIApplication.SharedApplication.Windows)
   54. {
   55. if (uiWindow.RootViewController != null)
   56. {
   57. bannerView.RootViewController = uiWindow.RootViewController;
   58. }
   59. }
   60. var request = Request.GetDefaultRequest();
   61. bannerView.LoadRequest(request);
   62. SetNativeControl(bannerView);
   63. }
   65. }
   67. }
   68. }
   At this line adView.AdUnitId = "Your Ad Unit id";
   
   We have to place our AdMob Banner unit id.

Accessing Custom Renders to Display Banner Type Ads

Now, the only task remaining in our current tutorial is using the created custom renders in our code.

UI design code in XAML, for examlple in BannerAdPage.xaml

Here, we have to create a local object as in the following code and call the custom render as <local:AdBanner />

XAML

The Banner type ad is displayed at the bottom of the page, and this can be placed anywhere in the page. For this tutorial I have placed it at the lower/footer part of the page.

Creating Dependency Services to access Interstitial type Ads

1. In PCL
   Unlike Banner Ads, Interstitial Ads have only one kind of size; i.e., the full page of the application. We can show a popup to display our ad, but the popup is not created by us. It is done by the installed SDK itself. We only have to call the popup to appear when required, suppose on a button click here.
   
   Now in PCL add the following Interface, for example, assume name IAdInterstitial.cs
   
   C#
   
   1. using System;
   2. namespace AdMob.DependencyServices
   3. {
   4. public interface IAdInterstitial
   5. {
   6. void ShowAd();
   7. }
   8. }

2. In Android
   In Android add the following class , Assume AdInterstitial_Droid.cs
   
   C#
   
   1. using System;
   2. using AdMob.DependencyServices;
   3. using AdMob.Droid.DependencyServices;
   4. using Android.Gms.Ads;
   5. using Xamarin.Forms;
   7. [assembly: Dependency(typeof(AdInterstitial_Droid))]
   8. namespace AdMob.Droid.DependencyServices
   9. {
   10. public class AdInterstitial_Droid : IAdInterstitial
   11. {
   12. InterstitialAd interstitialAd;
   14. public AdInterstitial_Droid()
   15. {
   16. interstitialAd = new InterstitialAd(Android.App.Application.Context);
   18. // TODO: change this id to your admob id
   19. interstitialAd.AdUnitId = "Your AdMob id";
   20. LoadAd();
   21. }
   23. void LoadAd()
   24. {
   25. var requestbuilder = new AdRequest.Builder();
   26. interstitialAd.LoadAd(requestbuilder.Build());
   27. }
   29. public void ShowAd()
   30. {
   31. if (interstitialAd.IsLoaded)
   32. interstitialAd.Show();
   34. LoadAd();
   35. }
   36. }
   37. }
   At this line adView.AdUnitId = "Your Interstitial AdMob Unit id";
   
   We have to place our Your Interstitial AdMob Unit id.

3. In iOS
   In iOS add the following class, Assume AdInterstitial_iOS.cs
   
   C#
   
   1. using System;
   2. using AdMob.DependencyServices;
   3. using AdMob.iOS.DependencyServices;
   4. using Google.MobileAds;
   5. using UIKit;
   6. using Xamarin.Forms;
   8. [assembly: Dependency(typeof(AdInterstitial_iOS))]
   9. namespace AdMob.iOS.DependencyServices
   10. {
   11. public class AdInterstitial_iOS : IAdInterstitial
   12. {
   13. Interstitial interstitial;
   15. public AdInterstitial_iOS()
   16. {
   17. LoadAd();
   18. interstitial.ScreenDismissed += (s, e) => LoadAd();
   19. }
   21. void LoadAd()
   22. {
   23. // TODO: change this id to your admob id
   24. interstitial = new Interstitial("Your AdMob Interstitial Ad Unit id");
   26. var request = Request.GetDefaultRequest();
   27. request.TestDevices = new string[] {"Your Test Device ID", "GADSimulator" };
   28. interstitial.LoadRequest(request);
   29. }
   31. public void ShowAd()
   32. {
   33. if (interstitial.IsReady)
   34. {
   35. var viewController = GetVisibleViewController();
   36. interstitial.PresentFromRootViewController(viewController);
   37. }
   38. }
   39. UIViewController GetVisibleViewController()
   40. {
   41. var rootController = UIApplication.SharedApplication.KeyWindow.RootViewController;
   43. if (rootController.PresentedViewController == null)
   44. return rootController;
   46. if (rootController.PresentedViewController is UINavigationController)
   47. {
   48. return ((UINavigationController)rootController.PresentedViewController).VisibleViewController;
   49. }
   51. if (rootController.PresentedViewController is UITabBarController)
   52. {
   53. return ((UITabBarController)rootController.PresentedViewController).SelectedViewController;
   54. }
   56. return rootController.PresentedViewController;
   57. }
   58. }
   59. }
   At this line adView.AdUnitId = "Your Interstitial AdMob Unit id";
   
   We have to place our Your Interstitial AdMob Unit id.

Note
To generate Interstitial Ad in iOS for testing purposes we have to add the following line with an array of test device ID's or else you won't get an ad to display.

For either simulator or for the physical device to test in debug mode we have to submit the device ID, and the above-presented line is to be removed while submitting the app in release mode.

To get the Device Id

Accessing Dependency Services to Display Interstitial type Ads :

UI design code in XAML, for example, in "BannerAdPage.xaml and we have to open the Interstitial Ad on button Click. So the button click event is handled in the backed page of the UI created for example in "BannerAdPage.xaml.cs".

In BannerAdPage.xaml

XAML

In BannerAdPage.xaml.cs

C#

To open the Interstitial Ad you have to click the button.

Result - Banner Type Ad

Interstitial Type Ad

Conclusion

This is how to create an ad in Xamarin.Forms using AdMob by Google.

References