How to add Facebook Banner, Interstitial and Native ads in android | Facebook Ads Integration

In this tutorial, we are going to Integrate Facebook ads in the android app. Here we add three types of Facebook ads in the app. Banner, Interstitial and Native ads.

What is the importance of Facebook Ads?

A major advantage of Facebook advertising is its ability to reach your exact audience. Facebook is the most targeted form of advertising. You can advertise to people by age, interests, behavior, and location. If you know your customers, you can use Facebook advertising to engage them.

Want to know more about Facebook Ads. Visit here.

Now let’s see how to integrate Facebook ads in the android app.

Banner Ad

Gradle setup

dependencies {

……
implementation ‘com.facebook.android:audience-network-sdk:6.2.0’
}

Inside the main layout (/res/layout/activtity_main.xml), add a layout that will act as a container for your app.

<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout

>
<LinearLayout
android:id=”@+id/banner_container”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:orientation=”vertical”
app:layout_constraintBottom_toBottomOf=”parent”
/>

</RelativeLayout>

Next, instantiate an AdView object and request to load an ad. Since AdView is a subclass of View, you can add it to your view hierarchy just as with any other view, here I create a method banner() for our banner ad inside onCreate():

private AdView adView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

//banner ad
banner_ad();


}

//banner ad
private void banner_ad() {

this.adView = new AdView(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”, AdSize.
BANNER_HEIGHT_50);

// Find the Ad Container
LinearLayout adContainer = (LinearLayout) findViewById(R.id.banner_container);

// Add the ad view to your activity layout
adContainer.addView(this.adView);

// Request an ad
this.adView.loadAd();
}

Preview:

Interstitial Ads

Create a button in the main XML file (/res/layout/activity_main.xml) above the banner container.

<RelativeLayout

……..

>
<Button
android:layout_width=”250dp”
android:layout_height=”wrap_content”
android:id=”@+id/btn_show”
android:text=”Show Interstitial Ad”
android:background=”@drawable/ripple”
android:textColor=”@color/white”
android:padding=”10dp”
android:layout_centerInParent=”true”/>

……….
<LinearLayout
android:id=”@+id/banner_container”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:orientation=”vertical”
app:layout_constraintBottom_toBottomOf=”parent”
/>

</RelativeLayout>

Before creating an ad object and loading ads, you should initialize the Audience Network SDK. It is recommended to do this at the app launch.

public class MainActivity extends AppCompatActivity {

……
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

// initialize the Audience Network SDK
AudienceNetworkAds.
initialize(this);

}

}

Initialize the InterstitialAd

public InterstitialAd interstitialAdFB;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

…………
AudienceNetworkAds.
initialize(this);

}

Before showing the ad first load the interstitial ad. Create a method inside onCreate() method.

public InterstitialAd interstitialAdFB;
public static boolean
fb1 = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

…………
AudienceNetworkAds.
initialize(this);
loadFbInterstitialAd();
}

Create an InterstitialAdListener, load the Ad, and show the Ad immediately it is loaded successfully.

public InterstitialAd interstitialAdFB;
public static boolean
fb1 = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);
…..
AudienceNetworkAds.
initialize(this);
loadFbInterstitialAd();

}

//interstitial Ad
private void loadFbInterstitialAd(){
this.interstitialAdFB = new InterstitialAd(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”);
InterstitialAdListener interstitialAdListener = new InterstitialAdListener() {
private Ad ad;
private AdError adError;

@Override
public void onInterstitialDisplayed(Ad ad) {

}

@Override
public void onInterstitialDismissed(Ad ad) {
MainActivity.
fb1 = false;
MainActivity.this.interstitialAdFB.loadAd();
}

@Override
public void onError(Ad ad, AdError adError) {
StringBuilder sb = new StringBuilder();
sb.append(“Interstitial ad failed to load: “);
sb.append(adError.getErrorMessage());
Log.
e(“fb”, sb.toString());
}

@Override
public void onAdLoaded(Ad ad) {

}

@Override
public void onAdClicked(Ad ad) {

}

@Override
public void onLoggingImpression(Ad ad) {

}

};
interstitialAdFB.loadAd(
interstitialAdFB.buildLoadAdConfig()
.withAdListener(interstitialAdListener)
.build()
);

}

and show the ad in the button click, create a method showFBInterstitial() under the button on click.

Button btn_show;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

// interstitial ad
btn_show = (Button) findViewById(R.id.btn_show);
btn_show.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showFBInterstitial();
}
});
AudienceNetworkAds.
initialize(this);
loadFbInterstitialAd();

}

Then show the Ad immediately it is loaded successfully.

public void showFBInterstitial(){
InterstitialAd interstitialAd = this.interstitialAdFB;
if (interstitialAd != null && interstitialAd.isAdLoaded()){
this.interstitialAdFB.show();
}
}

