How to show admob ads at bottom of tablayout

Hello Guys, in this tutorial, we will teach you how to use admob ads under tablayout on Android. When using Tablayout, below tablayout If you want to use banner ad, then we have a problem, to solve this problem, we will see these lessons today.

Sometimes we create multiple tablayouts to show different files in a different tablayout, after which we place the banner ad under the tablayout so whenever a tablayout changes then the same banner ad will appear in all tablayouts .

How to show admob ads at the bottom of the tabs

• First Create a new android project
• File ⇒ New Android ⇒ Application Project
• Then Open MainActivity.java and then add following code :

After creating the project the first thing you can do is to see that in Gradle Scripts there is a library implementation 'com.google.android.material: material: 1.3.0' for navigation drawers in build.gradle and use of admob library 'com.google .android.gms: play-services-ads: 20.0.0' s otherwise Enter the dependence below in your build.gradle and press the sync button.

  implementation 'com.google.android.material:material:1.3.0'  
  implementation 'com.google.android.gms:play-services-ads:20.0.0'  

MainActivity.java

 import androidx.annotation.NonNull;  
 import androidx.appcompat.app.ActionBarDrawerToggle;  
 import androidx.appcompat.app.AppCompatActivity;  
 import androidx.appcompat.widget.Toolbar;  
 import androidx.drawerlayout.widget.DrawerLayout;  
 import androidx.viewpager.widget.ViewPager;  
 import android.os.Bundle;  
 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.tabs.TabLayout;  
 public class MainActivity extends AppCompatActivity {  
   private Toolbar toolbar;  
   private TabLayout tabLayout;  
   private ViewPager viewPager;  
   private DrawerLayout drawerLayout;  
   private AdView adView;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     MobileAds.initialize(this, new OnInitializationCompleteListener() {  
       @Override  
       public void onInitializationComplete(@NonNull InitializationStatus initializationStatus) {  
       }  
     });  
     adView=findViewById(R.id.adView);  
     AdRequest adRequest=new AdRequest.Builder().build();  
     adView.loadAd(adRequest);  
     toolbar = (Toolbar) findViewById(R.id.toolbar);  
     setSupportActionBar(toolbar);  
     DrawerLayout drawer = findViewById(R.id.nav_drawer);  
     ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(  
         this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);  
     drawer.addDrawerListener(toggle);  
     toggle.syncState();  
     viewPager = (ViewPager) findViewById(R.id.viewPager);  
     setupViewPager(viewPager);  
     tabLayout = (TabLayout) findViewById(R.id.tabLayout);  
     tabLayout.setupWithViewPager(viewPager);  
   }  
   private void setupViewPager(ViewPager viewPager) {  
     ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());  
     adapter.addFragment(new OneFragment(), "ONE");  
     adapter.addFragment(new TwoFragment(), "TWO");  
     adapter.addFragment(new ThreeFragment(), "THREE");  
     viewPager.setAdapter(adapter);  
   }  
 }  

You will now see an error called ViewPagerAdapter To eliminate this error you will need to create a section named ViewPagerAdapter by right-clicking on the same error or right-clicking on the package name and pasting the code below.

ViewPagerAdapter.java

 import androidx.fragment.app.Fragment;  
 import androidx.fragment.app.FragmentManager;  
 import androidx.fragment.app.FragmentPagerAdapter;  
 import java.util.ArrayList;  
 import java.util.List;  
 public class ViewPagerAdapter extends FragmentPagerAdapter {  
   private final List<Fragment> mFragmentList = new ArrayList<>();  
   private final List<String> mFragmentTitleList = new ArrayList<>();  
   public ViewPagerAdapter(FragmentManager manager) {  
     super(manager);  
   }  
   @Override  
   public Fragment getItem(int position) {  
     return mFragmentList.get(position);  
   }  
   @Override  
   public int getCount() {  
     return mFragmentList.size();  
   }  
   public void addFragment(Fragment fragment, String title) {  
     mFragmentList.add(fragment);  
     mFragmentTitleList.add(title);  
   }  
   @Override  
   public CharSequence getPageTitle(int position) {  
     return mFragmentTitleList.get(position);  
   }  
 }  

You will also see three bugs in one piece, Two Frament and Three Fragment To fix this error, you will need to create a third section by right-clicking above the error or above the package name and pasting this code to the class. The code for these three is given below.

One Fragment

 import android.os.Bundle;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.ViewGroup;  
 import androidx.annotation.NonNull;  
 import androidx.annotation.Nullable;  
 import androidx.fragment.app.Fragment;  
 public class OneFragment extends Fragment {  
   @Nullable  
   @Override  
   public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
     // Inflate the layout for this fragment  
     return inflater.inflate(R.layout.fragment_one,container,false);  
   }  
 }  

Similarly, both will form a piece and paste the same code and will only change the xml name with its code given below.

Now Open layout again activity_main.xml and then add following code :

XML (activity_main.xml)

 <androidx.drawerlayout.widget.DrawerLayout 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"  
   xmlns:ads="http://schemas.android.com/apk/res-auto"  
   android:id="@+id/nav_drawer"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:fitsSystemWindows="true"  
   tools:openDrawer="start"  
   tools:context=".MainActivity">  
   <include layout="@layout/app_bar"/>  
   <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/drawer_header"  
     app:menu="@menu/nav_menu"/>  
 </androidx.drawerlayout.widget.DrawerLayout>  

Now you will see the error of app_bar.To fix its error, you will right-click on the res and create a design named app_bar and paste the following code into it.

