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. ConstraintLayout 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 or Banner Ad example.

Build a Responsive UI with ConstraintLayout
Build a UI with Layout Editor

Android Native Ad UI Components

In this guide, you will learn how to implement a native ad placement. First, create a native ad by ConstraintLayout with the following components:

View #1: Ad Icon

View #2: Ad Title

View #3: Sponsored Label

View #4: AdChoices Icon

View #5: MediaView

View #6: Social Context

View #7: Ad Body

View #8: Call to Action button




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


Constraint Layout Template XML Layout

Constraint Layout In Different Screen Sizes

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 into the canvas, which can constrain other views. Click the circle at the edge of the guideline to toggle the measurement mode to percent. Add an ImageView into canvas, constrain its top and left sides to the parent layout, and constrain its bottom side to the guideline. Ensure you set both layout_width and layout_height as "match_constraint" to validate your constraint. Also, click the size control to change the dimension ratio to "1:1".



Next, add another horizontal guideline and set to 16%. Add vertical guideline and set to 85%. Then Add TextViews for Ad Title & Label and LinearLayout for AdChoices, and set constraints, layout_width and layout_height as follows:

Step 3: Layout MediaView of Native Ad

Add horizontal guideline which constrains the MediaView. Create MediaView from Audience Network SDK and set constraints as follows:

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

Then add new horizontal and vertical guidelines. Add TextViews for social context and ad body and constrain them based upon the newly added guidelines. Set up guidelines and TextViews as follows:



Last but not least, add two horizontal guidelines to constrain the Action Button as follows:

Constraint Layout Template XML Layout

Here is a recommended template XML 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:id="@+id/native_ad_unit"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.28" />

    <ImageView
        android:id="@+id/native_ad_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="false"
        android:contentDescription="icon"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/native_ad_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="4dp"
        android:layout_marginStart="4dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:text=""
        android:textSize="15sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toStartOf="@+id/guideline3"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon" />

    <TextView
        android:id="@+id/sponsored_label"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:ellipsize="end"
        android:lines="1"
        android:text="Sponsored"
        android:textSize="10sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        android:gravity="right"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline3"
        app:layout_constraintTop_toTopOf="parent">
    </LinearLayout>

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.16" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85" />

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_media"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="@+id/guideline1"
        app:layout_constraintBottom_toTopOf="@+id/guideline6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="center_vertical"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="12dp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="4dp"
        android:background="#4286F4"
        android:gravity="center"
        android:text=""
        android:textColor="@android:color/white"
        android:textSize="11sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline4"
        app:layout_constraintTop_toTopOf="@+id/guideline7" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:lines="2"
        android:text=""
        android:textColor="@android:color/darker_gray"
        android:textSize="10sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline5"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline6" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginStart="4dp"
        android:ellipsize="end"
        android:gravity="top"
        android:lines="2"
        android:text=""
        android:textColor="@android:color/black"
        android:textSize="11sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline5" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.58" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.86" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.72" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.79" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.93" />

</android.support.constraint.ConstraintLayout>

Constraint Layout In Different Screen Sizes

You've already created a ConstraintLayout for your native ad, which will have the best user experience for different screen sizes. The ConstraintLayout should look consistent on both Android phones and tablets.

Next Steps

More Resources

Getting Started Guide

Technical guide to getting started with Audience Network

API Reference

Facebook SDK for Android Reference