Interfaccia utente personalizzata con l'SDK IMA per Android

Questa guida mostra come implementare la tua UI personalizzata utilizzando l'SDK IMA per Android. Per farlo, devi disattivare l'interfaccia utente predefinita, configurare una nuova interfaccia utente personalizzata e poi compilarla con le informazioni sugli annunci ottenute dall'SDK.

Disattivare l'interfaccia utente dell'annuncio

Per mostrare un'interfaccia utente personalizzata, devi prima disattivare l'interfaccia utente predefinita dell'annuncio. Per farlo, chiama AdsRenderingSettings.setDisableUi() e poi passa 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);
}

In seguito, ogni volta che devi decidere se mostrare l'interfaccia utente personalizzata, controlla se è presente un annuncio e chiama Ad.isUiDisabled() per verificare che l'interfaccia utente dell'annuncio predefinita sia stata disattivata.

Mostrare un'interfaccia utente personalizzata

Una volta disattivata l'interfaccia utente predefinita, il passaggio successivo consiste nel mostrare un'interfaccia utente dell'annuncio personalizzata. Per questo esempio, aggiungi un nuovo RelativeLayout al layout del visualizzatore video esistente, poi mostra questo layout quando viene riprodotto un annuncio e nascondilo quando non sono in riproduzione annunci.

Aggiungi quanto segue al file di layout del frammento:

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>

Aggiungi poi il codice per utilizzare l'interfaccia utente personalizzata a Activity. Per aggiornare l'interfaccia utente, crea un timer Handler e un Runnable che lo gestisce.

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

Contatore degli annunci e pulsante di avanzamento

Ora definisci la funzione updateCustomUi() per compilare l'interfaccia utente con le informazioni sull'annuncio. I dettagli variano in base al formato dell'annuncio, ma in genere includono il contatore degli annunci e un pulsante di avanzamento o un contatore di avanzamenti se l'annuncio è ignorabile. Aggiungi quanto segue:

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

Nel codice precedente, dopo aver controllato se è presente un annuncio e aver chiamato Ad.isUiDisabled() per verificare che l'interfaccia utente predefinita dell'annuncio sia stata disattivata, chiama Ad.getAdPodInfo() e AdsManager.getAdProgress() per trovare la posizione dell'annuncio nel pod e il relativo avanzamento. Per gli annunci ignorabili, mostra un contatore se non puoi ancora saltare l'annuncio; in caso contrario, mostra un pulsante Salta. Ecco un riepilogo delle informazioni comuni sugli annunci e delle chiamate associate:

Informazioni Chiama
Annuncio corrente nel pod Ad.getAdPodInfo().getAdPosition()
Annunci totali nel pod Ad.getPodInfo().getTotalAds()
L'annuncio è ignorabile Ad.isSkippable()
Secondi prima che l'annuncio possa essere ignorato Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Secondi rimanenti nell'annuncio (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Se fai clic sul pulsante Salta annuncio, l'annuncio dovrebbe essere ignorato, quindi configuralo insieme al pulsante Scopri di più:

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'interfaccia utente deve essere disattivata per il funzionamento di AdsManager.clicked().

Risoluzione dei problemi

Hai un tag di esempio abilitato per la disattivazione dell'interfaccia utente dell'annuncio?
Puoi copiare l'URL di questo tag di esempio e incollarlo nell'implementazione di IMA.
Non riesco a disattivare l'interfaccia utente predefinita.
Assicurati di chiamare AdsRenderingSettings.setDisableUi() e di passarlo a AdsManager. Verifica che Ad.isUiDisabled() restituisca true. Inoltre, la tua rete deve essere attivata in Ad Manager per disattivare un'interfaccia utente dell'annuncio. Se hai attivato questa funzionalità, il tuo VAST contiene un Extension simile al seguente: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Se i problemi persistono, rivolgiti al tuo account manager per verificare che la funzionalità sia stata attivata. Alcuni tipi di annunci richiedono un'interfaccia utente specifica; questi annunci vengono restituiti con un valore <UiHideable> pari a 0. In questo caso, il team addetto al traffico dovrà apportare modifiche per verificare che questi tipi di annunci non vengano pubblicati.