app_bar.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   xmlns:ads="http://schemas.android.com/apk/res-auto">  
   <com.google.android.material.appbar.AppBarLayout  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:background="@color/purple_700"  
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
     <androidx.appcompat.widget.Toolbar  
       android:id="@+id/toolbar"  
       android:layout_width="match_parent"  
       android:layout_height="?attr/actionBarSize"  
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />  
     <com.google.android.material.tabs.TabLayout  
       android:id="@+id/tabLayout"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:background="@color/purple_700"  
       app:tabIndicatorColor="@android:color/white"  
       app:tabIndicatorHeight="3dp"  
       app:tabSelectedTextColor="@android:color/secondary_text_light_nodisable"  
       app:tabTextColor="@android:color/white">  
     </com.google.android.material.tabs.TabLayout>  
   </com.google.android.material.appbar.AppBarLayout>  
   <androidx.viewpager.widget.ViewPager  
     android:id="@+id/viewPager"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:layout_marginBottom="53dp"  
     app:layout_behavior="@string/appbar_scrolling_view_behavior" />  
   <com.google.android.gms.ads.AdView  
     android:id="@+id/adView"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_gravity="center_horizontal|bottom"  
     ads:adSize="BANNER"  
     ads:adUnitId="@string/admob_banner_ad"/>  
 </androidx.coordinatorlayout.widget.CoordinatorLayout>  

drawer_header.xml

 <?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="200dp"  
   android:background="@color/purple_700">  
   <ImageView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginTop="70dp"  
     android:layout_marginStart="20dp"  
     android:src="@mipmap/ic_launcher"  
     android:layout_marginLeft="20dp" />  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentBottom="true"  
     android:layout_marginStart="10dp"  
     android:layout_marginBottom="18dp"  
     android:text="TabLayout Ads Example"  
     android:textColor="#F6F3F4"  
     android:textSize="20sp"  
     android:layout_marginLeft="10dp" />  
 </RelativeLayout>  

To create nav_drawer, you need to right-click on the res and right click on the Android resources directory and create a menu folder and create a nav_drawer xml file in it.

nav_menu.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <menu xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   tools:showIn="navigation_view">  
   <group android:checkableBehavior="single">  
     <item  
       android:id="@+id/home"  
       android:icon="@drawable/ic_home"  
       android:title="Home" />  
     <item  
       android:id="@+id/help"  
       android:icon="@drawable/ic_help"  
       android:title="how_to_use" />  
   </group>  
   <group android:checkableBehavior="single">  
     <item android:title="Communication">  
       <menu>  
         <item  
           android:id="@+id/share"  
           android:icon="@drawable/ic_share"  
           android:title="Share" />  
         <item  
           android:id="@+id/privacy"  
           android:icon="@drawable/ic_privacy"  
           android:title="Contact Us" />  
       </menu>  
     </item>  
   </group>  
 </menu>  

This is also useful for you

• How to Create Image Slider using ViewPager in android studio
• How to create Swipeable Videos Like TikTok Using ViewPager2 in andriod studio
• how to get all audio files in android programmatically
• How to use SearchView in andriod studio
• How to check internet Connection in androd studio
• How to Create Bottom Sheet in android studio
• How to Refresh a list Using RecyclerView in Android Studio
• How to create Welcome Splash Screen with animation in android studio
• How to create menu and sub menu in android studio
• How to create a list item with RecyclerView in Android Studio
• BottomNavigationView android example
• How to create Text to Speech app in android studio
Below the id of the test app and the banner id of admob that when you open the res you will see a named folder, after opening it, you will see an xml file named after it, after opening it, you will attach a string below the theme and the folder will appear under the same, open it then change the given theme to the NoActionBar provided below the code.

String

  <string name="admob_banner_ad">ca-app-pub-3940256099942544/6300978111</string>  
   <string name="app_id">ca-app-pub-3940256099942544~3347511713></string>  
   <string name="navigation_drawer_open">Open navigation drawer</string>  
   <string name="navigation_drawer_close">Close navigation drawer</string>  


Theme

 <resources xmlns:tools="http://schemas.android.com/tools">  
   <!-- Base application theme. -->  
   <style name="Theme.TabLayoutAdsExample" parent="Theme.MaterialComponents.DayNight.NoActionBar">  
     <!-- Primary brand color. -->  
     <item name="colorPrimary">@color/purple_500</item>  
     <item name="colorPrimaryVariant">@color/purple_700</item>  
     <item name="colorOnPrimary">@color/white</item>  
     <!-- Secondary brand color. -->  
     <item name="colorSecondary">@color/teal_200</item>  
     <item name="colorSecondaryVariant">@color/teal_700</item>  
     <item name="colorOnSecondary">@color/black</item>  
     <!-- Status bar color. -->  
     <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>  
     <!-- Customize your theme here. -->  
   </style>  
 </resources>  

fragment_one.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <androidx.constraintlayout.widget.ConstraintLayout  
   xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Tab One"  
     android:textSize="20sp"  
     android:textColor="@color/purple_700"  
     android:textStyle="bold"  
     app:layout_constraintBottom_toBottomOf="parent"  
     app:layout_constraintEnd_toEndOf="parent"  
     app:layout_constraintStart_toStartOf="parent"  
     app:layout_constraintTop_toTopOf="parent" />  
 </androidx.constraintlayout.widget.ConstraintLayout>  

And finally you have to give the internet permission in the manifest and paste the app id into the meta data. AndroidManifest

 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.avdigits.tablayoutadsexample">  
   <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/Theme.TabLayoutAdsExample">  
     <!-- 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" />  
     <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>  

hope that this article will be very useful for you.


Thank you...