Android Firebase Admob Integration Example Tutorial

In this simple tutorial, we are going to learn how to add Android Firebase Admob in our android application. Google has move Admob integration as pack of the features available in Firebase back-end service.

The good thing about integrating android Firebase Admob in android app is that it is very easy to achieve. We will walk through the processes that are involved.

If you want to integrate Android Admob Interstitials according to Google recommendation, I will suggest that your read by android tutorial on Android Admob Interstitials Integration.

We are going to create a simple android application with Google AdView control as part of the layout file. Feel free to use whatever layout design that fits your application needs

 

Register Your Application and Integrate Firebase SDK

For us to use android Firebase Admob service in our application, we create a new Firebase Project and register our android application. If you have a per-existing Firebase project, you can simple add this android project to it.

Follow the steps below to register and integrate Firebase SDK to your android project.

Go the Firsbase webite and register if you don’t have an account already. The registration is very simple. After registration, go to the console dashboard and click on create new project button.

In the window modal, enter the name of your project and country as shown in the image below

Android firebase

Click on the create project button to continue. In the console, click the button add Firebase to your android app as shown below

Android firebase

In the next window, add the Package name of your application and click the Add App button as shown below.

Android firebase

Click the continue button to download a Json configuration file which will be added in the root App directory of your project. See the image below

Android firebase

Following the instructions on how to add the Google Services plugin and the Firebase SDK in build.gradle as shown below.

Android firebase

We have successfully added Firebase to our project. We will now focus on our android project.

Register with Google Admob and obtain Ad ID

After complete integration of Firebase SDK, we are move on to Google Admob website (https://www.google.com/admob/) to register account as one of Google ad publish. Once the registration is approved by Google, we will create a banner add and obtain the banner ad id which we will add in the strings.xml file as shown

<string name="google_ad_id"> id here </string>
<string name="google_ad_id"> id here </string>

Before we dive into more details, it is important for us to understand what we are planning to achieve. Below is the screen-shot of the application we will be creating.

firebase admob ad

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 10

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidFirebaseAdmob

Package: com.inducesmile.androidfirebaseadmob

Select Blank Activity

Name your activity : MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

 

Build.gradle

We are going to complete Firebase integration in our android project by modifying the project build.gradle file.

Open the Project build.gradle file and add a classpath for google services as shown below.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.0.0'
        classpath 'com.google.gms:google-services:3.0.0'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        jcenter()
    }
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

Open the app build.gradle and add Firebase ad dependency and google services plugin as shown below.

apply plugin: 'com.android.application'
android {
    compileSdkVersion 24
    buildToolsVersion "23.0.3"
    defaultConfig {
        applicationId "com.inducesmile.androidfirebaseadmob"
        minSdkVersion 14
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.google.firebase:firebase-ads:9.0.2'
}
apply plugin: 'com.google.gms.google-services'

Manifest.xml

Since Google is serving the advertisement from their server, it will require network call behind the hood.

We are going to add use permission for internet in Manifest.xml file.

The modify version of Manifest.xml file is shown below

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.inducesmile.androidfirebaseadmob">
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Strings.xml

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<resources>
    <string name="app_name">Android Firebase Admob</string>
    <string name="make_money">Make money with Firebase Admon</string>
    <string name="integration">Easy integration, secure money</string>
    <string name="google_ad_id"> </string>
</resources>

Colors.xml

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#ffffff</color>
    <color name="colorBlack">#000000</color>
</resources>

activity_main.xml

in this layout file, you can add whatever View control you like but make sure that the layout must include a google AdView widget.

Open this layout file and add the code below

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    tools:context="com.inducesmile.androidfirebaseadmob.MainActivity">
    <TextView
        android:id="@+id/make_money"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/make_money"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_marginTop="32dp"
        android:textColor="@color/colorWhite"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"/>
    <TextView
        android:id="@+id/how_to_make_money"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/integration"
        android:layout_marginTop="4dp"
        android:textSize="12sp"
        android:textColor="@color/colorBlack"
        android:layout_alignRight="@+id/make_money"
        android:layout_below="@+id/make_money"/>
    <ImageView
        android:id="@+id/money_bag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/basket"
        android:layout_below="@id/how_to_make_money"/>
    <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="SMART_BANNER"
        android:foregroundGravity="center"
        ads:adUnitId="@string/google_ad_id">
    </com.google.android.gms.ads.AdView>
</RelativeLayout>

MainActivity.java

In this class, we will get the instance of the AdView control. But first, the Firebase Ad is initialized.

Subsequently, the ad request is build and loaded. Open the Activity class and add the code below.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        MobileAds.initialize(getApplicationContext(), getString(R.string.google_ad_id));
        AdView mAdView = (AdView) findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        mAdView.loadAd(adRequest);
    }
}

This brings us to the end of this tutorial. I hope that you have learn something. Run your app and see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorial, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive my new android blog post once it is published.

Please if you love this tutorial, kindly download my android app – Complete Mathematics – in Google Play Store and let me know what you think about it.

One Response

Add a Comment