Interface personalizada com o SDK do IMA para Android

Este guia mostra como implementar sua própria interface personalizada usando o SDK do IMA para Android. Para fazer isso, desative a interface padrão, configure uma nova interface personalizada e preencha a nova interface com informações de anúncios obtidas do SDK.

Desativar a interface do anúncio

Para mostrar uma IU personalizada, primeiro desative a IU de anúncio padrão. Para fazer isso, chame AdsRenderingSettings.setDisableUi() e transmita o AdsRenderingSettings para 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);
}

Depois, sempre que precisar decidir se vai mostrar a IU personalizada, verifique se há um anúncio e chame Ad.isUiDisabled() para verificar se a IU de anúncio padrão foi desativada.

Mostrar a interface personalizada

Depois que a interface padrão for desativada, a próxima etapa será mostrar uma interface de anúncio personalizada. Para este exemplo, adicione uma nova RelativeLayout ao layout do seu player de vídeo e mostre esse layout quando um anúncio estiver sendo reproduzido e oculte-o quando nenhum anúncio estiver sendo reproduzido.

Adicione o seguinte ao arquivo de layout do 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>

Em seguida, adicione o código para usar a interface personalizada ao Activity. Para atualizar a interface, crie um timer Handler e um Runnable que seja executado nele.

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 anúncios e botão de pular

Agora, defina a função updateCustomUi() para preencher a interface com informações do anúncio. Os detalhes variam de acordo com o formato do anúncio, mas geralmente você inclui o contador de anúncios e um botão ou contador de saltos, se o anúncio for pulável. Adicione o seguinte:

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);
    }
}

No código anterior, depois de verificar se há um anúncio e chamar Ad.isUiDisabled() para conferir se a interface de anúncio padrão foi desativada, chame Ad.getAdPodInfo() e AdsManager.getAdProgress() para encontrar a posição do anúncio no conjunto e o progresso dele. Para anúncios puláveis, mostre um contador de saltos se você ainda não puder pular o anúncio. Caso contrário, mostre um botão de pular. Confira um resumo de informações comuns sobre anúncios e ligações associadas:

Informações Ligar
Anúncio atual no conjunto Ad.getAdPodInfo().getAdPosition()
Total de anúncios no conjunto Ad.getPodInfo().getTotalAds()
O anúncio é pulável Ad.isSkippable()
Segundos até que o anúncio possa ser pulado Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Segundos restantes no anúncio (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Clique no botão Skip Ad para pular o anúncio. Configure esse botão e o botão Learn More:

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();
    }
});

A interface precisa estar desativada para que AdsManager.clicked() funcione.

Solução de problemas

Você tem uma tag de exemplo ativada para desativar a interface do anúncio?
Você pode copiar o URL desta tag de exemplo e colá-lo na sua implementação do IMA.
Não consigo desativar a interface padrão.
Verifique se você chamou AdsRenderingSettings.setDisableUi() e o transmitiu para AdsManager. Confira se Ad.isUiDisabled() retorna true. Além disso, a rede precisa estar ativada no Ad Manager para desativar uma interface de anúncios. Se você tiver ativado, o VAST vai conter um Extension parecido com este: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Se você ainda tiver problemas, verifique com seu gerente de contas se você tem permissão. Alguns tipos de anúncios exigem uma interface específica. Esses anúncios são retornados com um valor <UiHideable> de 0. Se isso acontecer, sua equipe de veiculação vai precisar fazer mudanças para verificar se esses tipos de anúncios não são veiculados.