Banner ads provide a great way to add an additional revenue stream with minimal impact to the flow and usage of your app.
The MobileFuse SDK also supports delivery of expandable rich-media banner ads by default, which are more interactive and engaging than standard banner placements.
Prerequisites
- Follow the initial integration guide: Integrate the MobileFuse SDK for Android
- Ensure that you have a Banner Ad Placement ID to use.
Display a banner ad in your app
A banner ad is implemented into your app as a UI View - you therefore have two options for implementation - either you can adjust your applications layout XML to include a position for your banner ad, or you can programmatically create, add, and remove the banner ad view as needed.
Note: Ensure that you adjust the user interface of your app to account for the positioning of the banner. You should leave a margin between the displayed banner ad and your app UI to avoid potential mis-clicks on the ad creative.
Option 1. Create the banner ad in your layout XML
Option 2. Create the banner ad programatically
Option 1: Create a banner ad in your layout XML
1. In your Activity’s XML layout file, add a banner view:
<com.mobilefuse.sdk.MobileFuseBannerAd app:mobilefusePlacementId="[INSERT PLACEMENT ID HERE]" app:mobilefuseAdSize="BANNER_320x50" android:id="@+id/mf_banner_ad" android:layout_width="match_parent" android:layout_height="50dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />
Ensure that you replace <YOUR BANNER PLACEMENT ID>
with a valid banner placement ID.
Note: Valid banner ad sizes are:
BANNER_320x50
BANNER_300x50
BANNER_300x250
BANNER_728x90
2. Once you have initialized the MobileFuse SDK, request that the banner ad is loaded into the view. A good place to do this is within the onInitSuccess
callback, but you also may want to call it when sub-activities are created:
MobileFuseBannerAd banner = findViewById(R.id.mf_banner_ad); banner.loadAd();
Option 2: Create the Banner Ad programmatically
Once the MobileFuse SDK has initialized, create the MobileFuseBannerAd
instance and add it to your activity’s view hierarchy:
String bannerPlacementId = "000000"; MobileFuseBannerAd banner = new MobileFuseBannerAd(this, bannerPlacementId, BannerAd.AdSize.BANNER_728x90); ViewGroup bannerContainer = findViewById(R.id.adContainer); bannerContainer.addView(banner); banner.loadAd();
Listening for event callbacks
Optionally, you can create a BannerAdListener
to receive events during the banner ad’s lifecycle.
banner.setListener(new MobileFuseBannerAd.Listener() { @Override public void onAdExpanded() { // Called when an 'expandable banner' placement is expanded to full-screen } @Override public void onAdCollapsed() { // Called when an 'expandable banner' placement is collapsed back from full-screen } @Override public void onAdLoaded() { // Called when a banner ad is successfully loaded } @Override public void onAdNotFilled() { // The ad server responded with no fill (no ad available) } @Override public void onAdRendered() { // The banner has been rendered and displayed to the user } @Override public void onAdClicked() { // Triggered when the user clicks on the banner ad } @Override public void onAdExpired() { // The banner ad has expired and a new ad should be loaded from the server } @Override public void onAdError(AdError adError) { // An error occured - examine the adError argument for further details } });
Advanced: Configure Ad Rotation
Banner ads can be set to rotate on a pre-set time interval. This is useful to increase the number of banner impressions that will be shown to your users. By default banner ad rotation is disabled.
Example: Configure ad to refresh every 60 seconds:
banner.setAutorefreshEnabled(true); banner.setAutorefreshInterval(60);
Example: Manually handle refreshing of the ad, for example you may want to fetch a new ad when a view is changed within your app:
// On view change: banner.forceRefresh();
Advanced: Set the ad background color
When the ad creative doesn’t fill the entire view area - for example when the view spans the entire width of the screen - the ad will sometimes be centred within the view. You can configure the background color of the view behind the ad to match the style of your app - or you can set it to transparent. The default behaviour is for the view to be transparent.
Setting the background in XML Layout:
Simply set the android:background
attribute in the MobileFuseBannerAd tag in your Layout XML. The MobileFuse SDK exposes some useful colors to your project, but you can also use any theme or values color.
<com.mobilefuse.sdk.MobileFuseBannerAd //... android:background="@color/mobilefuse_transparent" />
Also available: mobilefuse_black
, mobilefuse_white
and mobilefuse_default_banner_bg
Setting the background programmatically:
You can also set the background color of the banner view programmatically:
// Set to a specific argb color: bannerAd.setBackgroundColor(0xFFFF0000); // Use a resource color: bannerAd.setBackgroundResource(R.color.purple_200); // Use a drawable resource/image: bannerAd.setBackgroundResource(R.drawable.example_drawable_resource); // Advanced - retrieve app theme color: TypedValue resolvedThemeColor = new TypedValue(); getTheme().resolveAttribute(R.attr.colorSecondary, resolvedThemeColor, true); bannerAd.setBackgroundResource(resolvedThemeColor.resourceId);