Android Tutorials
Facebook Native Ads in Android
This Tutorial Helps You to Integrate Facebook Native Ads into your App. You Can Check our tutorial Facebook Interstitial Ads in Android to Implement Interstitial Ads in your App.
The Native Ad API allows you to build a customized experience for the ads you show in your app. When using the Native Ad API, instead of receiving an ad ready to be displayed, you will receive a group of ad properties such as a title, an image, a call to action, and you will have to use them to construct a custom view where the ad is shown.
In this tutorial, we will implement Native ads in Android App. Native Ads are Very Useful for Content Management Apps. The New Facebook Native Ads match the Content of your App so Users show interest in the ads displayed and it leads to generate more revenue.
Facebook Native Ads Comes with a lot of Customization. Native Ad Displays Ads in three Formats
- Banner Ad Format
- Carousel Ad Format
- Video Ad Format
From Last Year I have seen a huge growth in my Revenue due to Native Ads. So I suggest to Use Native Ads in your App.
Now Let’s go to Implementation.
First We Create a Native Ad Layout native_ad_layout.xml file
Table of Contents
native_ad_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ad_unit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<TextView
android:id="@+id/native_ad_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp" />
<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" />
</LinearLayout>
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="horizontal" />
</LinearLayout>
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="2"
android:textColor="@android:color/black"
android:textSize="12sp" />
</LinearLayout>
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="100dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#4286F4"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:textColor="@android:color/white"
android:textSize="12sp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Now in activity_main.xml we create Native Ad Placement
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:paddingTop="150dp"
android:paddingBottom="150dp">
<com.facebook.ads.NativeAdLayout
android:id="@+id/native_ad_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</RelativeLayout>
Here I Used to padding to the parent Layout of Native Ad Placement. Use Padding according to your requirement layout in your project.
Now we Designed the layout for the Native Ad. Now Let’s See the java Code.
The first Step is to Request a Native Ad. Use the below Code to Request Native Ad.
nativeAd = new NativeAd(this, "CAROUSEL_IMG_SQUARE_LINK#YOUR_PLACEMENT_ID");
NativeAdListener nativeAdListener = new NativeAdListener() {
@Override
public void onMediaDownloaded(Ad ad) {
// Native ad finished downloading all assets
Log.e(TAG, "Native ad finished downloading all assets.");
}
@Override
public void onError(Ad ad, AdError adError) {
// Native ad failed to load
Log.e(TAG, "Native ad failed to load: " + adError.getErrorMessage());
}
@Override
public void onAdLoaded(Ad ad) {
// Native ad is loaded and ready to be displayed
Log.d(TAG, "Native ad is loaded and ready to be displayed!");
}
@Override
public void onAdClicked(Ad ad) {
// Native ad clicked
Log.d(TAG, "Native ad clicked!");
}
@Override
public void onLoggingImpression(Ad ad) {
// Native ad impression
Log.d(TAG, "Native ad impression logged!");
}
};
Now the Second Step is to Inflate the Native Ad. With Below Code, We’ll inflate the Native Ad.
nativeAd.unregisterView();
// Add the Ad view into the ad container.
nativeAdLayout = findViewById(R.id.native_ad_container);
LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
// Inflate the Ad view. The layout referenced should be the one you created in the last step.
adView = (LinearLayout) inflater.inflate(R.layout.native_ad_layout, nativeAdLayout, false);
nativeAdLayout.addView(adView);
// Add the AdOptionsView
LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeAd, nativeAdLayout);
adChoicesContainer.removeAllViews();
adChoicesContainer.addView(adOptionsView, 0);
// Create native UI using the ad metadata.
MediaView nativeAdIcon = adView.findViewById(R.id.native_ad_icon);
TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
MediaView nativeAdMedia = adView.findViewById(R.id.native_ad_media);
TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
TextView nativeAdBody = adView.findViewById(R.id.native_ad_body);
TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);
// Set the Text.
nativeAdTitle.setText(nativeAd.getAdvertiserName());
nativeAdBody.setText(nativeAd.getAdBodyText());
nativeAdSocialContext.setText(nativeAd.getAdSocialContext());
nativeAdCallToAction.setVisibility(nativeAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE);
nativeAdCallToAction.setText(nativeAd.getAdCallToAction());
sponsoredLabel.setText(nativeAd.getSponsoredTranslation());
// Create a list of clickable views
List<View> clickableViews = new ArrayList<>();
clickableViews.add(nativeAdTitle);
clickableViews.add(nativeAdCallToAction);
// Register the Title and CTA button to listen for clicks.
nativeAd.registerViewForInteraction(
adView, nativeAdMedia, nativeAdIcon, clickableViews);
We Requested and Inflated the Ad. Now Let’s See the Full Code of MainActivity.java and also how to build and Display the Ad.
MainActivity.java
package com.example.facebookadssampleapp;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.facebook.ads.Ad;
import com.facebook.ads.AdError;
import com.facebook.ads.AdOptionsView;
import com.facebook.ads.AudienceNetworkAds;
import com.facebook.ads.MediaView;
import com.facebook.ads.NativeAd;
import com.facebook.ads.NativeAdLayout;
import com.facebook.ads.NativeAdListener;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private NativeAd nativeAd;
private NativeAdLayout nativeAdLayout;
private LinearLayout adView;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
AudienceNetworkAds.initialize(this);
loadNativeAd();
}
private void loadNativeAd() {
nativeAd = new NativeAd(this, "CAROUSEL_IMG_SQUARE_LINK#YOUR_PLACEMENT_ID");
NativeAdListener nativeAdListener = new NativeAdListener() {
@Override
public void onMediaDownloaded(Ad ad) {
// Native ad finished downloading all assets
Log.e(TAG, "Native ad finished downloading all assets.");
}
@Override
public void onError(Ad ad, AdError adError) {
// Native ad failed to load
Log.e(TAG, "Native ad failed to load: " + adError.getErrorMessage());
}
@Override
public void onAdLoaded(Ad ad) {
// Native ad is loaded and ready to be displayed
Log.d(TAG, "Native ad is loaded and ready to be displayed!");
if (nativeAd == null || nativeAd != ad) {
return;
}
// Inflate Native Ad into Container
inflateAd(nativeAd);
}
@Override
public void onAdClicked(Ad ad) {
// Native ad clicked
Log.d(TAG, "Native ad clicked!");
}
@Override
public void onLoggingImpression(Ad ad) {
// Native ad impression
Log.d(TAG, "Native ad impression logged!");
}
};
// Request an ad
nativeAd.loadAd(
nativeAd.buildLoadAdConfig()
.withAdListener(nativeAdListener)
.build());
}
private void inflateAd(NativeAd nativeAd) {
nativeAd.unregisterView();
// Add the Ad view into the ad container.
nativeAdLayout = findViewById(R.id.native_ad_container);
LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
// Inflate the Ad view. The layout referenced should be the one you created in the last step.
adView = (LinearLayout) inflater.inflate(R.layout.native_ad_layout, nativeAdLayout, false);
nativeAdLayout.addView(adView);
// Add the AdOptionsView
LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeAd, nativeAdLayout);
adChoicesContainer.removeAllViews();
adChoicesContainer.addView(adOptionsView, 0);
// Create native UI using the ad metadata.
MediaView nativeAdIcon = adView.findViewById(R.id.native_ad_icon);
TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
MediaView nativeAdMedia = adView.findViewById(R.id.native_ad_media);
TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
TextView nativeAdBody = adView.findViewById(R.id.native_ad_body);
TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);
// Set the Text.
nativeAdTitle.setText(nativeAd.getAdvertiserName());
nativeAdBody.setText(nativeAd.getAdBodyText());
nativeAdSocialContext.setText(nativeAd.getAdSocialContext());
nativeAdCallToAction.setVisibility(nativeAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE);
nativeAdCallToAction.setText(nativeAd.getAdCallToAction());
sponsoredLabel.setText(nativeAd.getSponsoredTranslation());
// Create a list of clickable views
List<View> clickableViews = new ArrayList<>();
clickableViews.add(nativeAdTitle);
clickableViews.add(nativeAdCallToAction);
// Register the Title and CTA button to listen for clicks.
nativeAd.registerViewForInteraction(
adView, nativeAdMedia, nativeAdIcon, clickableViews);
}
}
Wow, We Finally Achieved the Implementation of Native Ads in Our App. For More Information Check Facebook Audience Network Docs.
Follow the Above tutorial and Implement Facebook Native Ads in your App. If encounter any Issues I’m here to help. Comment your Problem, I’ll definitely respond and try to solve your Implementation Issues.
See you in the Next Tutorial. Until then Stay Happy and Healthy. And Don’t forget to Code 🙂
