Layout using a template

To customize the layout and design, you can use a standard template or create your own design based on a standard template.

  1. Using the standard layout template
  2. Creating your own template-based layout
  3. Setting the position and the ad size

Using the standard layout template

  1. Create an instance of the NativeBannerView class and set the loaded ad for it:
    final NativeBannerView nativeBannerView =
          new NativeBannerView(getApplicationContext());
    nativeBannerView.setAd(nativeAd);
    Note.

    The NativeBannerView instance can be created either programmatically or using an XML file.

  2. 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:
Note.

If the standard layout doesn't fit your app, you can change it. For more information, see Creating your own template-based layout.

Creating your own template-based layout

  1. Create an instance of the NativeBannerView class and make the preferred settings for it:
    final NativeBannerView nativeBannerView =
          new NativeBannerView(getApplicationContext());
    final NativeTemplateAppearance nativeTemplateAppearance =
          new NativeTemplateAppearance.Builder()
                     .withBannerAppearance(new BannerAppearance.Builder()
                             .setBackgroundColor(Color.GRAY).build())
                     .withTitleAppearance(new TextAppearance.Builder()
                             .setTextColor(Color.BLUE).build())
                     ...
                     .build();
    nativeBannerView.applyAppearance(nativeTemplateAppearance);
    Note.

    The NativeBannerView instance can be created either programmatically or using an XML file.

  2. Set the loaded ad for the NativeBannerView instance:
    nativeBannerView.setAd(nativeAd);
  3. 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:

Example of layout configuration

final NativeBannerView nativeBannerView = new NativeBannerView(getApplicationContext());
final NativeTemplateAppearance nativeTemplateAppearance =
      new NativeTemplateAppearance.Builder()                  
              // Setting the color for the ad border.
              .withBannerAppearance(new BannerAppearance.Builder()
                      .setBorderColor(Color.YELLOW).build())

              // Setting the button parameters.
              .withCallToActionAppearance(new ButtonAppearance.Builder()
              // Setting the font color and size for the action button label.
                      .setTextAppearance(new TextAppearance.Builder()
                               .setTextColor(Color.BLUE)
                               .setTextSize(14f).build())

                      // Setting the button color for the normal state and the clicked state.
                      .setNormalColor(Color.TRANSPARENT)
                      .setPressedColor(Color.GRAY)
                      // Setting  the color and width of the button border.
                      .setBorderColor(Color.BLUE)
                      .setBorderWidth(1f).build())

              // Setting the image width and the size constraint.
              .withImageAppearance(new ImageAppearance.Builder()
                      .setWidthConstraint(new SizeConstraint(SizeConstraint
                      .SizeConstraintType.FIXED, 60f)).build())

             // Setting the font size and color for the age restriction label.
             .withAgeAppearance(new TextAppearance.Builder()
                      .setTextColor(Color.GRAY)
                      .setTextSize(12f).build())

             // Setting the font size and color for the main ad text.
             .withBodyAppearance(new TextAppearance.Builder()
                      .setTextColor(Color.GRAY)
                      .setTextSize(12f).build())

             // Setting the color for filled stars in the rating.
             .withRatingAppearance(new RatingAppearance.Builder()
                      .setProgressStarColor(Color.CYAN).build())

             // Setting the font size and color for the ad title.
             .withTitleAppearance(new TextAppearance.Builder()
                      .setTextColor(Color.BLACK)
                      .setTextSize(14f).build())

             .build();

// Applying the settings.
nativeBannerView.applyAppearance(nativeTemplateAppearance);
Note.

When creating your own template-based design, you don't have to make the preferred settings for all the visual elements. Any elements that don't have preferred settings are configured with the default values.

Setting the position and the ad size

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 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.

The NativeBannerView asset inherits from the FrameLayout class and is configured in a similar way:
Programmatically.
final NativeBannerView nativeBannerView = new NativeBannerView(getApplicationContext());
final LayoutParams layoutParams =
      new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
nativeBannerView.setLayoutParams(layoutParams);

rootLayout.addView(nativeBannerView);
Using an XML file.
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.yandex.mobile.ads.nativeads.template.NativeBannerView
        android:id="@+id/native_template"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>