AdMob - Banner Ad in Xamarin Forms
AdMob - Banner Ad in Xamarin Forms
Subject :
Hello Everyone, I am going to show how to display Google AdMob Ads in Android and iOS applications for CSharp - Xamarin Mobile Development.
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.
Requirements :
We need “App Id” and “Unit Id”, which are created in “AdMob by Google” available in this website: https://www.google.com/admob/ .
To create these follow the tutorial available
Steps in Brief :
1) Adding required packages.
2) Changes to be done in Manifest.xml file(only for Android)
3) Creating Custom Renders to access Ads.
4) Accessing the Custom Renders in code to display Ads.
Steps in Detail :
1) 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.
a) For Android :
Add “Xamarin.GooglePlayServices.Ads” package.
b) For iOS :
Add “Xamarin.Firebase.iOS.AdMob” Package
2) Changes to be done in Manifest.xml file :
Add the following lines in the Manifest.xml .
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.adsdemo">
<uses-sdk android:minSdkVersion="15" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:label="AdsDemo.Droid">
<activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" />
</application>
</manifest>
3) Creating Custom Renders to access Ads :
a) In PCL :
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
|
While showing the Banner ad we have to set the size also.
Now in PCL add the following class with name AdBanner.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace AdsDemo
{
public class AdBanner : View
{
public enum Sizes { Standardbanner, LargeBanner, MediumRectangle, FullBanner, Leaderboard, SmartBannerPortrait }
public Sizes Size { get; set; }
}
}
b) In Android :
In Android add the following class with name AdBanner_Droid.cs
using System;
using AdsDemo;
using Android.Gms.Ads;
using AdsDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(AdBanner), typeof(AdBanner_Droid))]
namespace AdsDemo.Droid
{
public class AdBanner_Droid : ViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
var adView = new AdView(Context);
switch ((Element as AdBanner).Size)
{
case AdBanner.Sizes.Standardbanner:
adView.AdSize = AdSize.Banner;
break;
case AdBanner.Sizes.LargeBanner:
adView.AdSize = AdSize.LargeBanner;
break;
case AdBanner.Sizes.MediumRectangle:
adView.AdSize = AdSize.MediumRectangle;
break;
case AdBanner.Sizes.FullBanner:
adView.AdSize = AdSize.FullBanner;
break;
case AdBanner.Sizes.Leaderboard:
adView.AdSize = AdSize.Leaderboard;
break;
case AdBanner.Sizes.SmartBannerPortrait:
adView.AdSize = AdSize.SmartBanner;
break;
default:
adView.AdSize = AdSize.Banner;
break;
}
// TODO: change this id to your admob id
adView.AdUnitId = "Your AdMob id";
var requestbuilder = new AdRequest.Builder();
adView.LoadAd(requestbuilder.Build());
SetNativeControl(adView);
}
}
}
}
At this line adView.AdUnitId = "Your AdMob id";
We have to place our AdMob id.
c) In iOS :
In iOS add the following class with name AdBanner_iOS.cs
using System;
using CoreGraphics;
using Google.MobileAds;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using AdsDemo;
using AdsDemo.iOS;
[assembly: ExportRenderer(typeof(AdBanner), typeof(AdBanner_iOS))]
namespace AdsDemo.iOS
{
public class AdBanner_iOS : ViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
BannerView bannerView = null;
switch ((Element as AdBanner).Size)
{
case AdBanner.Sizes.Standardbanner:
bannerView = new BannerView(AdSizeCons.Banner, new CGPoint(0, 0));
break;
case AdBanner.Sizes.LargeBanner:
bannerView = new BannerView(AdSizeCons.LargeBanner, new CGPoint(0, 0));
break;
case AdBanner.Sizes.MediumRectangle:
bannerView = new BannerView(AdSizeCons.MediumRectangle, new CGPoint(0, 0));
break;
case AdBanner.Sizes.FullBanner:
bannerView = new BannerView(AdSizeCons.FullBanner, new CGPoint(0, 0));
break;
case AdBanner.Sizes.Leaderboard:
bannerView = new BannerView(AdSizeCons.Leaderboard, new CGPoint(0, 0));
break;
case AdBanner.Sizes.SmartBannerPortrait:
bannerView = new BannerView(AdSizeCons.SmartBannerPortrait, new CGPoint(0, 0));
break;
default:
bannerView = new BannerView(AdSizeCons.Banner, new CGPoint(0, 0));
break;
}
// TODO: change this id to your admob id
bannerView.AdUnitID = "Your AdMob id";
foreach (UIWindow uiWindow in UIApplication.SharedApplication.Windows)
{
if (uiWindow.RootViewController != null)
{
bannerView.RootViewController = uiWindow.RootViewController;
}
}
var request = Request.GetDefaultRequest();
bannerView.LoadRequest(request);
SetNativeControl(bannerView);
}
}
}
}
At this line adView.AdUnitId = "Your AdMob id";
We have to place our AdMob id.
4) Accessing Custom Renders to Display Ads :
Now the only task remaining in our current tutorial is that using the created custom renders in our code.
If using XAML
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:AdsDemo;assembly=AdsDemo"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AdsDemo.BannerPage"
BackgroundColor="Gray">
<StackLayout x:Name="stackLayout" VerticalOptions="FillAndExpand" Padding="0,40,0,0">
<Label Text="Banner Advertisement" HorizontalOptions="CenterAndExpand" TextColor="White" FontSize="25" />
<local:AdBanner Size="Standardbanner" VerticalOptions="EndAndExpand"/>
</StackLayout>
</ContentPage>
If Using C#
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace AdsDemo
{
public partial class MyPage : ContentPage
{
public MyPage()
{
InitializeComponent();
var label = new Label()
{
Text = "Banner Advertisement"
};
var adBanner = new AdBanner()
{
VerticalOptions = LayoutOptions.EndAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand
};
adBanner.Size = AdBanner.Sizes.MediumRectangle;
var holder = new StackLayout()
{
Children = { label, adBanner },
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand
};
Content = holder;
}
}
}
Result :
Conclusion :
This is how to create a Banner Ad in Xamarin.Forms using AdMob by Google. In our next tutorial let us discuss about creating a Interstitial Ad.
References :
For more knowledge about Banner Ads visit the following links :
To learn How to create API keys for Your Application in AdMob by Google visit :
Or
Thank you.
----
With Regards,
Venkata Siva Prasad Reddy Pulagam,
Email: pvsivapr@gmail.com.
Comments
Post a Comment