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?

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

dependencies {

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

Part 2: Adding a Layout Container for the Banner Ad

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

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

<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

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

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

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

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

<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

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

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

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:

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