IU personalizada con el SDK de IMA para Android

En esta guía, se muestra cómo implementar tu propia IU personalizada con el SDK de IMA para Android. Para ello, debes inhabilitar la IU predeterminada, configurar una nueva IU personalizada y, luego, propagar la IU nueva con la información del anuncio obtenida del SDK.

Cómo inhabilitar la IU del anuncio

Para mostrar una IU personalizada, primero debes inhabilitar la IU del anuncio predeterminada. Para ello, llama a AdsRenderingSettings.setDisableUi() y, luego, pasa AdsRenderingSettings a AdsManager.init():

MyActivity.java

ImaSdkFactory mSdkFactory = ImaSdkFactory.getInstance();
AdsManager mAdsManager;

@Override
public void onAdsManagerLoaded(AdsManagerLoadedEvent adsManagerLoadedEvent) {
    mAdsManager = adsManagerLoadedEvent.getAdsManager();

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

Luego, cada vez que debas decidir si mostrar tu IU personalizada, verifica si hay un anuncio y llama a Ad.isUiDisabled() para comprobar que se haya inhabilitado la IU del anuncio predeterminada.

Cómo mostrar una IU personalizada

Una vez inhabilitada la IU predeterminada, el siguiente paso es mostrar una IU de anuncio personalizada. En este ejemplo, agrega un RelativeLayout nuevo al diseño existente del reproductor de video y, luego, muestra este diseño cuando se reproduce un anuncio y ocúltalo cuando no se reproducen anuncios.

Agrega lo siguiente al archivo de diseño del fragmento:

fragment_video.xml

<com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer
    android:id="@+id/sampleVideoPlayer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<RelativeLayout
        android:id="@+id/customUi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible">
                <TextView
                    android:id="@+id/adCounter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_green_light"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentLeft="true"
                    android:text="@string/ad_counter" />
                <Button
                  android:id="@+id/learnMoreButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentTop="true"
                  android:text="@string/learn_more"
                  android:layout_alignParentRight="true" />
                <Button
                  android:id="@+id/skipButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:text="@string/skip_ad"
                  android:enabled="false"
                  android:layout_alignParentRight="true" />
</RelativeLayout>

Luego, agrega el código para usar la IU personalizada a Activity. Para actualizar la IU, crea un temporizador Handler y un Runnable que se ejecute en él.

MyActivity.java

// The view containing the custom UI.
private View mCustomUi;
// The timer handler.
private Handler mTimerHandler = new Handler();

// The Runnable that runs your custom UI update loop.
private Runnable mTimerRunnable = new Runnable() {
    @Override
    public void run() {
        updateCustomUi();
        mTimerHandler.postDelayed(this, 500);
    }
};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
    mCustomUi = rootView.findViewById(R.id.customUi);
    mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);
}

@Override
public void onAdEvent(AdEvent adEvent) {
    ...
    switch (adEvent.getType()) {
        ...
            case STARTED:
            // Start your update loop.
            mTimerHandler.post(mTimerRunnable);
            Break;
                ...
        case COMPLETED:
            mCustomUi.setVisibility(View.INVISIBLE);
            mTimerHandler.removeCallbacks(mTimerRunnable);
            ...
    }
}

@Override
public void onPause() {
...
    // Stop ad UI update loop.
    mTimerHandler.removeCallbacks(mTimerRunnable);
}

@Override
Public void onResume() {
...
    // Start ad UI update loop.
    mTimerHandler.post(mTimerRunnable);
}

Contador de anuncios y botón para omitir

Ahora, define la función updateCustomUi() para propagar la IU con información del anuncio. Los detalles varían según el formato del anuncio, pero, por lo general, se incluye el contador de anuncios y un botón o contador de omisión si el anuncio se puede omitir. Agrega lo siguiente:

MyActivity.java

private void updateCustomUi() {
    // Runs from the update loop to update the custom UI.
    Ad ad = mAdsManager.getCurrentAd();
    if (ad != null && ad.isUiDisabled()) {
        // Show the UI.
        Log.i(LOGTAG, "UI disabled, show custom UI!");
        AdPodInfo podInfo = ad.getAdPodInfo();
        VideoProgressUpdate update = mAdsManager.getAdProgress();
        SimpleDateFormat format = new SimpleDateFormat("mm:ss", Locale.US);

        // Handle ad counter.
        String adProgress = format.format(
                (update.getDuration() - update.getCurrentTime()) * 1000);
        String adUiString = String.format(
                Locale.US, "Ad %d of %d (%s)", podInfo.getAdPosition(),
                podInfo.getTotalAds(), adProgress);
        mAdCounterUi.setText(adUiString);

        // Handle skippable ads.
        if (ad.isSkippable()) {
            if (update.getCurrentTime() >= ad.getSkipTimeOffset()) {
                // Allow skipping.
                mSkipButton.setText(getString(R.string.skip_ad));
                mSkipButton.setEnabled(true);
            } else {
                String skipString = String.format(
                        Locale.US, "You can skip this ad in %d",
                        (int) (ad.getSkipTimeOffset() -
                                update.getCurrentTime()));
                mSkipButton.setText(skipString);
                mSkipButton.setEnabled(false);
            }
            mSkipButton.setVisibility(View.VISIBLE);
        } else {
            mSkipButton.setVisibility(View.INVISIBLE);
        }
        mCustomUi.setVisibility(View.VISIBLE);
        mCustomUi.bringToFront();
    } else {
        // Hide the UI.
        mCustomUi.setVisibility(View.INVISIBLE);
        mTimerHandler.removeCallbacks(mTimerRunnable);
    }
}

En el código anterior, después de verificar si hay un anuncio y llamar a Ad.isUiDisabled() para verificar que se haya inhabilitado la IU del anuncio predeterminada, llama a Ad.getAdPodInfo() y AdsManager.getAdProgress() para encontrar la posición del anuncio en el grupo y su progreso. En el caso de los anuncios que se pueden omitir, muestra un contador de omisión si aún no puedes omitir el anuncio. De lo contrario, muestra un botón para omitir. A continuación, se incluye un resumen de la información común de los anuncios y las llamadas asociadas:

Información Llamar
Anuncio actual en el grupo Ad.getAdPodInfo().getAdPosition()
Total de anuncios en el grupo Ad.getPodInfo().getTotalAds()
Indica si el anuncio se puede omitir Ad.isSkippable()
Segundos hasta que se puede omitir el anuncio Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Segundos restantes del anuncio (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Si haces clic en el botón Omitir anuncio, se debería omitir el anuncio, así que configúralo además del botón Más información:

MyActivity.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
mCustomUi = rootView.findViewById(R.id.customUi);
mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);

// Set up the 'learn more' button handler for the custom UI.
mLearnMoreButton = (Button) rootView.findViewById(R.id.learnMoreButton);
mLearnMoreButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Only works if the UI has been disabled.
        mAdsManager.clicked();
    }
});

// Set up the skip button handler for the custom UI.
mSkipButton = (Button) rootView.findViewById(R.id.skipButton);
mSkipButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        mAdsManager.skip();
    }
});

La IU debe estar inhabilitada para que AdsManager.clicked() funcione.

Solución de problemas

¿Tienes una etiqueta de muestra habilitada para inhabilitar la IU del anuncio?
Puedes copiar la URL de esta etiqueta de muestra y pegarla en tu implementación de IMA.
No puedo inhabilitar la IU predeterminada.
Asegúrate de llamar a AdsRenderingSettings.setDisableUi() y pasarlo a AdsManager. Verifica que Ad.isUiDisabled() muestre true. Además, tu red debe estar habilitada en Ad Manager para inhabilitar una IU de anuncios. Si estás habilitado, tu VAST contiene un Extension que se ve de la siguiente manera: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Si los problemas persisten, comunícate con tu administrador de cuentas para confirmar que estás habilitado. Algunos tipos de anuncios requieren una IU específica. Estos anuncios se muestran con un valor <UiHideable> de 0. Si esto ocurre, tu equipo de publicación deberá realizar cambios para verificar que no se publiquen estos tipos de anuncios.