Android Tutorials : Firebase Admob Integration Tutorial


Admob is the #1 mobile advertising platform to grow your app business and is powered by Google’s ad technology. You can integrate AdMob in your android application and start earning right away. The best way to use AdMob is with Firebase, though Google Mobile Ads SDK remains available as a standalone SDK which can also be used to integrate Admob with your android application. Admob publishers can start taking advantage of Firebase’s free and unlimited analytics solution to monetize more intelligently, just by linking with Firebase and importing the Firebase SDK into your android application. In this tutorial we will be showing how to integrate Admob with your android application using Firebase.

Now let us create an android application on which we can integrate Firebase Admob to display Banner ads, Interstitial ads and Native Ads.

1. We will display a Banner ad at the bottom of the activity.
2. We will display an Interstitial ad covering the whole screen, once the user clicks on an item in the list of movies.
3. We will display Native ads in between the list of movies which are displayed in a RecyclerView.

Project on Github

The steps will be described in five detailed yet simple parts.

Note : Make sure you have the latest version of Google Play Services and Google repository installed in your Android SDK manager as shown below.

Part ! : Includes steps to create a new Android application and set up Firebase in it.

1. Create a new Android Project in Android Studio. Give it a name and select the Minimum SDK on which your app will run on. I chose API 16 : Android 4.1 (JELLY_BEAN).


2. When you are prompted to add an activity to your application choose Blank Activity and click on next button.

3. In the next step click on Finish and in few seconds your application should be loaded in Android Studio.

4. Open build.gradle(Module:App) file of your application and add the following dependencies inside dependencies section of build.gradle (Module:App) file.

5. The application requires following permissions to work. Your app might not work unless you add these permissions to your AndroidManifest.xml file.

Part !! : Includes Firebase account creation and getting google-services.json file from Firebase console

1. The first thing you need to do to get started with Firebase is, sign up for a free account. You can use your Google account to sign in to your Firebase account.

Android Firebase AuthUpdated

2. After clicking on ‘Sign In with Google’, you might be asked to allow the Firebase to view your Email and your basic profile. Click on Allow button to continue.

3. Once you are signed in, Click on Go to your Console button if you are not automatically redirected to your Firebase console. Click on Create New Project button in your Firebase console.


Firebase Project Name

4. Now you can see an overview of your new Firebase project. Now click on Add Firebase to your Android App as shown below.

Firebase Select Android

5. Now you need to enter your application details (your application’s package name) and also get SHA-1 finger print and paste it in the field as shown below. Check out the note below on how to get SHA-1 from Android Studio.

Firebase Admob SHA and Package Name

Click on Add App button. Upon clicking it, a file named google-services.json gets downloaded to your machine.

Note : Following image shows how to get SHA-1 from Android Studio.

Firebase Admob Signing Report in Android Studio

6. Copy the google-services.json file and paste in the app folder of your Android application.

Note: If you forget to place google-services.json file under app folder, you will get the following error when you build your app.

Android Firebase AuthUpdated

7. Open the build.gradle (Project level) file of your android application and add classpath ‘com.google.gms:google-services:3.0.0’ in the dependencies section. Your build.gradle (Project level) file will look as shown below.

8. Now add apply plugin: ‘com.google.gms.google-services’ at the bottom of your build.gradle (App level) file, just below dependencies section. Also check whether you have added the following dependencies in the dependencies section of build.gradle (App level). Click on sync now or re-build the android application.

Part !!! : Linking Admob with Firebase and getting 3 Ad unit Ids corresponding to each of the Banner Ad, Interstitial Ad and Native Ad.

1. Visit Admob (here) and sign up for a new account using your google account. Once you login to your Admob account, you will be displayed a dashboard as shown below. Click on Monetize button to add a new app to your Admob account.

Visit Admob

2. Click on Add your app manually and give it a name and select Android platform as shown below. A new App will be created and App-Id will be displayed.

Admob add your app

3. Next step is to select an Ad format and customizing it the way you want. Firstly we will start with selecting Banner ad format as shown below. After customizing the Banner ad, you need to click on Save button. Once you click on Save button, a new Ad unit will be created with a unique ad-unit Id. Please make a note of this ad-unit Id corresponding to the Banner ad we created just now.

Admob Banner ads

4. Next step is to link your admob app with the Firebase app you have created in the previous step. Click on Link to Firebase button and enter the package name of your android application. Click on Continue button.


Link Admob with Firebase

5. Now select Link to an existing Firebase project and existing Firebase app option as shown below.

6. Now you will be shown a message indicating that your Admob app is successfully linked with your Firebase project. Click on Done button.

Admob successfully linked to Firebase

7. Next step is to create an Interstitial Ad unit and customize it. Click on Create Another Ad Unit button and select Interstitial Ad format.

Admob Interstitial Ad

