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.
Info |
---|
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:
Code Block |
---|
|
<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.
Info |
---|
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:
Code Block |
---|
|
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:
Code Block |
---|
|
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.
Code Block |
---|
|
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:
Code Block |
---|
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:
Code Block |
---|
// 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.
Code Block |
---|
|
<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:
Code Block |
---|
|
// 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); |
Example Code
Java
Expand |
---|
|
Code Block |
---|
| <?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.mobilefuse.sdk.MobileFuseBannerAd
android:id="@+id/mf_banner_ad"
android:layout_width="match_parent"
android:layout_height="50dp"
app:mobilefuseAdSize="BANNER_320x50"
app:mobilefusePlacementId="418310"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout> |
|
Expand |
---|
|
Code Block |
---|
| import android.app.Activity;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.Toast;
import com.mobilefuse.sdk.MobileFuse;
import com.mobilefuse.sdk.MobileFuseBannerAd;
import com.mobilefuse.sdk.SdkInitListener;
import com.mobilefuse.sdk.privacy.MobileFusePrivacyPreferences;
public class MainActivity extends Activity {
final int publisherId = 0;
final int appId = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the user's privacy preferences before init:
MobileFuse.setPrivacyPreferences(
new MobileFusePrivacyPreferences.Builder()
.setSubjectToCoppa(false)
.setUsPrivacyConsentString("1YNN")
.build()
);
Activity activity = this;
MobileFuse.init(activity, publisherId, appId, new SdkInitListener() {
@Override
public void onInitSuccess() {
Toast.makeText(activity, "SDK Init Success", Toast.LENGTH_SHORT).show();
// Load our banner ad instance:
MobileFuseBannerAd bannerAd = findViewById(R.id.mf_banner_ad);
bannerAd.loadAd();
// Set up auto-refresh each minute:
bannerAd.setAutorefreshEnabled(true);
bannerAd.setAutorefreshInterval(60);
// Set our background color to match the app theme:
TypedValue resolvedThemeColor = new TypedValue();
getTheme().resolveAttribute(R.attr.colorPrimary, resolvedThemeColor, true);
bannerAd.setBackgroundResource(resolvedThemeColor.resourceId);
}
@Override
public void onInitError() {
Toast.makeText(activity, "SDK Init Failed", Toast.LENGTH_SHORT).show();
}
});
}
} |
|
Kotlin
Expand |
---|
|
Code Block |
---|
| <?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.mobilefuse.sdk.MobileFuseBannerAd
android:id="@+id/mf_banner_ad"
android:layout_width="match_parent"
android:layout_height="50dp"
app:mobilefuseAdSize="BANNER_320x50"
app:mobilefusePlacementId="418310"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout> |
|
...
...
...
This page has moved to our new documentation:
...