Implementing Custom UI for IMA video ads

[objectiveCarlo]

Hello is there a way to do this: https://developers.google.com/interactive-media-ads/docs/sdks/android/client-side/custom-ui

Basically tell AdsRenderingSettings to disableUI?

AdsRenderingSettings settings = mSdkFactory.createAdsRenderingSettings();
settings.setDisableUi(true);
mAdsManager.init(settings);

We are planning to customize the controls for the IMA ads container so we want to disable the default ad container of the IMA SDK Thank you

[tonihei]

Thanks for the question. We don't currently support this, but we can use this issue to track the feature request.

Looking at the IMA documentation it seems to me that you not only need a way to call settings.setDisableUI, but you'd also need to access to IMA classes like AdPodInfo and VideoProgressUpdate via a callback to display the right information in your ads container. Is that correct?

[objectiveCarlo]

Hello thank you for replying to my question.

Right now we are getting the AdPodInfo from AdEventListener. From here we can get the duration of the AdPodInfo. For the progress we are getting from exoplayer.

So actually right now we only need to call settings.setDisableUI. We tried

Im thinking right now I need to create and implement our own AdsLoader class to do this before you guys update it in this main project. Do let me know if there are simpler ways to do this currently this will help us a lot.

By the way we are using version 2.14.2

We follow the IMA sample code and covert it to use the AdEvent class

 fun updateAdCustomUI() {
        // Runs from the update loop to update the custom UI.
        val adEvent = adEventDatasource.getCurrentAdEvent() ?: return
        val ad: Ad = adEvent.ad
        if (ad.isUiDisabled) {
            val adCurrentTime = adEventDatasource.getCurrentAdProgressMS()
            val adCurrentTimeSeconds = adCurrentTime/1000
            // Show the UI.
            val podInfo = ad.adPodInfo
            val adCurrentDuration = ad.duration * 1000

            // Handle ad counter.

            val formatter = SimpleDateFormat("mm:ss", Locale.US)
            formatter.timeZone = TimeZone.getTimeZone("UTC");
            val left = (adCurrentDuration - adCurrentTime)
            val adProgress: String = formatter.format(left)
            val adUiString: String = java.lang.String.format(
                Locale.US, "Ad %d of %d (%s)", podInfo.adPosition,
                podInfo.totalAds, adProgress
            )
            counterTextView.text = adUiString

            // Handle skippable ads.
            if (ad.isSkippable) {
                if (adCurrentTimeSeconds >= ad.skipTimeOffset) {
                    // Allow skipping.
                    skipButton.text = "Skip Ad"
                    skipButton.isEnabled = true
                    skipButton.requestFocus()
                } else {
                    val skipString: String = java.lang.String.format(
                        Locale.US, "You can skip this ad in %d",
                        (ad.skipTimeOffset -
                                adCurrentTimeSeconds).toInt()
                    )
                    skipButton.text = skipString
                    skipButton.isEnabled = false
                }
                skipButton.visibility = View.VISIBLE
        
            } else {
                skipButton.visibility = View.INVISIBLE
    
            }
            container.visibility = View.VISIBLE
        }
    else {
            // Hide the UI.
            container.visibility = View.GONE
        }
    }

[sebastiangansca]

@objectiveCarlo hi,

Can you please share a bit more info on how did you used the above method to add customUI for ad and how did you managed to handle the skip action?

Thanks

[objectiveCarlo]

@sebastiangansca sorry for the later reply, here I wrote an article: https://medium.com/@reCL/exoplayer-customised-advertisement-ui-98afd346c47c

[krishna-saini]

Hi is there any update how to prevent default IMA UI layer via Exo player.

currently we are doing this making visibility of playerview as INVISIBLE on ad_loaded event but because of that, our viewability metrics are getting impacted as OMSDK is sending 0 value of pixelInView attribute in GeometryChange event.