8. After customizing the Interstitial ad, you need to click on Save button. Once you click on Save button, a new Ad unit will be created with a unique ad-unit Id. Please make a note of this ad-unit Id corresponding to the Interstitial ad we created just now.


9. Next step is to create a Native Ad unit and customize it. Click on Create Another Ad Unit button and select Native Ad format.

Admob Native Ad

10. I have selected the ad size to be Medium and a simple template having install button. After customizing the Native ad, you need to click on Save button.

11. Once you click on Save button, a new Ad unit will be created with a unique ad-unit Id. Please make a note of this ad-unit Id corresponding to the Native ad we created just now.

12. We now have all the 3 Ad unit Ids required for this tutorial. Now if you visit Monetize tab of your Admob dashboard, it will be displayed as shown below.

Admob monetize tab

Part !V : Includes creation of new XML layout files and modification to activity_main.xml file

1. Open your activity_main.xml file and add the following code. We have a RecyclerView to hold list of movies and an AdView. AdView is a class that represents the advertising banners in the Admob SDK. This is where the banner ad from Admob gets loaded once we run our application.

2. Create a new XML layout resource file under res->layout folder and name it as activity_movie_info.xml. It includes a CardView and a Textview inside it. The activity_movie_info.xml file of our application has the following code in it.

3. Create a new XML layout resource file under res->layout folder and name it as item_movie.xml. This layout represents each item in a RecyclerView. In our case it represents a single movie item containing an ImageView to hold the movie poster, a TextView to display the name of the movie, a TextView to display the like count and an ImageView to display the like symbol. The item_movie.xml file of our application has the following code in it.

4. Create a new XML layout resource file under res->layout folder and name it as list_item_native_ad.xml. This layout represents each item in a RecyclerView.

5. At this point of time, your build.gradle (Module:app) file might look like below.

6. And also,at this point the build.gradle (Module:project) file should look like below.

6. Create colors.xml file in the values folder and add the following code. You can change the colors to change the look of the application.

7. The styles.xml file in the values folder looks like this.

8. The strings.xml file in the values folder looks like this. Always keep a habit of including all your string resources in this file. Replace the values of following resources with the Ad unit Ids you have created in the previous part of this tutorial.

9. The res->drawable folder contains few movie posters. You can download the movie posters from the following link and paste it in res->drawable folder of your project.

Download movie posters

Part V : Includes creation of new Java classes and modification to MainActivity.java file

1. Open your MainActivity.java and add the following code in it. We are displaying the list of movies in a RecyclerView with the help of an adapter class. We have loaded Banner Ads, Interstitial Ads in the MainActivity itself.

Note : The previous step has a constant TEST_DEVICE_ID. If you are testing on a real device you need to get the Device ID of your phone and replace the value of the field TEST_DEVICE_ID with the ID of your phone. You can get the Device ID of your real device during the first run of your app. When your application is running, open the logcat and write “addTestDevice” filter in the search bar. It is important as it avoids clicking on your own ads which is against Admob rules and regulations. Your Admob account gets banned if you click on your own Ads. If you have added a test device, then you can test your ads in that test device without any hesitation.

Note : If you are testing on an Emulator then you can use the follwing line which is commented in the code.

2. We need an adapter class to render the data in our RecyclerView. So create a new Java class under your package and name it as MoviesAdapter.java. As we are displaying native ads for every 3rd item in our RecyclerView, we need to distinguish between Native ads item and Movie item. Hence we are using 2 different ViewHolders.

1. MyViewHolder : Each item in this ViewHolder represents a Movie.
2. NativeAdViewHolder : Each item in this ViewHolder represents a Native Ad.

Depending on the position of an item in a RecyclerView we return the respective ViewHolder. If the position of an item is multiple of 3 we return NativeAdViewHolder. Otherwise we return MyViewHolder.

The interface MovieItemClick enables communication between the MainActivity and the MoviesAdapter to receive user generated clicks. Depending on the position of the movie item on which click is made, corresponding action associated with that item [as written in onMovieClick() method of MainActivity] will be performed.

We wil be starting a new Activity upon clicking on each Movie item in our RecyclerView as written in onMovieClick() method of the MainActivity.

It has the following code in it.

3. Create a new Java class under your package and name it as Movie.java. This is our domain class which represents a Movie. Each movie will have a name, number of likes and a poster associated with it.

4. Create a new Java class under your package and name it as MovieInfoActivity.java. This is an Activity which gets opened when the user clicks on a movie item in the RecyclerView. It gets the name of the movie on which the user has clicked from the intent passed to it and displays it in a CardView.

5. Add the name of the activity you created in the previous step to your AndroidManifest.xml file as shown below. This is how your AndroidManifest.xml should look at the end of this project.

Here is the final Result of this project as displayed on my emulator.


Admob Native Ads And Banner Ad

You can download the project from Github and try it out by including your Ad unit Ids in strings.xml file of res->values folder of this project.

Project on Github

Here is the Demo video showing how the application works when run on an Emulator.

