Native Vorlagen

Native Vorlagen herunterladen

Wichtig: Bevor Sie fortfahren, sollten Sie wissen, wie Sie eine native Anzeige laden. Weitere Informationen zu nativen Anzeigen finden Sie in unserem Leitfaden zu nativen Anzeigen.

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

Damit Sie das Beste aus nativen Anzeigen herausholen, ist es wichtig, dass Sie Ihre Anzeigenlayouts so gestalten, dass sie wie eine natürliche Erweiterung Ihrer App wirken. Als Ausgangspunkt haben wir native Vorlagen erstellt.

Native Vorlagen sind Code-komplette Ansichten für Ihre nativen Anzeigen, die für eine schnelle Implementierung und einfache Änderung entwickelt wurden. Mithilfe von Vorlagen für native Anzeigen können Sie Ihre erste native Anzeige in nur wenigen Minuten implementieren und das Erscheinungsbild schnell und ohne viel Code anpassen. Sie können diese Vorlagen überall platzieren, z. B. in einer Recycler View in einem Nachrichtenfeed, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

Hinweis: Wenn Sie eigene native Layouts von Grund auf entwerfen möchten, kehren Sie stattdessen zur Dokumentation Native Advanced zurück.

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

Vorlagengrößen

Es gibt zwei Vorlagen: klein und mittel. Beide verwenden die Klasse TemplateView und haben ein festes Seitenverhältnis. Sie werden so skaliert, dass sie die Breite der übergeordneten Ansichten ausfüllen.

Kleine Vorlage

@layout/gnt_small_template_view

Die kleine Vorlage eignet sich ideal für Ansichten mit einem Anzeigen-Recycler oder für alle Fälle, in denen 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 Ansicht von 50 bis 75 % der Seite vorgesehen, kann aber auch in Feeds verwendet werden. Sie eignet sich gut für Landingpages oder Splashpages.

Probieren Sie verschiedene Placements aus. Natürlich können Sie auch den Quellcode und die XML-Dateien an Ihre Anforderungen anpassen.

Native Anzeigenvorlagen installieren

Wenn Sie die nativen Vorlagen installieren möchten, laden Sie einfach die ZIP-Datei herunter (mit der Option Clone or download auf GitHub) und importieren Sie das Modul in Ihr vorhandenes 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')
           ...
   }
   

Native Anzeigenvorlagen verwenden

Sie können die Vorlage wie jede andere Ansichtsgruppe in einer beliebigen Layout-XML-Datei 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 Ihrer Vorlage beim Laden Ihre native Anzeige zuweisen:

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
       .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 AdRequest.Builder().build());
   

Stilwörterbuchschlüssel

Es gibt zwei Möglichkeiten, die Vorlage zu gestalten: mithilfe der traditionellen Layout-XML-Datei und mithilfe des NativeTemplateStyle.Builder-Objekts. Im obigen Codebeispiel wird gezeigt, wie du mit dem NativeTemplateStyle.Builder-Objekt die Haupthintergrundfarbe festlegst. 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. Die XML-Layouts gnt_small_template.xml und gnt_medium_template.xml verwenden dieselben Android-Stilparameter, 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-Texts.
withCallToActionTypefaceColor	int callToActionTypefaceColor Die Farbe des Call-to-Action-Texts.
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor Die Hintergrundfarbe des Calls-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 Vorlagen für native Anzeigen erstellt, damit Sie diese schnell erstellen können. Wir würden uns freuen, wenn Sie zu unserem GitHub beitragen und neue Vorlagen oder Funktionen hinzufügen. Senden Sie uns einen Pull-Request und wir sehen uns das an.