How to integrate Admob Ads in Sketchware project using AIDE?

AIDE can be used to integrate Admob Ads to a Sketchware project. For that the source code needs to be exported first. Follow the steps below to learn the complete process.

Prerequisites

• A Sketchware project
• AIDE with pro account key purchased
• Account in Google developer console
• Account in Admob

Before placing admob ads in an app, the app needs to be uploaded to google play store, however test ads can be tried in any app.

Always place the test ad ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required.

Do not click on your own Ads.

Export the Sketchware project

In Sketchware, under MY PROJECTS, go to project settings of the app to be exported, and click on Export to PC (Android Studio).

The exported file is a zip file. Create a new folder and decompress the contents of the zip file in it.

Check whether the res folder at location app/src/main/res contains only layout folder with all xml files or it contains all other folders like drawable, drawable-xhdpi, raw, values, values-v21.

If all these folders are present then move to the next step of editing AndroidManifest.xml.

If the folders like drawable, drawable-xhdpi, raw, values, values-v21 are missing then they should be added manually as described below.

Add these folders, namely drawable, drawable-xhdpi, raw, values, values-v21, in the res folder.

Now copy all images used in the sketchware project from location:
sdcard/.sketchware/resources/images/621(specific to project)/
to the drawable folder created in exported project.

Also copy the image used as app icon to the drawable-xhdpi folder and rename the image as app_icon.png.

Copy all sound files to raw folder in the exported project.

To values and values-v21 folders add styles.xml files, which contains​ information on theme of project (like NoActionBar) and other details regarding the project. Earlier these files were available on exporting source code from sketchware, but now sketchware doesn't provide these. Styles.xml files from one of my older sketchware projects can be downloaded from this link: https://docs.google.com/uc?export=download&id=0B66os0i4YjhqWTlBc05kZEx0SFU.

Edit the AndroidManifest.xml file

Open AIDE, browse to the AndroidManifest.xml file of the exported project and open it.

In manifest element, after package name, add following:
 android:versionCode="2"
 android:versionName="1.2"
Change version code and version name as per your project.

After that add the following permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

In application element, add the following meta-data:
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />

Also add the following activity:
<activity android:name="com.google.android.gms.ads.AdActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
android:theme="@android:style/Theme.Translucent" />

Save the file after editing.

Edit main.xml file

In main.xml file change the outermost LinearLayout to RelativeLayout (optional). For this the first and last line of main.xml is to be changed.

Now in RelativeLayout element add the following code:
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"

Then add the code for banner ad just before closing RelativeLayout element.

<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>

After that save the file. Note that this code can be placed in all the pages where ads are to be displayed.

Also the adUnitId has to be replaced with your own after testing with test ads.

Edit MainActivity.java file

Add the following code in imports:
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.AdListener;

And following code as shown in image below:
private AdView mAdView;

After that initialize and load Adview, and setAdListener with following code:
MobileAds.initialize(getApplicationContext(), "ca-app-pub-3940256099942544~3347511713");
mAdView = (AdView) findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);

mAdView.setAdListener(new AdListener() {
@Override
public void onAdLoaded() {
// Code to be executed when an ad finishes loading.
Log.i("Ads", "onAdLoaded");
}
@Override
public void onAdFailedToLoad(int errorCode) {
// Code to be executed when an ad request fails.
Log.i("Ads", "onAdFailedToLoad");
}
@Override
public void onAdOpened() {
// Code to be executed when an ad opens an overlay that
// covers the screen.
Log.i("Ads", "onAdOpened");
}
@Override
public void onAdLeftApplication() {
// Code to be executed when the user has left the app.
Log.i("Ads", "onAdLeftApplication");
 }
@Override
public void onAdClosed() {
// Code to be executed when when the user is about to return
// to the app after tapping on an ad.
Log.i("Ads", "onAdClosed");
}
});

The App ID here has to be replaced with your own App ID received from Admob.

Changes to build.gradle file

Navigate to app level build.gradle and Add following to project:
'com.google.android.gms:play-services-ads:+'

Also, in build.gradle file change version code and version name to same as in AndroidManifest.xml.

Save the file.

After this if you find no errors, then run the project. If you find the error 'R cannot be resolved', then go to main.xml and make any small change and then save the file again. If you find any other error, try to resolve as per the error message.

Watch the videos below to understand better:

This post is only regarding integration of Admob banner ads. The App ID and Ad unit ID used here are those for test ads and can be used in any android project.

For interstitial ads, get the ad unit ID and code from admob follow the steps here:
http://www.sketchwarehelp.com/2017/09/how-to-integrate-admob-interstitial-ads.html.

For more information on integration of Admob Ads visit here:
https://developers.google.com/admob/android/quick-start?hl=en-GB.