If you have liked our tutorial, you can help us keep this website free for all Android enthusiasts by donating any small amount to my PayPal account. If you have followed our tutorial please do let us know by commenting below. It makes us write more and more articles on android application development. In case if you get stuck somewhere please do comment below and let us know. We usually reply within a day.

Useful links for Firebase Admob documentation

Firebase Admob Integration Tutorial on Android : Banner Ads, Native Ads & Interstitial Ads

14 thoughts on “Firebase Admob Integration Tutorial on Android : Banner Ads, Native Ads & Interstitial Ads

  • January 24, 2017 at 8:44 am
    Permalink

    This tutorial is very good and explained in detail. I added native ads using admob in my app referring this. Thank you!

    Reply
    • January 24, 2017 at 3:42 pm
      Permalink

      Thank You! Glad you liked it. We will keep you updated with Admob and Firebase features:)

      Reply
  • January 24, 2017 at 12:01 pm
    Permalink

    Nice Explanation! Thanks guys!

    Reply
    • January 24, 2017 at 3:40 pm
      Permalink

      Thank You! Glad you liked it. We will keep you updated with Admob and Firebase features:)

      Reply
  • January 29, 2017 at 9:38 pm
    Permalink

    Copied and pasted all code and it is showing several errors. On MainActivity.java the Movie() method is never called, and cannot resolve getmName(). Under MoviesAdapter.java getmName(), getLikes(), and getmImage() cannot be resolved. I am new to anything like this and have no idea why it’s not working. I literally copied and pasted everything. I am including copy of error message as follows and would appreciate any advice on how to fix it. I am trying to integrate ads into my app and was hoping that this sample app could show me proper ad behavior. Thank you for your efforts and I look forward to a response.

    Information:Gradle tasks [:app:clean, :app:generateDebugSources, :app:generateDebugAndroidTestSources, :app:mockableAndroidJar, :app:prepareDebugUnitTestDependencies, :app:assembleDebug]
    /home/dad/AndroidStudioProjects/FirebaseDemo/app/src/main/java/com/uniqueandroidapps/firebasedemo/MoviesAdapter.java
    Error:(73, 46) error: cannot find symbol method getmName()
    Error:(74, 50) error: cannot find symbol method getLikes()
    Error:(79, 34) error: cannot find symbol method getmImage()
    /home/dad/AndroidStudioProjects/FirebaseDemo/app/src/main/java/com/uniqueandroidapps/firebasedemo/MainActivity.java
    Error:(32, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(34, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(36, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(38, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(40, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(42, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(44, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(46, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(48, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(50, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(52, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(54, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(56, 26) error: constructor Movie in class Movie cannot be applied to given types;
    required: no arguments
    found: String,int,int
    reason: actual and formal argument lists differ in length
    Error:(79, 56) error: cannot find symbol method getmName()
    Error:Execution failed for task ‘:app:compileDebugJavaWithJavac’.
    > Compilation failed; see the compiler error output for details.
    Information:BUILD FAILED
    Information:Total time: 2.111 secs
    Information:18 errors
    Information:0 warnings
    Information:See complete output in console

    Reply
    • February 1, 2017 at 3:13 am
      Permalink

      Hi Anthony, the Movie class which you have in your project, is it similar to the one created in this tutorial?

      Reply
  • January 30, 2017 at 9:26 pm
    Permalink

    Some elements of the list are disappearing. For example, ‘World War Z 2’ was not shown. What is the solution to this?

    Reply
    • February 1, 2017 at 3:15 am
      Permalink

      Yes we have updated our code in MainActivity.java. We have added a dummy movie that will be added in every 3rd position of the list. As Native ads will be displayed in every 3rd position we cant have our Movies in every 3rd position. Thank You!

      Reply
      • February 2, 2017 at 11:04 am
        Permalink

        Nice idea. Thank you

        Reply
        • February 4, 2017 at 12:38 pm
          Permalink

          Glad you liked it. Thank You!

          Reply
  • March 5, 2017 at 6:23 am
    Permalink

    I’m stuck on the ad request builder method. I can’t find my TEST_DEVICE_ID and the app keeps crashing. From where do I get the TEST_DEVICE_ID?

    Reply
    • March 12, 2017 at 5:07 am
      Permalink

      If you are testing on a real device you need to get the Device ID of your phone and replace the value of the field TEST_DEVICE_ID with the ID of your phone. You can get the Device ID of your real device during the first run of your app. When your application is running, open the logcat and write “addTestDevice” filter in the search bar. You will find TEST device Id. Thank You!

      Reply
  • April 13, 2017 at 11:33 am
    Permalink

    it shows “Ads: Not enough space to show ad. Needs 320×132 dp, but only has 160×160 dp.”

    I am using galleryview in my app..please help me..

    Reply
  • July 15, 2017 at 11:53 am
    Permalink

    Thank you for a awesome tutorial 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *