Saturday, August 2, 2025

🏗️ How to Add Interstitial Ads in Android (From Basic to Advanced)

Interstitial ads are full-screen ads shown at natural transition points (e.g., between activities or after completing a task). This guide will take you from the simplest implementation to an advanced version with custom animations and callbacks.

✅ 1. Add Dependencies

Add the Google AdMob SDK to your build.gradle (app):

dependencies {
    implementation 'com.google.android.gms:play-services-ads:23.0.0'
}

In AndroidManifest.xml, configure permissions and the App ID:

<uses-permission android:name="android.permission.INTERNET"/>

<application ...>
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-3940256099942544~3347511713"/>
</application>

✅ 2. Display a Simple Interstitial Ad

Use the test ad unit ID ca-app-pub-3940256099942544/1033173712 during development.

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.interstitial.InterstitialAd;
import com.google.android.gms.ads.interstitial.InterstitialAdLoadCallback;

public class MainActivity extends AppCompatActivity {
    private InterstitialAd interstitialAd;

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

    private void loadInterstitial() {
        AdRequest adRequest = new AdRequest.Builder().build();
        InterstitialAd.load(this,
                "ca-app-pub-3940256099942544/1033173712",
                adRequest,
                new InterstitialAdLoadCallback() {
                    @Override
                    public void onAdLoaded(InterstitialAd ad) {
                        interstitialAd = ad;
                    }
                });
    }

    public void showInterstitial() {
        if (interstitialAd != null) {
            interstitialAd.show(this);
        }
    }
}
📌 Result: The ad displays when showInterstitial() is called

✅ 3. Show Interstitial at Navigation Points

Trigger the ad at natural breakpoints, e.g., when moving to the results screen:

nextButton.setOnClickListener(v -> {
    if (interstitialAd != null) {
        interstitialAd.show(this);
    } else {
        goToNextScreen();
    }
});

Also, set a callback to navigate after the ad is closed:

interstitialAd.setFullScreenContentCallback(new FullScreenContentCallback() {
    @Override
    public void onAdDismissedFullScreenContent() {
        interstitialAd = null;
        goToNextScreen();
    }
});

✅ 4. Load Ads in Background (Separate Manager)

For cleaner architecture, use a manager class:

public class InterstitialAdManager {
    private InterstitialAd ad;

    public void load(Context context) {
        AdRequest request = new AdRequest.Builder().build();
        InterstitialAd.load(context,
                "ca-app-pub-3940256099942544/1033173712",
                request,
                new InterstitialAdLoadCallback() {
                    @Override
                    public void onAdLoaded(InterstitialAd interstitialAd) {
                        ad = interstitialAd;
                    }
                });
    }

    public void show(Activity activity, Runnable onFinish) {
        if (ad != null) {
            ad.setFullScreenContentCallback(new FullScreenContentCallback() {
                @Override
                public void onAdDismissedFullScreenContent() {
                    ad = null;
                    onFinish.run();
                }
            });
            ad.show(activity);
        } else {
            onFinish.run();
        }
    }
}
📌 Result: A reusable class for loading and showing ads.

✅ 5. Add a Pre-Ad Animation (Improving UX)

Before showing the ad, add a short animation (fade/slide) to indicate a transition.

Example animation:

private void animateBeforeAd(View rootView, Runnable afterAnimation) {
    rootView.animate()
        .alpha(0.5f)
        .setDuration(300)
        .withEndAction(() -> {
            rootView.setAlpha(1f);
            afterAnimation.run();
        })
        .start();
}

Usage:

animateBeforeAd(findViewById(R.id.rootLayout), () -> {
    interstitialAdManager.show(this, this::goToNextScreen);
});

📌 Result: A smooth transition instead of an abrupt ad.

✅ 6. Advanced Implementation with Custom Callbacks

In the final implementation (as in our project), we combined:

  • InterstitialAdManager for loading and showing ads
  • Custom animations (fade/slide)
  • Navigation only after ad dismissal
InterstitialAdManager adManager = new InterstitialAdManager(this);
adManager.load(this);

animateBeforeAd(findViewById(R.id.rootLayout), () -> {
    adManager.show(this, this::showResults);
});

✅ 7. The Final Touch

The final flow:

  1. Play a short animation
  2. Show interstitial ad
  3. Continue navigation only after ad closes
  4. Fallback to navigation if ad is not loaded

🎯 Final Thoughts

  • ✅ Use test IDs during development
  • ✅ Show ads at natural breakpoints
  • ✅ Add animations for a smooth experience
  • ✅ Wrap logic in a manager for maintainability
  • ✅ Always provide a fallback

By following these steps, you can integrate interstitial ads from basic to a polished user experience.

No comments:

Post a Comment

Your Friendly Guide to Mastering the Linux Kernel with kernel-update

If you have ever explored the inner workings of Linux, you probably know that the kernel is the heart of your operating system. While most u...