Open in app

Sign in

Write

Sign in

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

Golap Gunjan Barman
9 min readJan 7, 2021

--

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

Part 1: Add the dependency

Gradle setup

dependencies {

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

Part 2: Adding a Layout Container for the Banner Ad

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>

Part 3: Implementing the Banner in your activity

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

Part 1: create the button for Interstitial Ad

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>

Part 2: Initialize the Audience Network SDK

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

}

}

Part 3: Initialize the Interstitial Ad

Initialize the InterstitialAd

public InterstitialAd interstitialAdFB;

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

…………
AudienceNetworkAds.initialize(this);

}

Part 4: First load the InterstitialAd

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()
);

}

Part 5: show the Interstitial ad

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();
}
}

Preview:

Native Ads

Part 1: create the button for Native Ad

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>

Part 2: define the button and call the native ads that define in the next activity.

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));
}
});

}

Part 3: Adding a Layout Container for the Native Ad

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>

Part 4: requesting the Native Ad, NativeAd Layout

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());
}

}

Part 5: Creating a custom layout native_ad_view.xml for the native ad(/res/layout/New/Layout resource file/)

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

Part 6: Populating your Layout Using the Ad’s Metadata

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);
}
}

Preview:

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:

Android
Android App Development
AndroidDev
Android Navigation Bar
Chipnavigationbar

--

--

Golap Gunjan Barman
Golap Gunjan Barman

Written by Golap Gunjan Barman

378 Followers
7 Following

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

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams