Anzeigenlayouts mit nativen Vorlagen gestalten

Native Vorlagen herunterladen

Mit nativen Anzeigen können Sie Ihre Anzeigen anpassen und so die Nutzerfreundlichkeit verbessern. Eine bessere Nutzererfahrung kann die Interaktion steigern und den Gesamtertrag 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 entwickelt wurden. 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 RecyclerView, die in einem Nachrichtenfeed verwendet wird, in einem Dialogfeld oder an einer anderen Stelle in Ihrer App.

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 es 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 einfach die ZIP-Datei herunter (über die 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')
           ...
   }
   

Vorlagen für native Anzeigen verwenden

Du kannst 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. Die XML-Layouts gnt_small_template.xml und gnt_medium_template.xml verwenden dieselben Android-Stilparameter, die Sie bereits kennen.

Beitragen

Wir haben native Vorlagen entwickelt, mit denen Sie native Anzeigen schnell erstellen 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.