Ad slider

Warning.

This is an archived version of the documentation. Actual documentation for all platforms can be found here.

Yandex Mobile Ads SDK lets you render a slider containing related ads. For more information about the slider, see this post.

The slider implements the native advertising paradigm. Publishers can adjust the ad layout based on its features and the design of their apps that render the slider.

Getting started

To ensure that the Yandex Mobile Ads SDK runs correctly, follow all the steps to attach an ad library.

Loading the slider

Note.

Any call of the Mobile Ads SDK should be made from the main thread.

Create an instance of the SliderAdLoader class to fetch ads into the slider.
Create a configuration for the nativeAdRequestConfiguration request using the NativeAdRequestConfiguration.Builder class. As the request parameters, you can use the ad unit ID, method for loading images, age, gender, and other data that might improve the quality of ad selection.
To get notifications (slider loaded successfully or failed with an error), create a SliderAdLoadListener instance and set it as an event listener for the ad loader.
Start the slider loading process.

Code example:

final SliderAdLoader sliderAdLoader = new SliderAdLoader(this);
sliderAdLoader.setSliderAdLoadListener(new SliderAdLoadListener() {
    @Override
    public void onSliderAdLoaded(@NonNull final SliderAd sliderAd) {
        //bind sliderAd
    }

    @Override
    public void onSliderAdFailedToLoad(@NonNull final AdRequestError error) {
        //log error
    }
});

final NativeAdRequestConfiguration nativeAdRequestConfiguration = 
        new NativeAdRequestConfiguration.Builder(AdUnitId).build();
sliderAdLoader.loadSlider(nativeAdRequestConfiguration);

Tip.

We recommend that you keep a strong reference to the slider and its loader throughout the lifecycle of the screen hosting the assets.

Displaying the slider

When the slider is loaded, you must render all its assets.

A successfully loaded slider contains one or more native ads with the same context. Ads in the slider must be displayed within the same shared container: otherwise, ad impressions won't count.

There are two ways to configure the slider layout:

Layout using a template

Example of a native ad template

The easiest way to work with native ads is to use a standard layout template: all you need is a few lines of code in the basic version.

The template already has the complete set of required assets and defines their arrangement relative to each other. The template works with any supported type of native ad.

Making a slider using a template is easy. Link the SliderAd object to the root NativeAdView container and link all the ads in the slider to the template:

@Override
public void onSliderAdLoaded(@NonNull final SliderAd sliderAd) {
    mNativeAdView = (NativeAdView) findViewById(R.id.native_slider_ad_container);
    try {
        final NativeAdViewBinder sliderViewBinder = 
            new NativeAdViewBinder.Builder(mNativeAdView).build();
sliderAd.bindSliderAd(sliderViewBinder);
        final List<NativeAd> nativeAds = sliderAd.getNativeAds();
        for (final NativeAd nativeAd : nativeAds) {
            final NativeBannerView nativeBannerView = new NativeBannerView(this);
            nativeBannerView.setAd(nativeAd);
            mNativeAdView.addView(nativeBannerView);
        }
    } catch (final NativeAdException exception) {
        //log error
    }
}

You can customize the native ad template. Learn more in Layout using a template.

Layout without a template

When the template settings aren't enough to get the desired effect, you can configure native ads manually.

With this method, you can lay out native ads yourself by positioning ad elements in respect of each other. Your ad may contain both mandatory and optional display assets. You can find their full list in Native ad assets.

Tip.

We recommend that you use a layout that includes the complete set of possible assets. Experience has shown that layouts with a complete set of assets are more clickable.

Example of a layout without using a template

Link the SliderAd object to the root NativeAdView object and link each ad in the slider to the child NativeAdView object.

Each ad in the slider is laid out using a standard native advertising layout method.

@Override
public void onSliderAdLoaded(@NonNull final SliderAd sliderAd) {
    mNativeAdView = (NativeAdView) findViewById(R.id.native_slider_ad_container);
    try {
        final NativeAdViewBinder sliderViewBinder =
            new NativeAdViewBinder.Builder(mNativeAdView).build();
sliderAd.bindSliderAd(sliderViewBinder);
        final List<NativeAd> nativeAds = sliderAd.getNativeAds();
        for (final NativeAd nativeAd : nativeAds) {
            final NativeAdView nativeAdView = mLayoutInflater.inflate(R.layout.widget_native_ad, mSliderAdView, false);
            final NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(nativeAdView)
                    .setAgeView((TextView) nativeAdView.findViewById(R.id.age))
                    .setBodyView((TextView) nativeAdView.findViewById(R.id.body))
                    .setCallToActionView((Button) nativeAdView.findViewById(R.id.call_to_action))
                    .setDomainView((TextView) nativeAdView.findViewById(R.id.domain))
                    .setFaviconView((ImageView) nativeAdView.findViewById(R.id.favicon))
                    .setFeedbackView((Button) nativeAdView.findViewById(R.id.feedback))
                    .setIconView((ImageView) nativeAdView.findViewById(R.id.icon))
                    .setMediaView((MediaView) nativeAdView.findViewById(R.id.media))
                    .setPriceView((TextView) nativeAdView.findViewById(R.id.price))
                    .setRatingView((MyRatingView) nativeAdView.findViewById(R.id.rating))
                    .setReviewCountView((TextView) nativeAdView.findViewById(R.id.review_count))
                    .setSponsoredView((TextView) nativeAdView.findViewById(R.id.sponsored))
                    .setTitleView((TextView) nativeAdView.findViewById(R.id.title))
                    .setWarningView((TextView) nativeAdView.findViewById(R.id.warning))
                    .build();

            nativeAd.bindNativeAd(viewBinder);
            mNativeAdView.addView(nativeBannerView);
        }
    } catch (final NativeAdException exception) {
        //log error
    }
}

Note. mediaView size requirements when displaying video ads

Minimum size of an instance of the MediaView class that supports video playback: 300x160 or 160x300 dp (density-independent pixels).

To support video playback in native ad templates, we recommend setting the width for NativeBannerView to at least 300 dp. The correct height for mediaView will be calculated automatically based on the width to height ratio.