Layout without a template

To display native ads, the NativeAppInstallAd, NativeContentAd, and NativeImageAd objects must be bound to a specific View. This View inherits from the ViewGroup class and must be defined as the root element for the subView set that the data contained in the native ad will be bound to.

For each type of ad, you can use a specialized or universal type of View:
Restriction. Requirements for mediaView size when displaying video ads

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

To support video playback in native ads, we recommend setting the width for mediaView to at least 300 dp. To calculate the appropriate mediaView height value, use the result returned by the getAspectRatio method.

You can see an example of designing the ad layout without using the template here.

  1. Customizing layout for native ads using any View
  2. Customizing layout for native ads using a specific View

Customizing layout for native ads using any View

  1. Review the list of required and optional subviews for each type of View.
  2. Create an instance of the ViewGroup class either programmatically or using an XML file.
    Example of creating the layout file for a native ad
    <FrameLayout>
        <LinearLayout>
            <TextView
                android:id="@+id/title"/>
            <LinearLayout>
                <TextView
                    android:id="@+id/age"/>
                <TextView
                    android:id="@+id/sponsored"/>
                <Button
                    android:id="@+id/feedback"/>    
            </LinearLayout>
            <LinearLayout>
                <MediaView
                    android:id="@+id/media"/>
                <LinearLayout>
                    <TextView
                        android:id="@+id/body"/>
                    <LinearLayout>
                        <ImageView
                            android:id="@+id/favicon"/>
                        <TextView
                            android:id="@+id/domain"/>
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
            <TextView
                android:id="@+id/warning"/>
        </LinearLayout>
    </FrameLayout>
  3. Register the View type for the ad assets in the instance of the NativeAdViewBinder class.
  4. Request the values for native ad assets using the getAdAssets method. This will help you calculate the position and sizes of these assets in advance.
    Example of getting assets
    final NativeAdAssets nativeAdAssets = nativeContentAd.getAdAssets();
    final NativeAdMedia nativeAdMedia = nativeAdAssets.getMedia();
            if (nativeAdMedia != null) {
                final float aspectRatio = nativeAdMedia.getAspectRatio();
                ...
            } else {
                final NativeAdImage nativeAdImage = nativeAdAssets.getImage();
                if (nativeAdImage != null) {
                    final int imageWidth = nativeAdImage.getWidth();
                    if (imageWidth >= 450) {
                        ...
                    } else {
                        ...
                    }
                }
            }
  5. Call the bindNativeAd method of the NativeGenericAd interface to bind the content to the native ad instance.
    Example of registering a set of subViews and binding to a native ad
    final NativeGenericAd yandexAd = ...;
    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();
    
    try {
        yandexAd.bindNativeAd(viewBinder);
    } catch (final NativeAdException exception) {
        ...
    }
    Restriction.

    If a subView isn't registered for a required element in a native ad, binding doesn't occur, and the ad isn't displayed. NativeAdException will be thrown, and it must be handled.

  6. To get notifications about user interactions with the ad (opening or closing the ad or exiting the app), set NativeAdEventListener for the ad object and define the methods:
  7. If you installed FeedbackView (learn more about the feedback asset), then instead of the NativeAdEventListener, set ClosableNativeAdEventListener as a listener for the ad object and define the methods:

Customizing layout for native ads using a specific View

The example below shows layout for the Content type of ad.

  1. Review the list of required and optional subviews for each type of View.
  2. Create an instance of the NativeContentAdView class either programmatically or using an XML file.
    Example of creating the layout file for a Content type of native ad
    <com.yandex.mobile.ads.nativeads.NativeContentAdView>
        <LinearLayout>
            <TextView
                android:id="@+id/content_title"/>
            <LinearLayout>
                <TextView
                    android:id="@+id/content_sponsored"/>
                <TextView
                    android:id="@+id/content_age"/>
            </LinearLayout>
            <LinearLayout>
                <ImageView
                    android:id="@+id/content_image"/>
                <LinearLayout>
                    <TextView
                        android:id="@+id/content_body"/>
                    <LinearLayout>
                        <ImageView
                            android:id="@+id/content_favicon"/>
                        <TextView
                            android:id="@+id/content_domain"/>
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
            <TextView
                android:id="@+id/content_warning"/>
        </LinearLayout>
    </com.yandex.mobile.ads.nativeads.NativeContentAdView>
  3. Register the View type for the ad assets in the instance of the NativeContentAdView class.
  4. Request the values for native ad assets using the getAdAssets method. This will help you calculate the position and sizes of these assets in advance.
    Example of getting assets
    final NativeAdAssets nativeAdAssets = nativeContentAd.getAdAssets();
    final NativeAdMedia nativeAdMedia = nativeAdAssets.getMedia();
            if (nativeAdMedia != null) {
                final float aspectRatio = nativeAdMedia.getAspectRatio();
                ...
            } else {
                final NativeAdImage nativeAdImage = nativeAdAssets.getImage();
                if (nativeAdImage != null) {
                    final int imageWidth = nativeAdImage.getWidth();
                    if (imageWidth >= 450) {
                        ...
                    } else {
                        ...
                    }
                }
            }
  5. Call the bindContentAd method to bind the content to the native ad object.
    Example of registering a set of subViews and binding to a native ad
    ...
    private NativeContentAdView mContentAdView;
    mNativeAdLoader.setNativeAdLoadListener(new NativeAdLoader.OnImageAdLoadListener() {
            ...
            @Override
            public void onContentAdLoaded(@NonNull NativeContentAd nativeContentAd) {
                mContentAdView = (NativeContentAdView) findViewById(R.id.native_content_ad_container);
                
                mContentAdView.setAgeView((TextView) findViewById(R.id.content_age));
                mContentAdView.setBodyView((TextView) findViewById(R.id.content_body));
                mContentAdView.setDomainView((TextView) findViewById(R.id.content_domain));
                mContentAdView.setIconView((ImageView) findViewById(R.id.content_favicon));
                mContentAdView.setMediaView((MediaView) findViewById(R.id.content_media));
                mContentAdView.setSponsoredView((TextView) findViewById(R.id.content_sponsored));
                mContentAdView.setTitleView((TextView) findViewById(R.id.content_title));
                mContentAdView.setWarningView((TextView) findViewById(R.id.content_warning));
    
                try {
                     nativeContentAd.bindContentAd(mContentAdView);
                } catch (final NativeAdException exception) {
                    ...
                }
            }
            ...
    });
    Restriction.

    If a subView isn't registered for a required element in a native ad, binding doesn't occur, and the ad isn't displayed. NativeAdException will be thrown, and it must be handled.

  6. To get notifications about user interactions with the ad (opening or closing the ad or exiting the app), set NativeAdEventListener for the ad object and define the methods:
  7. If you installed FeedbackView (learn more about the feedback asset), then instead of the NativeAdEventListener, set ClosableNativeAdEventListener as a listener for the ad object and define the methods: