In the world of mobile app development, monetization is a crucial aspect. One popular method to generate revenue from Android apps is by integrating ads. AdMob, a leading mobile advertising platform, offers various ad formats, including native ads that seamlessly blend with the app's content.
In this article, we will learn to integrate Google Admob Native Ad in your Android app, so before going to the coding part we will first learn some basics and features of Native Ads. We aim to guide you through the process of integrating native ads and maximizing your app's earning potential. You can learn about adding Banner Ads, Interstitial Ads, and Rewarded Ads in Android apps from our previous tutorials too.
Native Ads :
Native Ad is similar to a banner Ad but with some customizations so that it leads to a better user experience and matches the UI or theme of our app and becomes less disturbing to the user and hence increasing the user engagement with the app and increases the revenue and it is of 2 types:
-
Small Native Ads
-
Medium Native Ads
Feature of Native Ad
-
Support frequency cap means we can decide how many ads are shown to the user daily or hourly or per minute
-
The eCPM is high as compared to Banner Ads but less than the Interstitial Ads and Rewarded Ads, so it leads to more revenue than banner Ads
-
Support both Mobile phones and Tablets
-
The fill rate is maximum
-
We can customize the layout of the native ad so that it will fit with the ui of our app
-
Even work with low internet connection speed as the ads which are shown to the users will take fewer data
-
we can place the native ad anywhere in our app such as at the bottom, at the top, or in-between the items of the recycler or list view or in a simple horizontal or vertical scroll views
So let's implement a simple Admob Native Ad in our Android app.
How to add Admob Native Ad in Android App
Step 1: Create a new Project
-
Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)
-
Choose "Empty Activity" from the project template window and click Next
-
Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 19: Android 4.4 (KitKat) )
-
Next, click on the Finish button after filling in the above details
-
Now wait for the project to finish building.
Step 2: Adding the Native Templates
To add Native Templates to our app we have to follow some basic steps:
-
First, we have to download the Native Templates, so get to developers. Google
-
Then click on the Download Native Templates, now you will be directed to Github
-
Then download the zip file from GitHub and extract the zip file to any folder and remember the location of the folder, we will use it later
-
Now go inside Android Studio and click on File->New->Import Module, Now you will see a new window (Import Module from Source) Now click on the Browse icon and select the nativetemplates folder and click on Finish and wait for Gradle build to finish.
-
Now open the Gradle Scripts->build.gradle (Module: app) section and import the nativetemplates project and click the "sync Now" show at the top as shown below:
//adding native templates
implementation project(':nativetemplates')
- Now our build.gradle file looks like this as shown below:
apply plugin: 'com.android.application'
android {
compileSdkVersion 29
buildToolsVersion "29.0.3"
defaultConfig {
applicationId "com.studytonight.project"
minSdkVersion 19
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
//adding native templates
implementation project(':nativetemplates')
}
Step 3: Adding the Mobile Ads SDK
To show the native ads in our app we also have to implement the Admob sdk in our app, to do so follow the below steps.
Go to Gradle Scripts->build.gradle (Module: app) section and import the below dependencies and click the “sync Now” shown at the top
dependencies {
// adding Admob SDK
implementation 'com.google.android.gms:play-services-ads:19.4.0'
}
Now our build.gradel file looks like
apply plugin: 'com.android.application'
android {
compileSdkVersion 29
buildToolsVersion "29.0.3"
defaultConfig {
applicationId "com.studytonight.project"
minSdkVersion 19
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
// adding Admob SDK
implementation 'com.google.android.gms:play-services-ads:19.4.0'
//adding native templates
implementation project(':nativetemplates')
}
Step 4: Modify AndroidManifest.xml
- Go to app->manifests->AndroidManifest.xml file and add the internet permission to the Android Manifest file:
<manifest>
<uses-permission android:name= "android.permission.INTERNET"/>
</manifest>
- Now we add our AdMob AppId to your in AndroidManifest file by adding the <meta-data> tag inside the
<application> tag
<manifest>
<application>
<meta-data
android:name= "com.google.android.gms.ads.APPLICATION_ID"
android:value= "ca-app-pub-3940256099942544~3347511713"/>
</application>
</manifest>
-
To show video ads in the Native ad views, hardware acceleration must be turned on. In Android the hardware acceleration is enabled by default, we can also enable and disable it for the entire or for each activity separately in our Android manifest file as shown below:
<!-- for the entire app -->
<application
android:hardwareAccelerated="true"></application>
<!-- for the each activity -->
<application>
<activity
android:hardwareAccelerated="true"> </activity>
</application>
-
The Complete code of AndroidManifest.xml file is shown below
<?xml version= "1.0" encoding= "utf-8"?>
<manifest xmlns:android= "http://schemas.android.com/apk/res/android"
package= "com.studytonight.project">
<!-- adding internet permission to show allow app to use internet to load and show ads -->
<uses-permission android:name= "android.permission.INTERNET"/>
<!-- hardware Acceleration is turned on for the entire app -->
<application
android:hardwareAccelerated= "true"
android:allowBackup= "true"
android:icon= "@mipmap/ic_launcher"
android:label= "@string/app_name"
android:roundIcon= "@mipmap/ic_launcher_round"
android:supportsRtl= "true"
android:theme= "@style/AppTheme">
<activity
android:screenOrientation="portrait"
android:name= ".MainActivity">
<intent-filter>
<action android:name= "android.intent.action.MAIN" />
<category android:name= "android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- Adding AdMob App Id -->
<meta-data
android:name= "com.google.android.gms.ads.APPLICATION_ID"
android:value= "ca-app-pub-3940256099942544~3347511713"/>
</application>
</manifest>
Step 5: Modify activity_main.xml
We create 3 Buttons to load and show Native ads inside a vertical linearLayout:
<!-- vertical linear layout with 3 button -->
<LinearLayout
android:layout_centerInParent= "true"
android:layout_margin= "16dp"
android:orientation= "vertical"
android:layout_width= "match_parent"
android:layout_height= "wrap_content">
<!-- Simple Buttons to Load Native Ad when clicked -->
<Button
android:textSize= "24dp"
android:layout_margin= "8dp"
android:id= "@+id/loadNativeBtn"
android:text= "Load Native Ad"
android:fontFamily= "serif"
android:textStyle= "bold"
android:textColor= "#ffffff"
android:background= "@color/colorPrimary"
android:layout_width= "match_parent"
android:layout_height= "60dp"/>
<!-- Simple Buttons to Show Native Ad if is is loaded when clicked -->
<Button
android:textSize= "24dp"
android:layout_margin= "8dp"
android:id= "@+id/showNativeBtn"
android:text= "Show Native Ad"
android:fontFamily= "serif"
android:textStyle= "bold"
android:textColor= "#ffffff"
android:background= "@color/colorPrimary"
android:layout_width= "match_parent"
android:layout_height= "60dp"/>
<!-- Simple Buttons to Hide Native Ad if it is shown -->
<Button
android:textSize= "24dp"
android:layout_margin= "8dp"
android:id= "@+id/hideNativeBtn"
android:text= "Hide Native Ad"
android:fontFamily= "serif"
android:textStyle= "bold"
android:textColor= "#ffffff"
android:background= "@color/colorPrimary"
android:layout_width= "match_parent"
android:layout_height= "60dp"/>
</LinearLayout>
Next, we add the TemplateView inside the layout as shown below:
<!-- Template View for native ad -->
<com.google.android.ads.nativetemplates.TemplateView
android:layout_alignParentBottom= "true"
android:visibility= "gone"
android:id= "@+id/nativeTemplateView"
app:gnt_template_type= "@layout/gnt_medium_template_view"
android:layout_width= "match_parent"
android:layout_height= "wrap_content" />
There are 2 types of templates and we can change them using the code app:gnt_template_type=
The complete code of activity_main.xml is shown below:
<?xml version= "1.0" encoding= "utf-8"?>
<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"
xmlns:app= "http://schemas.android.com/apk/res-auto"
xmlns:tools= "http://schemas.android.com/tools"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
tools:context= ".MainActivity">
<!-- Template View for native ad -->
<com.google.android.ads.nativetemplates.TemplateView
android:layout_alignParentBottom= "true"
android:visibility= "gone"
android:id= "@+id/nativeTemplateView"
app:gnt_template_type= "@layout/gnt_medium_template_view"
android:layout_width= "match_parent"
android:layout_height= "wrap_content" />
<!-- vertical linear layout with 3 button -->
<LinearLayout
android:layout_centerInParent= "true"
android:layout_margin= "16dp"
android:orientation= "vertical"
android:layout_width= "match_parent"
android:layout_height= "wrap_content">
<!-- Simple Buttons to Load Native Ad when clicked -->
<Button
android:textSize= "24dp"
android:layout_margin= "8dp"
android:id= "@+id/loadNativeBtn"
android:text= "Load Native Ad"
android:fontFamily= "serif"
android:textStyle= "bold"
android:textColor= "#ffffff"
android:background= "@color/colorPrimary"
android:layout_width= "match_parent"
android:layout_height= "60dp"/>
<!-- Simple Buttons to Show Native Ad if is is loaded when clicked -->
<Button
android:textSize= "24dp"
android:layout_margin= "8dp"
android:id= "@+id/showNativeBtn"
android:text= "Show Native Ad"
android:fontFamily= "serif"
android:textStyle= "bold"
android:textColor= "#ffffff"
android:background= "@color/colorPrimary"
android:layout_width= "match_parent"
android:layout_height= "60dp"/>
<!-- Simple Buttons to Hide Native Ad if it is shown -->
<Button
android:textSize= "24dp"
android:layout_margin= "8dp"
android:id= "@+id/hideNativeBtn"
android:text= "Hide Native Ad"
android:fontFamily= "serif"
android:textStyle= "bold"
android:textColor= "#ffffff"
android:background= "@color/colorPrimary"
android:layout_width= "match_parent"
android:layout_height= "60dp"/>
</LinearLayout>
</RelativeLayout>
Step 6: MainActivity.java file
First, we have to import the library inside the ActivityMain.java
//library for Button, View and Toast
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
// important library for Google adMob
import com.google.android.ads.nativetemplates.NativeTemplateStyle;
import com.google.android.ads.nativetemplates.TemplateView;
import com.google.android.gms.ads.AdLoader;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.formats.UnifiedNativeAd;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;
Now inside the MainActivity class, we create an object of AdLoader, TemplateView, Button (loadAdBtn, showAdBtn, hideAdBtn) and a boolean variable to store the status of the ad loaded or not as shown below:
//creating Object of AdLoader
private AdLoader adLoader ;
// simple boolean to check the status of ad
private boolean adLoaded=false;
//creating Object of Buttons
private Button loadAdBtn;
private Button showAdBtn;
private Button hideAdBtn;
//creating Template View object
TemplateView template;
Now inside the onCreate we initialize the MobileAds and show a simple toast message when initialization is completed using the below code:
// Initializing the Google Admob SDK
MobileAds.initialize (this, new OnInitializationCompleteListener() {
@Override
public void onInitializationComplete( InitializationStatus initializationStatus ) {
//Showing a simple Toast Message to the user when The Google AdMob Sdk Initialization is Completed
Toast.makeText (MainActivity.this, "AdMob Sdk Initialize "+ initializationStatus.toString(), Toast.LENGTH_LONG).show();
}
});
Next, we will initialize the Button and AdLoader inside the onCreate method after initializing the SDK. AdLoader constructor has 2 parameters:
and add the UnifiedNativeAdLoadedListener inside onUnifiedNativeAdLoaded method we initialize as shown below:
// Initializing the Button objects to their respective views from activity_main.xml file
loadAdBtn = (Button) findViewById(R.id.loadNativeBtn);
showAdBtn = (Button) findViewById(R.id.showNativeBtn);
hideAdBtn = (Button) findViewById(R.id.hideNativeBtn);
//Initializing the AdLoader objects
adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110").forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
private ColorDrawable background;@Override
public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
NativeTemplateStyle styles = new
NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
template = findViewById(R.id.nativeTemplateView);
template.setStyles(styles);
template.setNativeAd(unifiedNativeAd);
adLoaded = true;
// Showing a simple Toast message to user when Native an ad is Loaded and ready to show
Toast.makeText(MainActivity.this, "Native Ad is loaded, now you can show the native ad", Toast.LENGTH_LONG).show();
}
}).build();
Now we will create a simple method loadNativeAd() to load the Native Ad inside MainActivity class as show below:
private void loadNativeAd()
{
// Creating an Ad Request
AdRequest adRequest = new AdRequest.Builder().build() ;
// load Native Ad with the Request
adLoader.loadAd(adRequest) ;
// Showing a simple Toast message to user when Native an ad is Loading
Toast.makeText (MainActivity.this, "Native Ad is loading ", Toast.LENGTH_LONG).show() ;
}
Next, we create another method showNativeAd() to show the Native Ad to the user if it is loaded and if it is not loaded we will load the Native ad using the above method loadNativeAd() and show the toast message to the user according to the condition as shown below:
private void showNativeAd()
{
if ( adLoaded )
{
template.setVisibility( View.VISIBLE) ;
// Showing a simple Toast message to user when an Native ad is shown to the user
Toast.makeText (MainActivity.this, "Native Ad is loaded and Now showing ad ", Toast.LENGTH_LONG).show() ;
}
else
{
//Load the Native ad if it is not loaded
loadNativeAd() ;
// Showing a simple Toast message to user when Native ad is not loaded
Toast.makeText (MainActivity.this, "Native Ad is not Loaded ", Toast.LENGTH_LONG).show() ;
}
}
Now we create a click listener inside the onCreate method so that the above functions are executed when the buttons are clicked, which we have created in our activity_main.xml file:
//OnClickListener listeners for loadAdBtn and showAdBtn buttons
loadAdBtn.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick( View view) {
//calling the loadNativeAd method to load the Native Ad
loadNativeAd() ;
}
});
showAdBtn.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick( View view) {
//calling the showNativeAd method to show the Native Ad
showNativeAd() ;
}
});
hideAdBtn.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick( View view) {
//calling the showNativeAd method to hide the Native Ad
hideNativeAd() ;
}
});
The Completed code of MainActivity.java is shown below:
package com.studytonight.project;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
//library for Button, View and Toast
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
// important library for Google adMob
import com.google.android.ads.nativetemplates.NativeTemplateStyle;
import com.google.android.ads.nativetemplates.TemplateView;
import com.google.android.gms.ads.AdLoader;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.formats.UnifiedNativeAd;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;
public class MainActivity extends AppCompatActivity {
//creating Object of AdLoader
private AdLoader adLoader;
// simple boolean to check the status of ad
private boolean adLoaded = false;
//creating Object of Buttons
private Button loadAdBtn;
private Button showAdBtn;
private Button hideAdBtn;
//creating Template View object
TemplateView template;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing the Google Admob SDK
MobileAds.initialize(this, new OnInitializationCompleteListener() {@Override
public void onInitializationComplete(InitializationStatus initializationStatus) {
//Showing a simple Toast Message to the user when The Google AdMob Sdk Initialization is Completed
Toast.makeText(MainActivity.this, "AdMob Sdk Initialize " + initializationStatus.toString(), Toast.LENGTH_LONG).show();
}
});
// Initializing the Button objects to their respective views from activity_main.xml file
loadAdBtn = (Button) findViewById(R.id.loadNativeBtn);
showAdBtn = (Button) findViewById(R.id.showNativeBtn);
hideAdBtn = (Button) findViewById(R.id.hideNativeBtn);
//Initializing the AdLoader objects
adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110").forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
private ColorDrawable background;@Override
public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
NativeTemplateStyle styles = new
NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
template = findViewById(R.id.nativeTemplateView);
template.setStyles(styles);
template.setNativeAd(unifiedNativeAd);
adLoaded = true;
// Showing a simple Toast message to user when Native an ad is Loaded and ready to show
Toast.makeText(MainActivity.this, "Native Ad is loaded ,now you can show the native ad ", Toast.LENGTH_LONG).show();
}
}).build();
//OnClickListener listeners for loadAdBtn and showAdBtn buttons
loadAdBtn.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
//calling the loadNativeAd method to load the Native Ad
loadNativeAd();
}
});
showAdBtn.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
//calling the showNativeAd method to show the Native Ad
showNativeAd();
}
});
hideAdBtn.setOnClickListener(new View.OnClickListener() {@Override
public void onClick(View view) {
//calling the showNativeAd method to hide the Native Ad
hideNativeAd();
}
});
}
private void loadNativeAd() {
// Creating an Ad Request
AdRequest adRequest = new AdRequest.Builder().build();
// load Native Ad with the Request
adLoader.loadAd(adRequest);
// Showing a simple Toast message to user when Native an ad is Loading
Toast.makeText(MainActivity.this, "Native Ad is loading ", Toast.LENGTH_LONG).show();
}
private void showNativeAd() {
if (adLoaded) {
template.setVisibility(View.VISIBLE);
// Showing a simple Toast message to user when an Native ad is shown to the user
Toast.makeText(MainActivity.this, "Native Ad is loaded and Now showing ad ", Toast.LENGTH_LONG).show();
}
else {
//Load the Native ad if it is not loaded
loadNativeAd();
// Showing a simple Toast message to user when Native ad is not loaded
Toast.makeText(MainActivity.this, "Native Ad is not Loaded ", Toast.LENGTH_LONG).show();
}
}
private void hideNativeAd() {
if (adLoaded) {
// hiding the Native Ad when it is loaded
template.setVisibility(View.GONE);
// Showing a simple Toast message to user when Native ad
Toast.makeText(MainActivity.this, "Native Ad is hidden ", Toast.LENGTH_LONG).show();
}
}
}
Output
In the below snapshots, you can see how the Native Ad will look in the Android application.
Small Native ad show at the bottom of the user device screen
Small Native ad show at the top of the user device screen,
Medium Native ad is shown at the bottom of the user device screen:
Medium Native ad show at the top of the user device screen,
Conclusion
Integrating AdMob native ads into your Android app can be a valuable monetization strategy, allowing you to generate revenue while maintaining a seamless user experience.
In just 6 simple steps we have integrated and shown you the basic example for creating a Google Admob Native Ad. If you face any issues while doing this, please share it in the comment section below and we will be happy to help.
Remember to customize the appearance of the ads and continuously optimize their placement to maximize your earning potential. With AdMob's robust features and your careful implementation, you can strike a balance between monetization and user satisfaction, enhancing the success of your Android app.
Frequently Asked Questions(FAQs)
1. What are native ads in an Android app?
Native ads are a type of advertisement that blends seamlessly with the app's interface and content, providing a more natural and non-disruptive user experience. They match the app's design and appear as if they are part of the app itself.
2. How does AdMob help with native ad integration?
AdMob, Google's mobile ad platform, provides a simple and effective way to integrate native ads into Android apps. It offers a range of ad formats and customizable options to ensure that the ads fit seamlessly within your app's UI.
3. How can I add AdMob native ads to my Android app?
To add AdMob native ads, you need to follow a few steps: integrate the AdMob SDK into your app, create an ad unit ID, define the ad layout in XML, load the native ad, and finally, display the ad within your app's UI.
4. Can I customize the appearance of native ads to match my app's design?
Yes, AdMob allows you to customize the appearance of native ads to match your app's design. You can define the layout, fonts, colors, and other visual aspects to ensure a seamless integration that aligns with your app's look and feel.
5. How can I optimize revenue from AdMob native ads?
To optimize revenue from native ads, it is crucial to experiment and fine-tune the ad placement within your app. Conduct A/B testing, analyze user engagement metrics, and consider user feedback to find the optimal balance between ad visibility and user experience.
You may also like:
