AdMob is a multi platform mobile ad network that allows you to monetize your android app. By integrating AdMob you can start earning right away. It is very useful particularly when you are publishing a free app and want to earn some money from it.
Integrating AdMob is such an easy task that it takes not more than 5mins. In this article we’ll build a simple app with two screen to show the different types of ads that AdMob supports.
1. Type of Ads – Banner and Interstitial
AdMob currently support two kinds of ad units. One is Banner ad which occupies a portion of the screen. Other is Interstitial ad which occupies device full screen. Interstitial completely blocks your app UI and places the ad on top it.
2. Creating Ad Units
2. Click on Monetize tab.
3. Select or Create the app and choose the platform.
4. Select the ad format either Banner or Interstitial and give the ad unit a name.
5. Once the ad unit is created, you can notice the Ad unit ID on the dashboard. An example of ad unit id look like ca-app-pub-066457076332243242/3326342124
Create as many ad units required for your app.
Create two ad units, one for banner and other for interstitial as we need to use the ad unit IDs in the next section.
3. Creating New Project
1. Create a new project in Android Studio from File ⇒ New Project. When it prompts you to select the default activity, select Empty Activity and proceed.
2. Open build.gradle and add play services dependency as AdMob requires it.
compile ‘com.google.android.gms:play-services-ads:8.4.0’
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' compile 'com.google.android.gms:play-services-ads:8.4.0'} |
3. Add the Ad unit IDs to your strings.xml. Open strings.xml located under res ⇒ values and add the ad units of both Banner and Interstitial.
<resources> <string name="app_name">AdMob</string> <string name="title_activity_second_activiy">Interstitial</string> <string name="msg_welcome">Welcome to Admob. Click on the below button to launch the Interstitial ad.</string> <string name="btn_fullscreen_ad">Show Fullscreen Ad</string> <!-- AdMob ad unit IDs --> <string name="banner_home_footer">ca-app-pub-0664573200302260/332653322424</string> <string name="interstitial_full_screen">ca-app-pub-066498932138293260/1769900428</string></resources> |
4. Open AndroidManifest.xml and add the below mentioned permissions and other properties.
> Add INTERNET & ACCESS_NETWORK_STATE permissions.
> Add google play services version meta-data.
> Add the AdActivity adding configChanges and theme attributes.
<?xml version="1.0" encoding="utf-8"?> package="info.androidhive.admob"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <!--Include the AdActivity configChanges and theme. --> <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:theme="@android:style/Theme.Translucent" /> </application></manifest> |
3.1 Adding Banner Ad
Banner ads occupies only a portion of the screen. I am adding a banner ad in my main activity aligning to bottom of the screen. In order to add the banner ad, you need to add com.google.android.gms.ads.AdViewelement to your xml layout.
<com.google.android.gms.ads.AdView android:id="@+id/adView" android:layout_width="wrap_content" android:layout_height="wrap_content" ads:adSize="BANNER" ads:adUnitId="@string/banner_home_footer"> </com.google.android.gms.ads.AdView> |
5. Open the layout file of your main activity (activity_main.xml) and add the AdView widget. I am also adding a button to launch another in which we’ll try Interstitial ad.
<?xml version="1.0" encoding="utf-8"?> android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="info.androidhive.admob.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/msg_welcome" /> <Button android:id="@+id/btn_fullscreen_ad" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/btn_fullscreen_ad"/> <com.google.android.gms.ads.AdView 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="@string/banner_home_footer"> </com.google.android.gms.ads.AdView></RelativeLayout> |
6. Open MainActivity.java and modify the code as shown.
> Create an instance of AdRequest and load the ad into AdView.
> Ad the AdView life cycle methods in onResume(), onPause() and in onDestroy() methods.
package info.androidhive.admob;import android.content.Intent;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;import android.widget.Toast;import com.google.android.gms.ads.AdListener;import com.google.android.gms.ads.AdRequest;import com.google.android.gms.ads.AdView;public class MainActivity extends AppCompatActivity { private AdView mAdView; private Button btnFullscreenAd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mAdView = (AdView) findViewById(R.id.adView); AdRequest adRequest = new AdRequest.Builder() .build(); mAdView.loadAd(adRequest); btnFullscreenAd = (Button) findViewById(R.id.btn_fullscreen_ad); btnFullscreenAd.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { startActivity(new Intent(MainActivity.this, SecondActivity.class)); } }); } @Override public void onPause() { if (mAdView != null) { mAdView.pause(); } super.onPause(); } @Override public void onResume() { super.onResume(); if (mAdView != null) { mAdView.resume(); } } @Override public void onDestroy() { if (mAdView != null) { mAdView.destroy(); } super.onDestroy(); }} |
Now if you run the app, you should see a banner ad at the bottom of your screen.
3.2 Adding Interstitial Ad (Fullscreen Ad)
Interstitial ads occupies full screen of the app. Adding interstitial ad doesn’t require an AdView element to be added in the xml layout. Rather we load the ad programatically from the activity. Normally these ads will be populated when user is moving between activities or moving to next level when playing a game.
We’ll test this ad by creating a second activity and popup the full screen ad when the second activity is launched.
7. Create an activity named SecondActivity.java by right clicking on package New ⇒ Activity ⇒ Empty Activity.
package info.androidhive.admob;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.Toast;import com.google.android.gms.ads.AdListener;import com.google.android.gms.ads.AdRequest;import com.google.android.gms.ads.InterstitialAd;public class SecondActivity extends AppCompatActivity { private String TAG = SecondActivity.class.getSimpleName(); InterstitialAd mInterstitialAd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); mInterstitialAd = new InterstitialAd(this); // set the ad unit ID mInterstitialAd.setAdUnitId(getString(R.string.interstitial_full_screen)); AdRequest adRequest = new AdRequest.Builder() .build(); // Load ads into Interstitial Ads mInterstitialAd.loadAd(adRequest); mInterstitialAd.setAdListener(new AdListener() { public void onAdLoaded() { showInterstitial(); } }); } private void showInterstitial() { if (mInterstitialAd.isLoaded()) { mInterstitialAd.show(); } }} |
Now if you run the app, you can see the interstitial ad when the second activity is launched.
3.3 Enabling Test Ads
As per AdMob Policies you are not allowed to click on your own live ads. In order to protect your AdMob account from getting suspended, use test ads during development as you might click the ads accidentally.
When you run the project, if you monitor the LogCat, you can find a similar line Use AdRequest.Builder.addTestDevice(“C04B1BFFB0774708339BC273F8A43708”) to get test ads on this device. Copy the device id and add it to AdRequest as shown below. Note that this ID varies from device to device, By doing this, the test ads will be loaded instead of live ads.
In production you need to make sure that you removed addTestDevice() methods in order to render the live ads and start monetization.
AdRequest adRequest = new AdRequest.Builder() .addTestDevice(AdRequest.DEVICE_ID_EMULATOR) // Check the LogCat to get your test device ID .addTestDevice("C04B1BFFB0774708339BC273F8A43708") .build(); |
3.4 Ad View Listeners
Ad listeners are very useful to perform the next action when ad is closed. Below are the ad listeners can be used to notify your app when ad changes its state.
mAdView.setAdListener(new AdListener() { @Override public void onAdLoaded() { Toast.makeText(getApplicationContext(), "Ad is loaded!", Toast.LENGTH_SHORT).show(); } @Override public void onAdClosed() { Toast.makeText(getApplicationContext(), "Ad is closed!", Toast.LENGTH_SHORT).show(); } @Override public void onAdFailedToLoad(int errorCode) { Toast.makeText(getApplicationContext(), "Ad failed to load! error code: " + errorCode, Toast.LENGTH_SHORT).show(); } @Override public void onAdLeftApplication() { Toast.makeText(getApplicationContext(), "Ad left application!", Toast.LENGTH_SHORT).show(); } @Override public void onAdOpened() { Toast.makeText(getApplicationContext(), "Ad is opened!", Toast.LENGTH_SHORT).show(); } }); |
0 comments: