5th February, 2023
Howdy Android Developer!
Nowadays, you may have seen many Android apps with navigation drawer. And why not? It is very useful Android UI that enables developers to provide many navigation options to their app users.
In this tutorial you will learn how to use AdMob Banner Ad with Navigation Drawer Activity.
Step 1: Get AdMob App Id and Ad Unit Id
If you already have an AdMob account, sign in and get the App Id & Ad Unit Id. Here I have used the AdMob Test Ids for this tutorial. When your app is ready to be published simply replace these test IDs with your original AdMob AppId and AdUnitId.
✿ Always test with test ads
Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 Sample Banner ad unit ID: ca-app-pub-3940256099942544/6300978111
⚑ App Id & Ad Unit Id are two different things. Do not get confused about it.
Step 2: Create New Project
Create a new project in Android Studio from File ⇒ New Project and select Navigation Drawer Activity from the templates.
Step 3: Add Google Mobile Ads Library to the Project
Now add the Google Mobile Ads Library to the project. To do this, Open app level gradle and add following dependency. Sync the project.
Project ⇒ app ⇒ build.gradle
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.codestringz.navigationdrawertest"
minSdkVersion 16
targetSdkVersion 28
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.0.0-beta01'
implementation 'com.google.android.gms:play-services-ads:18.2.0'
}
Step 4: Update Your AndroidManifest.xml
Add your AdMob AppId in your app’s AndroidManifest.xml file.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.codestringz.navigationdrawertest">
<uses-permission android:name="android.permission.INTERNET" />
<application
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"
tools:ignore="AllowBackup,GoogleAppIndexingWarning">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~3347511713"/>
</application>
</manifest>
Step 5: Set Banner Ad to the Layout XML
Next, Open your layout XML file and modify it as follows.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--Add a layout and align it to the bottom of the screen.
This layout will hold the AdMob banner ad.-->
<RelativeLayout
android:id="@+id/bannerAdLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<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"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111" />
</RelativeLayout>
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bannerAdLayout"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
</RelativeLayout>
Step 6: Initialize AdMob Ads SDK and Load Banner Ad
Next, You have to initialize AdMob Ads SDK. Then load an ad in the AdView.
package com.codestringz.navigationdrawertest;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
import com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View view)
{
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show();
}
});
DrawerLayout drawer = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
setUpAdMobAds();
}
private void setUpAdMobAds()
{
//---------Initialize AdMob SDK---------//
MobileAds.initialize(this, new OnInitializationCompleteListener()
{
@Override
public void onInitializationComplete(InitializationStatus initializationStatus)
{
}
});
//---------AdView UI Reference---------//
AdView mAdView = findViewById(R.id.adView);
//---------Create an ad request---------//
AdRequest adRequest = new AdRequest.Builder().build();
//---------Load an ad---------//
mAdView.loadAd(adRequest);
}
@Override
public void onBackPressed()
{
DrawerLayout drawer = findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START))
{
drawer.closeDrawer(GravityCompat.START);
} else
{
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings)
{
return true;
}
return super.onOptionsItemSelected(item);
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item)
{
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera)
{
// Handle the camera action
} else if (id == R.id.nav_gallery)
{
} else if (id == R.id.nav_slideshow)
{
} else if (id == R.id.nav_manage)
{
} else if (id == R.id.nav_share)
{
} else if (id == R.id.nav_send)
{
}
DrawerLayout drawer = findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}
Output: Video Demo
Happy coding!
Wow nice tutorial, one question how can i handle the navigation click androidx.
Thanks
Thanks!