How to customize Ad UI for Bitmovin Android SDK?

Knowledge
, , , ,
1

Bitmovin Android player SDK integrates Google IMA3 SDK for seamless playback of client side advertisements. The UI for ad playback is managed by the IMA3 SDK with a few options for customizations. This post demonstrates the available Ad UI customization possibilities.

Default IMA Ad UI
Below is a screenshot from playback of client side advertisements using BasicAdsKotlin sample application. The main UI elements in default IMA Ad UI (annotated in below screenshot) are

  • Ad attribution text which is the Ad in the example
  • Ad countdown timer which is countdown timer for Ad playback
  • Ad skip button. This appears for skippable Ads only. If the Ad is skippable or not is specified in the VAST Ad manifest.
  • Ad click through(Learn More) button. Tapping this results in advertisers page open in a browser tab.

BasicAdsKotlin_IMAAdUi
BasicAdsKotlin_IMAAdUi1080×2400 332 KB

Ad UI Customizations

There are 3 main Ad UI customizations allowed by IMA SDK which are also available through Bitmovin player SDK

1. Localization : The most commonly required customization is the ability to localize the text in Ad UI. This can be done by setting ImaSdkSettings.language property through AdvertisingConfig.beforeInitialization callback. The list of language codes that can be set can be found in IMA SDK documentation

Example code snippet

        val adSchedule = listOf(preRoll, midRoll, postRoll)
        val advertisingConfig = AdvertisingConfig(schedule = adSchedule)
        advertisingConfig.beforeInitialization = BeforeInitializationCallback { imaSdkSettings -> imaSdkSettings.language = "de_at" }

        // Create a new PlayerConfig containing the advertising config. Ads in the AdvertisingConfig will be scheduled automatically.
        val playerConfig = PlayerConfig(advertisingConfig = advertisingConfig)

Ad UI screenshot with language=de_at (German (Austria))

BasicAdsKotlin_IMAAdUi_Localization
BasicAdsKotlin_IMAAdUi_Localization1080×2400 201 KB

2. Disabling Ad countdown timer : Ad countdown timer element can be disabled using AdvertisingConfig.imaUiElements configuration.

Example code snippet

        val imaUiElements = listOf( ImaUiElement.AdAttribution )
        val adSchedule = listOf(preRoll, midRoll, postRoll)
        val advertisingConfig = AdvertisingConfig(schedule = adSchedule, imaUiElements=imaUiElements)

Ad UI screenshot with ad countdown timer disabled

BasicAdsKotlin_IMAAdUi_NoCountdown
BasicAdsKotlin_IMAAdUi_NoCountdown1080×2400 224 KB

3. Disabling Ad attributions : Ad attribution element can be disabled by passing an empty list to AdvertisingConfig.imaUiElements configuration.

Example code snippet

        val imaUiElements = emptyList<ImaUiElement>()
        val adSchedule = listOf(preRoll, midRoll, postRoll)
        val advertisingConfig = AdvertisingConfig(schedule = adSchedule, imaUiElements=imaUiElements)

Ad UI screenshot with Ad attribution disabled

BasicAdsKotlin_IMAAdUi_NoAdAttribution
BasicAdsKotlin_IMAAdUi_NoAdAttribution1080×2400 211 KB

Please reach out to us if you have further questions on this topic.

If you don’t already have a Bitmovin account, sign up for a free trial on our website to checkout this and other cool features of Bitmovin player SDKs.

3 Likes