fbpx

Teki – AdMob

Reading Time: 5 minutes
In the last chapters we have finished our Teki game and it works perfectly. We can change the username, we can play, and the game saves the high scores as well.
In this chapter we are going to add ads to our app, and we will use Googles AdMob platform to show ads. The ads will be visible always at the bottom of the game.

Step 1 – Add Google Play Services Ads API

The first step to show ads is to add to our app the Google Play Services Ads. On the day of writing this article the highest version was 18.3.0. You can find on this link always the current version.

Google Play Services

We are going to add this line… com.google.android.gms:play-services-ads:18.3.0

… to the project build.gradle.

Open the the project build.gradle and add this line to dependencies, start it with the keyword ‘api’ and put it in quotation marks.

If you modify the build.gradle, then you have to sync it always, so just click at the “sync now” button at the top of the window.

Step 2 – Create AdMob account

If you still don’t have AdMob account, then you can create one here.

Create AdMob Account

If you have Google account, then it takes onlye a minute… or less. 🙂

Step 3 – Add our app to AdMob

To add our app to AdMob takes only few steps. Frist of all open the left side menu on the website, and click on the App menu, then click Add App button.

After this I am going to choose no, because our app is still not uploaded to Goolge Play.

Now we will get a small form, what we have to fill out with the data about our app. We need to set the name, in our case it is Teki, and it is an Android application. In the next section of the form just check out the checkbox and enable the user metrics. It means you will get reports about your apps later.

Step 4 – The Application Id

Since we have added the app to the AdMob, we got an identification string, what we have to add to the AndroidManifest.xml, so go back to Android Studio.

You can find the AndroidManifest.xml file under the android and the manifest folder. Open it.


AndroidManifest.xml

Step 5 – Create Banner ad

Now we are able to create our first ad, and it’s type going to be a banner ad. To do that open your app, and select from the left menu the Ad Unit. In the next window click on the blue Add Ad Unit button.
Select the Banner ad type and fill out the form, give a name for your banner. If you are done, then click on the Create ad unit button.

The next page tells us to place the ad unit inside our code, but we will do that a little bit later. We have here the application id and a uniqe id for the banner ad as well. We need the banner Id later, because we have to add it to the kotlin code of our app.

Step 6 – AndroidLauncher.kt

Before we add the ad unit to our code, we have to translate the AndroidLauncher Java file to a Kotlin one. It is very easy. 🙂

You can find the AndroidLauncher.java file in the android-java-app package folder, open it and copy the whole code and paste it to a text file, because we will need it later.

Open also the AndroidManifest.xml also and copy and paste the code from it again to the text file.

Delete the AndroidLauncher.java file and create in the same folder with the same name a Kotlin file there.

Paste the copied Java source code into the Kotlin file. Android Studio will automatically translate the code to Kotlin code.

Now go back to the AndroidManifest.xml and copy back the source code here also. It is needed because we have deleted the AndroidLuncher.java. It was an activity, and Android Studio automatically deteled it from here.

Now if you run the app, then it has to work fine as before.

Step 7 – Add code to the AndroidLauncher

To show the AdMob ad, we are going to use a RelativeLayout. Using this we can set the two different views. One for our libGDX game, and another one for our ad.

Basically we will have a view specifically for the ad and we are going to call it as adView. So just add at the beginning of the AndroidLauncher this line.

private var adView: AdView? = null

Set log message

What we are going to do is to add a listener to this ad view so when the ad loads we get some sort log in our LogCat. Add the TAG line before the AdView line.

private val TAG = “AndroidLauncher”

Then initiate the AdView inside the onCreate method, and call the adListener method.

adView = AdView(this)
adView!!.adListener = object : AdListener() {
    override fun onAdLoaded() {
        Log.i(TAG, “Ad Loaded…”)
    }
}

Set the RelativeLayout and add the game to it

Next let’s go ahead and set out our layout. We are going to put our Android game inside of a view and that’s going to be the main part of our layout.

val layout = RelativeLayout(this)
val config = AndroidApplicationConfiguration()
val gameView: View = initializeForView(TekiClass(), config)
layout.addView(gameView)

Here first we have created the RelativeLayout, then we save the Application Configuration to a config variable, because we need it to the initializeForView, what was automatically generated by the libGDX. In the 4. line just add the gameView to the RelativeLayout.

Add the adView to the RelativeLayout

Now we need to configure the size of our ads. We are going to add smart banner. Smart Banners are ad units that render screen-width banner ads on any screen size across different devices in either orientation. They detect the width of the device in its current orientation and create the ad view that size.

adView!!.adSize = AdSize.SMART_BANNER

Here we need the add the ad unit id as well. So go to the AdMob website, open the created banner ad, and just copy its id. You can add the id using this line.

adView!!.adUnitId = “ca-app-pub-  3940256099942544/6300978111”

This ad unit is just the official test ad unit. You can use it during the development phase of your app. When you will upload the app to Google Play don’t forget to change it to the real one.

To request the ads from google for us we are going to use AdRequest.Builder.

val builder = AdRequest.Builder()

We have to set the size of the adView as well, so we are going to add the layout with WRAP_CONTENT. Setting a View’s size to WRAP_CONTENT will force it to expand only far enough to contain the values (or child controls) it contains.

We have to define a rule as well. It means, we have set the position of the adView. We are going to position it to the bottom of the screen.

val adParams = RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.WRAP_CONTENT,
    RelativeLayout.LayoutParams.WRAP_CONTENT)

adParams.addRule(
    RelativeLayout.ALIGN_PARENT_BOTTOM,
    1)

Finally we are going to add the adView to the layout and load the AdMob ad.

layout.addView(adView, adParams)
adView!!.loadAd(builder.build())
setContentView(layout)

Now you run the app, but the ads won’t work, becuase Google don’t want to pay for the development of app. They pay only for real visitores and clicks. You will see only a congratulation and the size of the ad. When we will upload the app to Google we are going to change the ad ID to the real one.

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Click to rate this post!
[Total: 0 Average: 0]
Follow and like us:

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications