How to integrate Admob Ads in Sketchware project using AIDE?

AIDE can be used to integrate Admob Ads to a Sketchware project. First export the source code of your sketchware android project and then  follow the steps below to learn how to integrate Admob banner ads in AIDE.

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.

Changes to build.gradle file

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

Save the file.

Edit the AndroidManifest.xml file

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

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

In application element add your APP ID by adding following meta-data:
<application>
<meta-data
android:name = "com.google.android.gms.ads.APPLICATION_ID"
android:value = "ca-app-pub-3940256099942544~3347511713"/>
</application>

Important: This step is required as of Google Mobile Ads SDK version 17.0.0. Failure to add this <meta-data> tag results in a crash with the message:"The Google Mobile Ads SDK was initialized incorrectly."

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, create a new RelativeLayout to surround the outermost Layout. For this add following code in the beginning of main.xml:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent" >


Then add the code for AdView banner ads 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>


In the end close RelativeLayout using following code:
</RelativeLayout>

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() {
Log.i("Ads", "onAdLoaded");
}
@Override
public void onAdFailedToLoad(int errorCode) {
Log.i("Ads", "onAdFailedToLoad");
}
@Override
public void onAdOpened() {
Log.i("Ads", "onAdOpened");
}
@Override
public void onAdLeftApplication() {
Log.i("Ads", "onAdLeftApplication");
 }
@Override
public void onAdClosed() {
Log.i("Ads", "onAdClosed");
}
});



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

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 the app crashes after installing then there is  likely an error in main.xml.

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.

Comments

  1. Getting an error no resource found that matches the given name @integer/google_play_services_version

    ReplyDelete
    Replies
    1. In Android manifest.xml,
      Remove complete meta-data code you copied from here.

      Delete
  2. Using relatIve layout making my custom action bar missing

    ReplyDelete
  3. Can you explain why the App must be in Google Play store before placing admob ads Or perhaps a tutorial how to load the app with ads in the playstore

    ReplyDelete
  4. Please help. The Google Firebase packages have not been imported in aide. It can't compile.

    ReplyDelete
    Replies
    1. You can add the firebase database library to your project. In dependencies in build.gradle

      Delete
  5. Could you please give me clear instructions? (Proper commands and where to type them) I'm a beginner and I want to learn 😀

    ReplyDelete
    Replies
    1. In build.gradle Click on add to project, as shown in last image in this app. Then from options select com.google.firebase: firebase-database:+

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. I did everything but ads not appear.

    ReplyDelete
  8. When i open project in AIDE it says 60 errors!!!

    ReplyDelete
    Replies
    1. hi .. when i export my project to AIDE i found 1606 problem !!!
      how can i solve that plz

      Delete
  9. When I import my app in AIDE I got a lots or Errors.

    How to fix them?

    Please help me...

    ReplyDelete
  10. sir ,
    please help me

    When I requesting for the ad my app suddenly got stopped

    ReplyDelete
  11. Brother

    How to add admob in new version of sketchware...
    Can you plz help us....???

    ReplyDelete
  12. then how do you replace the actual ad "open the test test ad or how to replace the test ad on the sketchware project with your own ad.

    ReplyDelete
  13. hi bro
    when i share my app to friends the ads stop shoing it gone disapear from my app please help me bro

    ReplyDelete
  14. Since you guys were having problems loading the ads, I decided to help.
    Download APK Editor Pro
    Link: https://rexdl.com/android/apk-editor-pro-apk.html/

    1. Go to settings in APK Editor Pro.

    2. Sign the APK with key created by APK Editor.

    3. Go back and click Select APK From App.

    4. Then select an app.

    5. Set the language as [Default].

    6. Click build. You might need to uninstall the app and install it again.

    Happy implementing! :)

    ReplyDelete

Post a Comment

Popular posts from this blog

A Flash Light App in Sketchware

Create Music Player app in Sketchware

Simple car racing android game in Sketchware

In Sketchware: How to create a calculator for any simple formula?

Firebase auth in Sketchware for Login Activity