Anzeigenlayouts mit nativen Vorlagen gestalten

Plattform auswählen: Android iOS Flutter

Native Vorlagen herunterladen

Wichtig: 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 Nutzerfreundlichkeit kann zu mehr Engagement und einem höheren Gesamtumsatz führen.

Damit Sie native Anzeigen optimal nutzen können, ist es wichtig, Ihre Anzeigenlayouts so zu gestalten, dass sie sich natürlich in Ihre App einfügen. Um Ihnen den Einstieg zu erleichtern, haben wir native Vorlagen erstellt.

Native Vorlagen sind vollständige Codeansichten für Ihre nativen Anzeigen, die für eine schnelle Implementierung und einfache Änderung entwickelt wurden. Mit nativen Vorlagen 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-Ansicht in einem Newsfeed, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

**Hinweis**: Wenn Sie Ihre eigenen nativen Layouts von Grund auf entwerfen möchten, kehren Sie stattdessen zur Dokumentation zu nativen Anzeigen (erweitert) zurück.

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 mittel. Beide verwenden die Klasse TemplateView und haben ein festes Seitenverhältnis. Sie werden so skaliert, dass sie die Breite ihrer übergeordneten Ansichten 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 Ansicht mit der halben bis dreiviertel Seite gedacht, kann aber auch in Feeds verwendet werden. Sie eignet sich gut für Landingpages oder Splash-Screens.

Sie können mit der Platzierung experimentieren. 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 Klonen oder herunterladen auf GitHub) und importieren Sie das Modul in Ihr vorhandenes Android Studio-Projekt.

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

2. Wählen Sie den Ordner nativetemplates aus.

   

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

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

Native Anzeigenvorlagen verwenden

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

Die Verwendung der Vorlagen besteht aus 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, "/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());
   

Schlüssel für Stildictionary

Es gibt zwei Möglichkeiten, Ihre Vorlage zu gestalten: mit herkömmlichem Layout-XML und mit unserem Objekt NativeTemplateStyle.Builder. Im obigen Codebeispiel wird gezeigt, wie Sie mit dem Objekt NativeTemplateStyle.Builder die Haupthintergrundfarbe festlegen. Es gibt aber auch eine Vielzahl anderer Optionen. Hier finden Sie alle verfügbaren Builder-Methoden. 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 den Stil der nativen Vorlage
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 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, damit Sie schnell native Anzeigen entwickeln können. Wir freuen uns, wenn Sie zu unserem GitHub -Repository beitragen, um neue Vorlagen oder Funktionen hinzuzufügen. Senden Sie uns eine Pull-Anfrage und wir sehen uns das an.