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

Create Meta (Facebook Audience Network) Banner 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();
}

Create Meta (Facebook Audience Network) Smart Banner Ads

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

Meta (Facebook Audience Network) Medium Rectangle Banner Ads

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

Create Meta (Facebook Audience Network) Native Banner Ads

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

META Ads with Multi WebView App with Fragment Layout in Andriod Studio | Complete Tutorials

Post Related Videos

Related Post

How to create/make call button in Android Studio.

How to create recycler view UI layout in Android Studio.

How to create a custom recycler view in Android Studio.

How to create a custom Navigation Drawer Menu in Android Studio.

How to create a custom design fragments layout for a calendar app.

How to create a Tab Layout in Calendar App in Android Studio.