Native Ads

Create a button in the main XML file (/res/layout/activity_main.xml) above the banner container.

<RelativeLayout

……..

>

<Button
android:layout_width=”250dp”
android:layout_height=”wrap_content”
android:id=”@+id/btn_show_native_ad”
android:text=”Show Native Ad”
android:background=”@drawable/ripple1"
android:textColor=”@color/purple_500"
android:padding=”10dp”
android:layout_marginTop=”10dp”
android:layout_centerInParent=”true”
android:layout_below=”@id/btn_show”/>

……….
<LinearLayout
android:id=”@+id/banner_container”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:orientation=”vertical”
app:layout_constraintBottom_toBottomOf=”parent”
/>

</RelativeLayout>

Button btn_show_nativeAd;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

……….

//native ad
btn_show_nativeAd = (Button) findViewById(R.id.btn_show_native_ad);
btn_show_nativeAd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(MainActivity.this, NextActivity.class));
}
});

}

Inside the main layout (/res/layout/activtity_next.xml), add a layout that will act as a container for your app.

<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout

>

<com.facebook.ads.NativeAdLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/native_ad_container”
android:orientation=”vertical”/>

</RelativeLayout>

Instantiate a NativeAd object with NativeAd Layout and create a NativeAdListener, and call loadAd() with the ad listener:

public class NextActivity extends AppCompatActivity {

private NativeAdLayout nativeAdLayout;
private LinearLayout adView;
private NativeAd nativeAd;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_next);

loadNativeAd();
}

private void loadNativeAd() {
nativeAd = new NativeAd(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”);
NativeAdListener setAdListener = new NativeAdListener() {
@Override
public void onMediaDownloaded(Ad ad) {

}

@Override
public void onError(Ad ad, AdError adError) {

}

@Override
public void onAdLoaded(Ad ad) {

}

@Override
public void onAdClicked(Ad ad) {

}

@Override
public void onLoggingImpression(Ad ad) {

}
};
//request an add
nativeAd.loadAd(nativeAd.buildLoadAdConfig()
.withAdListener(setAdListener)
.build());
}

}

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:card_view=”http://schemas.android.com/tools"
android:id=”@+id/native_ad_unit”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@drawable/native_border”
android:orientation=”vertical”
android:padding=”5dp”>


<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>

Immediately display the ad once it is loaded successfully. Modify the onAdLoaded() method above to retrieve the Native Ad’s properties and display it as follows:

public class NextActivity extends AppCompatActivity {

private NativeAdLayout nativeAdLayout;
private LinearLayout adView;
private NativeAd nativeAd;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_next);

loadNativeAd();
}

private void loadNativeAd() {
nativeAd = new NativeAd(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”);
NativeAdListener setAdListener = new NativeAdListener() {
……….

@Override
public void onAdLoaded(Ad ad) {
if (nativeAd == null || nativeAd != ad){
return;
}
//inflate native ad into container
inflateAd(nativeAd);
}

……………
};
//request an add
nativeAd.loadAd(nativeAd.buildLoadAdConfig()
.withAdListener(setAdListener)
.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(NextActivity.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_ads_view, nativeAdLayout, false);
nativeAdLayout.addView(adView);

// Add the AdOptionsView
LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(NextActivity.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);
}
}

Source code:

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”>

<Button
android:layout_width=”250dp”
android:layout_height=”wrap_content”
android:id=”@+id/btn_show”
android:text=”Show Interstitial Ad”
android:background=”@drawable/ripple”
android:textColor=”@color/white”
android:padding=”10dp”
android:layout_centerInParent=”true”/>

<Button
android:layout_width=”250dp”
android:layout_height=”wrap_content”
android:id=”@+id/btn_show_native_ad”
android:text=”Show Native Ad”
android:background=”@drawable/ripple1"
android:textColor=”@color/purple_500"
android:padding=”10dp”
android:layout_marginTop=”10dp”
android:layout_centerInParent=”true”
android:layout_below=”@id/btn_show”/>

<RelativeLayout
android:layout_below=”@id/btn_show_native_ad”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”160dp”
android:layout_centerInParent=”true”
android:padding=”8dp”>

<TextView
android:id=”@+id/bannerText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Banner Ads will show here: “
android:textStyle=”bold”
android:textColor=”@color/purple_700"
android:textSize=”16sp”/>

<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toEndOf=”@id/bannerText”
android:src=”@drawable/ic_baseline_arrow_downward_24"
android:layout_marginStart=”16dp”/>

</RelativeLayout>
<LinearLayout
android:id=”@+id/banner_container”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:orientation=”vertical”
app:layout_constraintBottom_toBottomOf=”parent”
/>

</RelativeLayout>

MainActivity.java

