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.
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.
We are going to add this line to the project build.gradle.
Open the the project build.gradle and add this line to dependencies, start it with the keyword ‘compile’ 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.
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.
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.
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.
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.
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.
Add code to the AndroidLauncher
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.
Then initiate the AdView inside the onCreate() method, and call the adListener() method.
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.
Set the RelativeLayout and add the game to it
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.
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.
Set the size
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.
Add the id
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 we are going to use AdRequest.Builder.
Request ad 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.
position the adView to the bottom of the screen
Finally we are going to add the adView to the layout and load the AdMob ad.
Add the adView to the layout and load the AdMob ad
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.
I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂
Subscribe to receive exclusive content and notifications