Как задавать стиль макетов объявлений с помощью нативных шаблонов

Выберите платформу: iOS Flutter Android (устаревшая версия)

Скачать шаблоны нативных объявлений

Нативные объявления можно настраивать, чтобы они были удобнее для пользователей. Это повышает вовлеченность пользователей и ваш доход.

Чтобы нативные объявления были максимально эффективными, важно оформить их макеты так, чтобы они выглядели как естественное продолжение вашего приложения. Для этого мы создали нативные шаблоны.

Нативные шаблоны – это готовые представления для нативных объявлений, которые можно быстро внедрить и легко изменить. С помощью шаблонов нативных объявлений вы можете создать свое первое нативное объявление всего за несколько минут и быстро настроить его внешний вид без написания большого объема кода. Вы можете разместить эти шаблоны в любом месте, например в представлении Recycler View, используемом в ленте новостей, в диалоговом окне или в любом другом месте приложения.

Шаблоны нативных объявлений предоставляются в виде модуля Android Studio, поэтому их легко добавить в проект и использовать по своему усмотрению.

Размеры шаблонов

Существует два шаблона: маленький и средний. Оба используют класс TemplateView и имеют фиксированное соотношение сторон. Они будут масштабироваться, чтобы заполнить ширину родительских представлений.

Маленький шаблон

@layout/gnt_small_template_view

Маленький шаблон идеально подходит для представлений Recycler View или в тех случаях, когда вам нужно длинное прямоугольное представление объявления. Например, вы можете использовать его для объявлений в фиде.

Средний шаблон

@layout/gnt_medium_template_view

Шаблон среднего размера предназначен для показа на половину или три четверти страницы, но его также можно использовать в фидах. Этот формат хорошо подходит для целевых и заставочных страниц.

Экспериментируйте с размещением. Конечно, вы также можете изменить исходный код и XML-файлы в соответствии со своими требованиями.

Установка шаблонов нативных объявлений

Чтобы установить нативные шаблоны, просто скачайте ZIP-файл (используя параметр Clone or download (Клонировать или скачать) на GitHub) и импортируйте модуль в существующий проект Android Studio.

  1. Выберите File > New > Import Module (Файл > Создать > Импортировать модуль).

  2. Выберите папку nativetemplates.

    импортировать нативный шаблон

  3. Добавьте в файл build.gradle на уровне приложения следующую строку:

    dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

Как использовать шаблоны нативных объявлений

Шаблон можно использовать в любом XML-файле макета, как и любую другую группу представлений.

Добавить шаблон в макет

Использование шаблонов состоит из двух этапов:

  1. Сначала добавьте шаблон в макет.

    <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   tools:showIn="@layout/activity_main" >

<!--  This is your template view -->
<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   <!-- this attribute determines which template is used. The other option is
    @layout/gnt_medium_template_view -->
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

...
</LinearLayout>

  2. Затем нужно передать нативное объявление в шаблон при загрузке:

    MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdManagerAdRequest.Builder().build());

Ключи словаря стилей

Оформить шаблон можно двумя способами: с помощью традиционного XML-макета и с помощью нашего объекта NativeTemplateStyle.Builder. В примере кода выше показано, как использовать объект NativeTemplateStyle.Builder, чтобы задать основной цвет фона, но есть и другие варианты. Вот все доступные методы построителя. Конструктор возвращает объект NativeTemplateStyle, который переопределяет все стили макета XML. В макетах XML gnt_small_template.xml и gnt_medium_template.xml используются те же параметры стилей Android, с которыми вы уже знакомы.

Методы Builder для стиля нативного шаблона
withCallToActionTextTypeface Typeface callToActionTextTypeface

Гарнитура для призыва к действию.
withCallToActionTextSize float callToActionTextSize

Размер текста призыва к действию.
withCallToActionTypefaceColor int callToActionTypefaceColor

Цвет текста призыва к действию.
withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

Цвет фона призыва к действию.
withPrimaryTextTypeface Typeface primaryTextTypeface

Гарнитура первой строки текста.
withPrimaryTextSize float primaryTextSize

Размер первой строки текста.
withPrimaryTextTypefaceColor int primaryTextTypefaceColor

Цвет первой строки текста.
withPrimaryTextBackgroundColor ColorDrawable primaryTextBackgroundColor

Цвет фона первой строки текста.
withSecondaryTextTypeface Typeface secondaryTextTypeface

Гарнитура второй строки текста.
withSecondaryTextSize float secondaryTextSize

Размер второй строки текста.
withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

Цвет текста во второй строке.
withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

Цвет фона второй строки текста.
withTertiaryTextTypeface Typeface tertiaryTextTypeface

Гарнитура третьей строки текста.
withTertiaryTextSize float tertiaryTextSize

Размер третьей строки текста.
withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

Цвет текста в третьей строке.
withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

Цвет фона третьей строки текста.
withMainBackgroundColor ColorDrawable mainBackgroundColor

Основной цвет фона.

Впечатления

Чтобы вам было проще создавать нативные объявления, мы разработали шаблоны. Вы можете добавлять новые шаблоны и функции в наш репозиторий GitHub. Отправьте нам pull-запрос, и мы его рассмотрим.