package com.codewithgolap.facebookad;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import com.facebook.ads.Ad;
import com.facebook.ads.AdError;
import com.facebook.ads.AdSize;
import com.facebook.ads.AdView;
import com.facebook.ads.AudienceNetworkAds;
import com.facebook.ads.InterstitialAd;
import com.facebook.ads.InterstitialAdListener;

public class MainActivity extends AppCompatActivity {

private AdView adView;
Button btn_show, btn_show_nativeAd;

public InterstitialAd interstitialAdFB;
public static boolean
fb1 = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

//banner ad
banner_ad();

// interstitial ad
btn_show = (Button) findViewById(R.id.btn_show);
btn_show.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showFBInterstitial();
}
});
AudienceNetworkAds.
initialize(this);
loadFbInterstitialAd();

//native ad
btn_show_nativeAd = (Button) findViewById(R.id.btn_show_native_ad);
btn_show_nativeAd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(MainActivity.this, NextActivity.class));
}
});

}


//banner ad
private void banner_ad() {

this.adView = new AdView(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”, AdSize.
BANNER_HEIGHT_50);

// Find the Ad Container
LinearLayout adContainer = (LinearLayout) findViewById(R.id.banner_container);

// Add the ad view to your activity layout
adContainer.addView(this.adView);

// Request an ad
this.adView.loadAd();
}


//interstitial Ad
private void loadFbInterstitialAd(){
this.interstitialAdFB = new InterstitialAd(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”);
InterstitialAdListener interstitialAdListener = new InterstitialAdListener() {
private Ad ad;
private AdError adError;

@Override
public void onInterstitialDisplayed(Ad ad) {

}

@Override
public void onInterstitialDismissed(Ad ad) {
MainActivity.
fb1 = false;
MainActivity.this.interstitialAdFB.loadAd();
}

@Override
public void onError(Ad ad, AdError adError) {
StringBuilder sb = new StringBuilder();
sb.append(“Interstitial ad failed to load: “);
sb.append(adError.getErrorMessage());
Log.
e(“fb”, sb.toString());
}

@Override
public void onAdLoaded(Ad ad) {

}

@Override
public void onAdClicked(Ad ad) {

}

@Override
public void onLoggingImpression(Ad ad) {

}

};
interstitialAdFB.loadAd(
interstitialAdFB.buildLoadAdConfig()
.withAdListener(interstitialAdListener)
.build()
);

}
public void showFBInterstitial(){
InterstitialAd interstitialAd = this.interstitialAdFB;
if (interstitialAd != null && interstitialAd.isAdLoaded()){
this.interstitialAdFB.show();
}
}
}

activity_next.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=”.NextActivity”>

<com.facebook.ads.NativeAdLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/native_ad_container”
android:orientation=”vertical”/>

</RelativeLayout>

NextActivity.java

package com.codewithgolap.facebookad;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.facebook.ads.Ad;
import com.facebook.ads.AdError;
import com.facebook.ads.AdOptionsView;
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 NextActivity extends AppCompatActivity {

private NativeAdLayout nativeAdLayout;
private LinearLayout adView;
private NativeAd nativeAd;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_next);

loadNativeAd();
}

private void loadNativeAd() {
nativeAd = new NativeAd(this, “IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID”);
NativeAdListener setAdListener = new NativeAdListener() {
@Override
public void onMediaDownloaded(Ad ad) {

}

@Override
public void onError(Ad ad, AdError adError) {

}

@Override
public void onAdLoaded(Ad ad) {
if (nativeAd == null || nativeAd != ad){
return;
}
//inflate native ad into container
inflateAd(nativeAd);
}

@Override
public void onAdClicked(Ad ad) {

}

@Override
public void onLoggingImpression(Ad ad) {

}
};
//request an add
nativeAd.loadAd(nativeAd.buildLoadAdConfig()
.withAdListener(setAdListener)
.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(NextActivity.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_ads_view, nativeAdLayout, false);
nativeAdLayout.addView(adView);

// Add the AdOptionsView
LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(NextActivity.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);
}
}

native_ad_view.xml

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:card_view=”http://schemas.android.com/tools"
android:id=”@+id/native_ad_unit”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@drawable/native_border”
android:orientation=”vertical”
android:padding=”5dp”>


<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>

button_background.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android">

<solid android:color=”@color/purple_500"/>
<corners android:radius=”8dp”/>
</shape>

button_background1.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android">

<solid android:color=”@color/white”/>
<corners android:radius=”8dp”/>
<stroke android:color=”@color/purple_500" android:width=”2dp”/>
</shape>

native_border.xml

<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android">
<solid android:color=”@color/white”/>
<stroke android:width=”1dp” android:color=”@color/black”/>
<corners android:radius=”10dp”/>
</shape>

The output of the whole project:

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store