META Ads with Multi WebView App with Fragment Layout in Andriod Studio | Complete Tutorials
First, we have to create an ads format name list which is given below then we have to follow step by step with each topic and create a new Meta ads network placement.
- Meta (Facebook Audience Network) Banner Ads
- Meta (Facebook Audience Network) Smart Banner Ads
- Meta (Facebook Audience Network) Medium Rectangle Banner Ads
- Meta (Facebook Audience Network) Native Banner Ads
- Meta (Facebook Audience Network) Interstitial Ads
First, we have created an activity_home.xml layout to implement the Banner Ads format.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<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"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<FrameLayout
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/banner_container" />
</androidx.constraintlayout.widget.ConstraintLayout>
Second, we have to create JAVA code for Meta Banner Ads which’s XML layout is already created as given above.
private AdView adView;
Now, we have created the Banner Ads Code under the onCreate Method.
// Initialize the Audience Network SDK
AudienceNetworkAds.initialize(this);
adView = new AdView(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID", AdSize.BANNER_HEIGHT_50);
LinearLayout adContainer = findViewById(R.id.banner_container);
adContainer.addView(adView);
adView.loadAd();
AdListener adListener = new AdListener() {
@Override
public void onError(Ad ad, AdError adError) {
Toast.makeText(
MainActivity.this,
"Error: " + adError.getErrorMessage(),
Toast.LENGTH_LONG)
.show();
}
@Override
public void onAdLoaded(Ad ad) {
}
@Override
public void onAdClicked(Ad ad) {
}
@Override
public void onLoggingImpression(Ad ad) {
}
};
adView.loadAd(adView.buildLoadAdConfig().withAdListener(adListener).build());
Now, also we can create Destroy method which is help to reduce invalid click activity under the AppCompactActivity method given below.
@Override
protected void onDestroy() {
if (adView != null) {
adView.destroy();
}
super.onDestroy();
}
In this Smart Banner Ad which is XML code will be the same as Banner ads. So, we do not create new XML code for these ads. Now, we can change some JAVA code for this ad given below.
private AdView smartBannerAd;
// Initialize the Audience Network SDK
AudienceNetworkAds.initialize(this);
smartBannerAd = new AdView(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID", AdSize.BANNER_HEIGHT_90);
adContainer = findViewById(R.id.smart_banner_container);
adContainer.addView(smartBannerAd);
smartBannerAd.loadAd();
AdListener smartBannerAdListener = new AdListener() {
@Override
public void onError(Ad ad, AdError adError) {
Toast.makeText(
MainActivity.this,
"Error: " + adError.getErrorMessage(),
Toast.LENGTH_LONG)
.show();
}
@Override
public void onAdLoaded(Ad ad) {
}
@Override
public void onAdClicked(Ad ad) {
}
@Override
public void onLoggingImpression(Ad ad) {
}
};
@Override
protected void onDestroy() {
if (smartBannerAd != null) {
smartBannerAd.destroy();
}
super.onDestroy();
}
In this Medium Rectangle Banner Ad which is XML code will be the same as Banner ads. So, we do not create new XML code for these ads. Now, we can change some JAVA code for this ad given below.
private mediumRectangleBannerAd;
// Initialize the Audience Network SDK
AudienceNetworkAds.initialize(this);
mediumRectangleBannerAd = new AdView(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID", AdSize.RECTANGLE_HEIGHT_250);
adContainer = findViewById(R.id.medium_rectangle_banner_container);
adContainer.addView(mediumRectangleBannerAd);
mediumRectangleBannerAd.loadAd();
AdListener mediumRectangleBannerAdListener = new AdListener() {
@Override
public void onError(Ad ad, AdError adError) {
Toast.makeText(
MainActivity.this,
"Error: " + adError.getErrorMessage(),
Toast.LENGTH_LONG)
.show();
}
@Override
public void onAdLoaded(Ad ad) {
}
@Override
public void onAdClicked(Ad ad) {
}
@Override
public void onLoggingImpression(Ad ad) {
}
};
mediumRectangleBannerAd.loadAd(mediumRectangleBannerAd.buildLoadAdConfig().withAdListener(mediumRectangleBannerAdListener).build());
@Override
protected void onDestroy() {
if (mediumRectangleBannerAd != null) {
mediumRectangleBannerAd.destroy();
}
super.onDestroy();
}
First, we have created an activity_home.xml layout to implement the NativeAdLayout format for Native Banner Ads.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<com.facebook.ads.NativeAdLayout
android:id="@+id/native_banner_ad_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<FrameLayout
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/native_banner_ad_container" />
</androidx.constraintlayout.widget.ConstraintLayout>
Second, we have to create a new layout in the layout folder for the native ad named “native_banner_ad_layout.xml” and the codes are given below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="end"
android:lines="1"
android:padding="2dp"
android:textColor="@android:color/darker_gray"
android:textSize="12sp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_icon_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
android:paddingStart="53dp"
android:paddingEnd="83dp">
<TextView
android:id="@+id/native_ad_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold" />
<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:textSize="12sp" />
</LinearLayout>
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:background="#4286F4"
android:gravity="center"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:textColor="@android:color/white"
android:textSize="12sp"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
Third, we have created a JAVA code for these ads. So, we have to create a code for this Native Banner Ad format.
private final String TAG = NativeBannerAds.class.getSimpleName();
private NativeBannerAd nativeBannerAd;
// Initialize the Audience Network SDK
AudienceNetworkAds.initialize(this);
nativeBannerAd = new NativeBannerAd(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID");
NativeAdListener nativeAdListener = new NativeAdListener() {
@Override
public void onMediaDownloaded(Ad ad) {
}
@Override
public void onError(Ad ad, AdError adError) {
}
@Override
public void onAdLoaded(Ad ad) {
if (nativeBannerAd == null || nativeBannerAd != ad) {
return;
}
inflateAd(nativeBannerAd);
}
@Override
public void onAdClicked(Ad ad) {
}
@Override
public void onLoggingImpression(Ad ad) {
}
};
// load the ad
nativeBannerAd.loadAd(
nativeBannerAd.buildLoadAdConfig()
.withAdListener(nativeAdListener)
.build());
Now, we have to create a new method inflateAd under AppCompactActivity.
private void inflateAd(NativeBannerAd nativeBannerAd) {
// Unregister last ad
nativeBannerAd.unregisterView();
// Add the Ad view into the ad container.
NativeAdLayout nativeAdLayout = findViewById(R.id.native_banner_ad_container);
LayoutInflater inflater = LayoutInflater.from(NativeBannerAds.this);
// Inflate the Ad view. The layout referenced is the one you created in the last step.
LinearLayout adView = (LinearLayout) inflater.inflate(R.layout.native_banner_ad_layout, nativeAdLayout, false);
nativeAdLayout.addView(adView);
// Add the AdChoices icon
RelativeLayout adChoicesContainer = adView.findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(NativeBannerAds.this, nativeBannerAd, nativeAdLayout);
adChoicesContainer.removeAllViews();
adChoicesContainer.addView(adOptionsView, 0);
// Create native UI using the ad metadata.
TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
MediaView nativeAdIconView = adView.findViewById(R.id.native_icon_view);
Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);
// Set the Text.
nativeAdCallToAction.setText(nativeBannerAd.getAdCallToAction());
nativeAdCallToAction.setVisibility(
nativeBannerAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE);
nativeAdTitle.setText(nativeBannerAd.getAdvertiserName());
nativeAdSocialContext.setText(nativeBannerAd.getAdSocialContext());
sponsoredLabel.setText(nativeBannerAd.getSponsoredTranslation());
// Register the Title and CTA button to listen for clicks.
List<View> clickableViews = new ArrayList<>();
clickableViews.add(nativeAdTitle);
clickableViews.add(nativeAdCallToAction);
nativeBannerAd.registerViewForInteraction(adView, nativeAdIconView, clickableViews);
}
And, Destroy method is also implemented below of above all codes.
@Override
protected void onDestroy() {
if (nativeBannerAd != null) {
nativeBannerAd.destroy();
}
super.onDestroy();
}
- Meta (Facebook Audience Network) Interstitial Ads
In this ad, we have to create only JAVA code in the HomeActivity.java file.
private InterstitialAd interstitialAd;
private final String TAG = MainActivity.class.getSimpleName();
// Initialize the Audience Network SDK
AudienceNetworkAds.initialize(this);
// Interstitial Ad placement
interstitialAd = new InterstitialAd(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID");
InterstitialAdListener interstitialAdListener = new InterstitialAdListener() {
@Override
public void onInterstitialDisplayed(Ad ad) {
}
@Override
public void onInterstitialDismissed(Ad ad) {
}
@Override
public void onError(Ad ad, AdError adError) {
}
@Override
public void onAdLoaded(Ad ad) {
interstitialAd.show();
}
@Override
public void onAdClicked(Ad ad) {
}
@Override
public void onLoggingImpression(Ad ad) {
}
};
interstitialAd.loadAd(
interstitialAd.buildLoadAdConfig()
.withAdListener(interstitialAdListener)
.build());
@Override
protected void onDestroy() {
if (interstitialAd != null) {
interstitialAd.destroy();
}
super.onDestroy();
}
————— THANK YOU VERY MUCH —————