🏗️ How to Add Banner Ads in Android (From Simple to Animated)

Monetizing your app with banner ads is a straightforward way to generate revenue. In this guide, we’ll go from the simplest integration to a fancy, animated implementation, step by step.

✅ 1. Add Dependencies (Google AdMob)

First, include the AdMob SDK in your build.gradle (app):

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

Also, in AndroidManifest.xml, add Internet permissions and your AdMob App ID:

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:usesCleartextTraffic="true"
        android:name=".MyApplication">
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>
</manifest>

✅ 2. Display a Simple Banner Ad

In your layout (e.g., activity_main.xml):

<com.google.android.gms.ads.AdView
    android:id="@+id/adView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    ads:adSize="BANNER"
    ads:adUnitId="ca-app-pub-3940256099942544/6300978111"/>

In MainActivity.java:

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;

public class MainActivity extends AppCompatActivity {
    private AdView adView;

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

        MobileAds.initialize(this, initializationStatus -> {});
        adView = findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        adView.loadAd(adRequest);
    }
}

📌 Result: A banner appears at the bottom with no extra code:

✅ 3. Initialize in a Separate Class (Clean Architecture)

For cleaner code, separate banner logic into a helper class:

public class BannerAdManager {
    private final Context context;

    public BannerAdManager(Context context) {
        this.context = context;
    }

    public void loadBanner(AdView adView) {
        MobileAds.initialize(context, initializationStatus -> {});
        adView.loadAd(new AdRequest.Builder().build());
    }
}

Usage in MainActivity:

BannerAdManager adManager = new BannerAdManager(this);
adManager.loadBanner(findViewById(R.id.adView));

✅ 4. Adding a Slide-In Animation

Static ads work, but animations grab attention. Wrap the AdView in a FrameLayout and animate it when loaded:

<FrameLayout
    android:id="@+id/adContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom">

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-3940256099942544/6300978111"/>
</FrameLayout>

AdView adView = findViewById(R.id.adView);
FrameLayout adContainer = findViewById(R.id.adContainer);

adView.setAlpha(0f);
adView.setTranslationY(200f);

adView.setAdListener(new AdListener() {
    @Override
    public void onAdLoaded() {
        adContainer.animate()
            .alpha(1f)
            .translationY(0f)
            .setDuration(500)
            .start();
    }
});

adView.loadAd(new AdRequest.Builder().build());

📌 Result: The ad slides up & fades in when loaded.

✅ 5. Sliding Banner on Page Change

If your app has multiple screens (e.g., ViewPager2), you can refresh and animate the banner every time the page changes:

viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageSelected(int position) {
        super.onPageSelected(position);
        reloadBannerWithAnimation();
    }
});

private void reloadBannerWithAnimation() {
    adView.animate().alpha(0f).setDuration(200).withEndAction(() -> {
        adView.loadAd(new AdRequest.Builder().build());
        adView.animate().alpha(1f).setDuration(300).start();
    });
}

📌 Result: Each section gets a freshly animated ad.

🎯 Final Thoughts

• ✅ Start simple: just load the ad.
• ✅ Refactor: use a manager class for clean code.
• ✅ Animate: slide/fade effects improve UX.
• ✅ Refresh: dynamically load ads per page or user action.

With these steps, you can integrate ads from basic to professional-looking, while keeping performance and user experience in mind.