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
- Ensure you have completed the Native Ad and Native Banner Ad example.
- Ensure you have read Facebook Policy to build a quality product.
- Ensure you have read Build a Responsive UI with ConstraintLayout.
- Ensure you have read Build a UI with Layout Editor.
Native Ad Layout Creation Steps
Step 1: Including the ConstraintLayout Library
Step 2: Layout Top Part of Native Ad (including icons, title and label)
Step 3: Layout MediaView of Native Ad
Step 4: Layout Social Context, Ad Body and Action Button of Native Ad
Sample: Complete XML Constraint Layout
Demo: Constraint Layout In Different Orientations and Screen Sizes
Native Banner Ad Sample Constraint XML Layout
Sample: Complete XML Constraint Layout
Demo: Constraint Layout In Different Orientations and Screen Sizes
Native Ad Policy
Bad Example for Clickable Elements
Good Example for Clickable Elements
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.MediaView, 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.MediaView
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.MediaView
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 Meta 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.MediaView
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 Meta 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 Meta Audience Network Policy:
Next Steps
- Follow our guides for integrating different Ad Formats in your app:
Test ads integration with your app
Submit your app for review.
As soon as we receive a request for an ad from your app or website, we'll review it to make sure it complies with Audience Network policies and the Facebook community standards.
More Resources |
Getting Started GuideTechnical guide to getting started with Audience Network | API ReferenceFacebook SDK for Android Reference |