Audience Network Ad Layout Guideline for Android

Android devices come in all different shapes and sizes, so you should be cautious of what your native ads will look like on different devices. To guarantee your native ad layout is consistent across devices, the layout needs to be flexible. That is, instead of defining your layout with static dimensions, your layout should be responsive to different screen sizes and orientations.

The best practice to create a responsive layout is to use ConstraintLayout, which is available in an API library that's compatible with Android 2.3 (API level 9) and higher. Also, with the latest version of Android Studio, it provides Layout Editor to simplify the process of building ConstraintLayout. Below is a tutorial on how to build the native ad UI with ConstraintLayout by Layout Editor.

Ensure you have completed the Audience Network Getting Started and Android Getting Started guides before you proceed.

Prerequisites

Native Ad Layout Creation Steps

Step 1: Including the ConstraintLayout Library

To use ConstraintLayout in your project, proceed as follows:



Add the following statement to your module-level build.gradle (not project!), to use the latest ConstraintLayout library:

dependencies {
    ...
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}

If there are issues resolving the Constraint Layout Library, make sure that you've synced your Gradle file and try restarting Android Studio.

Once you successfully finish syncing the Gradle file with the ConstraintLayout library, you should be able to create an XML layout file with ConstraintLayout:

Step 2: Layout Top Part of Native Ad (including icons, title and label)

First, add Horizontal Guidelines and set layout_constraintGuide_begin as 55dp, which is used for constraining other views. Add an com.facebook.ads.AdIconView, constrain its top and left sides to the parent layout, and constrain its bottom side to the guideline.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.ads.AdIconView
        android:id="@+id/native_ad_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/below_ad_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="55dp" />
    ...
</android.support.constraint.ConstraintLayout>

Next, add another Horizontal Guideline set layout_constraintGuide_begin as 27.5dp, which is used for separating advertiser name text and sponsor label. Add native_advertiser_name and native_ad_sponsored_label and ad_choices_container as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...
    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="27.5dp" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    ...
</android.support.constraint.ConstraintLayout>

Step 3: Layout MediaView of Native Ad

Add MediaView and constrain it by the Horizontal Guideline created in Step 2 as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...   
    <com.facebook.ads.MediaView
    android:id="@+id/native_ad_media"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="center"
    app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
    app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
    app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
    ...
</android.support.constraint.ConstraintLayout>

Step 4: Layout Social Context, Ad Body and Action Button of Native Ad

Add native_ad_social_context, native_ad_body and native_ad_call_to_action and constrain them below MediaView.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...      
    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginStart="3dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="15dp"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:text="@string/placeholder"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        app:layout_constraintEnd_toEndOf="@id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
    ...
</android.support.constraint.ConstraintLayout>

Sample: Complete XML Constraint Layout

Here is a complete sample XML constraint layout for a native ad:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.ads.AdIconView
        android:id="@+id/native_ad_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/below_ad_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="55dp" />

    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="27.5dp" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_media"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
        app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
        app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginStart="3dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="15dp"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:text="@string/placeholder"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        app:layout_constraintEnd_toEndOf="@id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

</android.support.constraint.ConstraintLayout>

Demo: Constraint Layout In Different Orientations and Screen Sizes

You've already created a ConstraintLayout for your native ad, which will have the best user experience for different orientations screen sizes. The ConstraintLayout should look consistent on both Android phones and tablets. Note: the layout is inside ScrollView; it is scrollable in Landscape orientation of phones when the native ad is not displayed completely.

Native Banner Ad Sample Constraint Layout

Native Banner Ad has been available on latest Facebook Audience Network SDK. The steps for creating native banner constraint layout are similar as Native Ad. You can follow the above steps to create the Native Banner Ad Layout, or copy the following sample XML layout code into your project.

Sample: Complete XML Constraint Layout

Here is a complete sample XML constraint layout for a native banner ad:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="3dp">

    <RelativeLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="Placeholder"
        app:layout_constraintStart_toEndOf="@id/ad_choices_container"
        app:layout_constraintTop_toTopOf="parent" />

    <com.facebook.ads.AdIconView
        android:id="@+id/native_ad_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="3dp"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="@id/ad_choices_container"
        app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />

    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:textStyle="bold"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="43dp" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="80dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/native_ad_icon" />

</android.support.constraint.ConstraintLayout>

Demo: Constraint Layout In Different Orientations and Screen Sizes

Native Ad Policy Compliance

In order to build a quality product, developers should follow Facebook Audience Network Policy whenever you implement the Native Ad or Native Banner Ad Layout. You should always give users full control on clicking. Especially for clickable elements on the ad, you should ensure only ad titles, URLs, Call-to-Action and image assets are clickable. Moreover, white space in the title text or image views must not be clickable.

Bad Example for Clickable Elements

Whenever you build your layout for native ad, you must not use fixed width and height for TextView, AdIcon and MediaView to avoid white space in ad titles. Below is a bad example you should never do:



Here is how a wrong example looks like:

Good Example for Clickable Elements

To build a quality native ad, please follow the above steps to build a constraint layout for native ad or native banner ad. For example, you should always apply 'wrap_content' to both width and height in TextView; you may assign fixed width or match_parent to an AdIcon or MediaView, but you should use wrap_content for the height. Below is how the layout looks like if you follow the Facebook Audience Network Policy:

Next Steps

More Resources

Getting Started Guide

Technical guide to getting started with Audience Network

API Reference

Facebook SDK for Android Reference