Interface utilisateur personnalisée avec le SDK IMA pour Android

Ce guide explique comment implémenter votre propre UI personnalisée à l'aide du SDK IMA pour Android. Pour ce faire, vous devez désactiver l'UI par défaut, configurer une nouvelle UI personnalisée, puis renseigner la nouvelle UI avec les informations sur les annonces obtenues à partir du SDK.

Désactiver l'UI des annonces

Pour afficher une UI personnalisée, vous devez d'abord désactiver l'UI d'annonce par défaut. Pour ce faire, appelez AdsRenderingSettings.setDisableUi(), puis transmettez AdsRenderingSettings à 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);
}

Par la suite, chaque fois que vous devez décider d'afficher ou non votre UI personnalisée, vérifiez si une annonce est diffusée et appelez Ad.isUiDisabled() pour vérifier que l'UI d'annonce par défaut a été désactivée.

Afficher l'UI personnalisée

Une fois l'UI par défaut désactivée, l'étape suivante consiste à afficher une UI d'annonce personnalisée. Pour cet exemple, ajoutez un élément RelativeLayout à la mise en page de votre lecteur vidéo existant, puis affichez cette mise en page lorsqu'une annonce est diffusée et masquez-la lorsqu'aucune annonce n'est diffusée.

Ajoutez ce qui suit au fichier de mise en page du fragment:

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>

Ajoutez ensuite le code permettant d'utiliser l'UI personnalisée à Activity. Pour mettre à jour l'UI, créez un minuteur Handler et un Runnable qui s'exécute dessus.

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

Compteur d'annonces et bouton d'ignorer

Définissez maintenant la fonction updateCustomUi() pour renseigner l'UI avec des informations sur les annonces. Les détails varient selon le format de l'annonce, mais vous devez généralement inclure le compteur d'annonces et un bouton ou un compteur de désactivation si l'annonce est désactivable. Ajoutez les éléments suivants:

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

Dans le code précédent, après avoir vérifié si une annonce est présente et appelé Ad.isUiDisabled() pour vérifier que l'UI de l'annonce par défaut a été désactivée, appelez Ad.getAdPodInfo() et AdsManager.getAdProgress() pour trouver la position de l'annonce dans le bloc et sa progression. Pour les annonces désactivables, affichez un compteur d'inactivité si vous ne pouvez pas encore ignorer l'annonce. Sinon, affichez un bouton "Ignorer". Voici un récapitulatif des informations d'annonce courantes et des appels associés:

Informations Appeler
Annonce actuelle dans la série Ad.getAdPodInfo().getAdPosition()
Nombre total d'annonces dans la série Ad.getPodInfo().getTotalAds()
L'annonce est-elle désactivable ? Ad.isSkippable()
Secondes avant que l'annonce puisse être ignorée Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Secondes restantes dans l'annonce (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Le clic sur le bouton Ignorer l'annonce doit permettre d'ignorer l'annonce. Configurez-le en plus du bouton En savoir plus:

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

L'UI doit être désactivée pour que AdsManager.clicked() fonctionne.

Dépannage

Avez-vous un exemple de balise activée pour désactiver l'UI des annonces ?
Vous pouvez copier l'URL de cet exemple de balise et la coller dans votre implémentation IMA.
Je ne parviens pas à désactiver l'UI par défaut.
Vérifiez que vous appelez AdsRenderingSettings.setDisableUi() et que vous le transmettez à AdsManager. Vérifiez que Ad.isUiDisabled() renvoie true. De plus, votre réseau doit être activé dans Ad Manager pour pouvoir désactiver une UI d'annonce. Si vous êtes éligible, votre VAST contient un Extension qui se présente comme suit: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Si le problème persiste, contactez votre responsable de compte pour vérifier que vous êtes bien activé. Certains types d'annonces nécessitent une UI spécifique. Ces annonces renvoient une valeur <UiHideable> de 0. Si vous rencontrez ce problème, votre équipe de gestion du trafic devra apporter des modifications pour vérifier que ces types d'annonces ne sont pas diffusés.