Articles, Blog

Coding a Banner Ad

Coding a Banner Ad

Now let’s make another type of ad,
the banner ad. This time, let’s build it into an actual
game that was built with libgdx. Let’s create a banner ad for
the game Icicles, where you just move your player
around and dodge icicles. I already have the code open for
the game Icicles. So let’s change it a bit and add
a banner ad at the top of the screen. The first thing I’ve done is
to include our ads library. And I’ve also updated our Android
manifest file to include the ad activity and the permissions we’ll need. So now we can access all
the ad objects we need and retrieve an ad to display
from the Internet. And now we’re ready to start
programming a banner ad. And we’ll be doing all of our ad
programming in our Android launcher class which contains
our onCreate method. We’ll be treating this class like
a view that we can display ads in, and to create our initial view we’ll need to
change our initialization code a little. Instead of just saying initialize, we’re going to create a view
with initializeForView. We’re going to create
a view called GameView, and then pass in the new Icicles game and
config, like we did before. Great, then next, we need to do what
we did in our previous project, which is to register our app. This let’s us receive ads, and I’ll
use the same sample key I did before. Next let’s create our banner ad. The first step, just like in
our interstitial ad project, is to create a private class variable. But instead of an interstitial ad
this is going to be an AdLayout, and I’ll give it the name bannerAd. An interstitial ad automatically
took up the whole screen but a banner ad only takes up a small part. And an AdLayout object let’s us decide
the size and placement of our ad. Then I’ll go back into our onCreate
method and make a new banner ad, where I say this activity .bannerAdVariable
is equal to a new AdLayout object. Next we have to define where we want
our ad to appear in our gameView. To do this, we first have to
define a relative layout. Our RelativeLayout, which I’ve called
layout, will include all the views and layouts that appear on our screen. So it’s going to include our
gameView that we created here and our bannerAd AdLayout. To include these we need to add them
to our layout by saying layout.addView, then giving our view followed by the
width and height we want them to occupy. First to add our gameView I’m
going to specify width and height that take up the whole screen. And since I want this to work
across screens, big or small, I’m going to use parameters that Android
provides to automatically size our ad. MATCH_PARENT will automatically
fit the whole screen. So, since I want the gameView
to take up the whole screen I’m going to say with and
height are both equal to MATCH_PARENT. Then for my bannerAd, I’m going
to define the dimensions first. I want it to be as
wide as our screen but take up as little height as possible. So I’ll give it a width of MATCH_PARENT
and a height of WRAP_CONTENT. And WRAP_CONTENT means
that the height is only as big as it needs to be to fit
all the content in the banner ad. It wraps around the content. Then I can add our AdLayout
by saying layout.AddView, our banner ad, and then the dimensions. And finally after defining
the placement of my ad and the views, I still want them
to display on my screen. And I do this by saying setContentView
and passing in a RelativeLayout. Then we need to do one more thing,
which is load our ad. And this is the same as
with an interstitial ad. We just say our variable,
bannerAd.loadAdd. But unlike our interstitial ad,
a banner ad will load and show automatically once it’s loaded. So we don’t need a listener unless
we want a really specific behavior. And now we’re done. Let’s see what this looks
like when we run our game, using BlueStacks emulator again. And now you can see we
get our Icicles game, now with a banner ad right
at the top of our screen. Great job. Now you know how to use
the Amazon Mobile Ads API to make the two most common types of
ads, banner ads and interstitial.

Be the First to comment.

Leave a Comment

Your email address will not be published. Required fields are marked *