Anzeigenlayouts mit nativen Vorlagen gestalten

Plattform auswählen: iOS Flutter Android (Legacy)

Native Vorlagen herunterladen

Wichtiger Hinweis: Bevor Sie fortfahren, sollten Sie wissen, wie Sie eine native Anzeige laden.

Mit nativen Anzeigen können Sie Ihre Anzeigen anpassen und so die Nutzerfreundlichkeit verbessern. Eine bessere Nutzererfahrung kann die Interaktion steigern und den Gesamtumsatz verbessern.

Damit Sie native Anzeigen optimal nutzen können, sollten Sie die Anzeigenlayouts so gestalten, dass sie sich wie eine natürliche Erweiterung Ihrer App anfühlen. Als Einstiegshilfe haben wir native Vorlagen erstellt.

Native Vorlagen sind Code-vollständige Ansichten für Ihre nativen Anzeigen, die für eine schnelle Implementierung und einfache Änderung konzipiert sind. Mit nativen Vorlagen können Sie Ihre erste native Anzeige in nur wenigen Minuten implementieren und das Design schnell und ohne viel Code anpassen. Sie können diese Vorlagen an einer beliebigen Stelle platzieren, z. B. in einer Recycler-Ansicht, die in einem Nachrichten-Feed verwendet wird, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

Hinweis: Wenn Sie eigene native Layouts von Grund auf neu entwerfen möchten, lesen Sie stattdessen die Dokumentation zu Erweiterten nativen Anzeigen.

Unsere nativen Vorlagen werden als Android Studio-Modul bereitgestellt, sodass Sie sie ganz einfach in Ihr Projekt einbinden und nach Belieben verwenden können.

Vorlagengrößen

Es gibt zwei Vorlagen: klein und mittelgroß. Beide verwenden die Klasse TemplateView und haben ein festes Seitenverhältnis. Sie werden so skaliert, dass sie die Breite ihrer Elternansichten ausfüllen.

Kleine Vorlage

@layout/gnt_small_template_view

Die kleine Vorlage eignet sich ideal für Recycler-Ansichten oder wenn Sie eine lange rechteckige Anzeigenansicht benötigen. Sie können sie beispielsweise für In-Feed-Anzeigen verwenden.

Mittlere Vorlage

@layout/gnt_medium_template_view

Die mittlere Vorlage ist für eine halbe bis dreiviertel Seitenansicht gedacht, kann aber auch in Feeds verwendet werden. Sie eignet sich gut für Landingpages oder Splash-Pages.

Experimentieren Sie ruhig mit der Platzierung. Natürlich können Sie den Quellcode und die XML-Dateien auch an Ihre Anforderungen anpassen.

Vorlagen für native Anzeigen installieren

Wenn Sie die nativen Vorlagen installieren möchten, laden Sie die ZIP-Datei herunter (über die Option Clone or download auf GitHub) und importieren Sie das Modul in Ihr bestehendes Android Studio-Projekt.

1. Wählen Sie Datei > Neu > Modul importieren aus.

2. nativetemplates-Ordner auswählen

   

3. Fügen Sie der Datei build.gradle auf Anwendungsebene die folgende Zeile hinzu:

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

Vorlagen für native Anzeigen verwenden

Sie können die Vorlage wie jede andere Ansichtsgruppe in jeder XML-Layoutdatei verwenden.

Die Verwendung der Vorlagen erfolgt in zwei Schritten:

1. Zuerst müssen Sie die Vorlage in Ihr Layout einfügen.

   <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. Als Nächstes müssen Sie die native Anzeige an die Vorlage übergeben, wenn sie geladen wird:

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

Stilwörterbuchschlüssel

Es gibt zwei Möglichkeiten, Ihre Vorlage zu gestalten: mit herkömmlichem Layout-XML und mit unserem NativeTemplateStyle.Builder-Objekt. Im obigen Codebeispiel wird gezeigt, wie Sie mit dem Objekt NativeTemplateStyle.Builder die Haupt-Hintergrundfarbe festlegen. Es gibt aber auch eine Vielzahl anderer Optionen. Hier sind alle verfügbaren Builder-Methoden aufgeführt. Der Builder gibt ein NativeTemplateStyle-Objekt zurück, das alle XML-Layoutstile überschreibt. In den XML-Layouts gnt_small_template.xml und gnt_medium_template.xml werden dieselben Android-Stilparameter verwendet, die Sie bereits kennen.

Builder-Methoden für native Vorlagendesigns
withCallToActionTextTypeface	Typeface callToActionTextTypeface Die Schriftart für den Call-to-Action.
withCallToActionTextSize	float callToActionTextSize Die Größe des Call-to-Action-Textes.
withCallToActionTypefaceColor	int callToActionTypefaceColor Die Farbe des Call-to-Action-Texts.
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor Die Hintergrundfarbe des Call-to-Action.
withPrimaryTextTypeface	Typeface primaryTextTypeface Die Schriftart der ersten Textzeile.
withPrimaryTextSize	float primaryTextSize Die Größe der ersten Textzeile.
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor Die Farbe der ersten Textzeile.
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor Die Hintergrundfarbe der ersten Textzeile.
withSecondaryTextTypeface	Typeface secondaryTextTypeface Die Schriftart der zweiten Textzeile.
withSecondaryTextSize	float secondaryTextSize Die Größe der zweiten Textzeile.
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor Die Textfarbe der zweiten Textzeile.
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor Die Hintergrundfarbe der zweiten Textzeile.
withTertiaryTextTypeface	Typeface tertiaryTextTypeface Die Schriftart der dritten Textzeile.
withTertiaryTextSize	float tertiaryTextSize Die Größe der dritten Textzeile.
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor Die Textfarbe der dritten Textzeile.
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor Die Hintergrundfarbe der dritten Textzeile.
withMainBackgroundColor	ColorDrawable mainBackgroundColor Die Haupthintergrundfarbe.

Beitragen

Wir haben native Vorlagen erstellt, mit denen Sie native Anzeigen schnell entwickeln können. Wir würden uns freuen, wenn Sie zu unserem GitHub beitragen und neue Vorlagen oder Funktionen hinzufügen würden. Senden Sie uns eine Pull-Anfrage und wir sehen uns das an.