Tips and Tricks | Native Android Storybook App with AdMob & FCM PUSH Notification

Introduction

In this tutorial, we will be exploring the Tips and Tricks | Native Android Storybook App with AdMob & FCM PUSH Notification. This app is a comprehensive guide to learning the basics of Android development, and in this tutorial, we will be focusing on how to integrate AdMob and Firebase Cloud Messaging (FCM) push notifications into the app.

What is AdMob?

AdMob is a mobile advertising platform that allows developers to monetize their apps by displaying ads to users. AdMob provides a range of ad formats, including banner ads, interstitial ads, and rewarded videos, which can be customized to fit the needs of your app.

What is Firebase Cloud Messaging (FCM)?

Firebase Cloud Messaging (FCM) is a cloud-based messaging service that allows developers to send targeted messages to their app users. FCM provides a range of features, including push notifications, which can be used to notify users of new content, updates, or other important events.

Why use AdMob and FCM together?

By integrating AdMob and FCM into your app, you can create a more engaging and interactive user experience. AdMob can be used to display ads to users, while FCM can be used to send push notifications to users who have opted-in to receive them. This can help to increase user engagement, drive more traffic to your app, and ultimately increase revenue.

Prerequisites

Before starting this tutorial, you will need to have the following:

• Android Studio installed on your computer
• A basic understanding of Java or Kotlin programming
• A Google Developers Console account
• A Firebase project set up with FCM enabled
• A AdMob account set up with a publisher ID and ad unit ID

Step 1: Set up AdMob

To set up AdMob, follow these steps:

1. Go to the AdMob website and sign in with your Google account.
2. Click on the "Create an account" button and follow the prompts to set up your account.
3. Once your account is set up, click on the "Create an app" button and select "Android" as the platform.
4. Enter your app's name, package name, and other relevant information.
5. Click on the "Create" button to create your app.
6. Once your app is created, click on the "Ad units" tab and select "Banner" as the ad format.
7. Enter your ad unit ID and other relevant information.
8. Click on the "Save" button to save your ad unit.

Step 2: Set up FCM

To set up FCM, follow these steps:

1. Go to the Firebase console and sign in with your Google account.
2. Click on the "Create a project" button and follow the prompts to set up your project.
3. Once your project is set up, click on the "Navigation menu" (three horizontal lines in the top left corner) and select "FCM" from the menu.
4. Click on the "Create a new key" button and follow the prompts to create a new key.
5. Once your key is created, click on the "Navigation menu" and select "Cloud Messaging" from the menu.
6. Click on the "Create a new message" button and follow the prompts to create a new message.
7. Once your message is created, click on the "Send" button to send the message to your app users.

Step 3: Integrate AdMob and FCM into your app

To integrate AdMob and FCM into your app, follow these steps:

1. Open your Android Studio project and navigate to the build.gradle file.
2. Add the following lines of code to the dependencies section:

   implementation 'com.google.firebase:firebase-messaging:22.0.0'
   implementation 'com.google.firebase:firebase-admob:19.6.0'

3. Sync your project by clicking on the "Sync now" button in the top right corner of the Android Studio window.
4. Open the AndroidManifest.xml file and add the following lines of code:

   <application
   ...
   <meta-data
       android:name="com.google.firebase.messaging.FCM_LOG_LEVEL"
       android:value="DEBUG" />
   <meta-data
       android:name="com.google.firebase.messaging.FCM_AUTO_INIT_ENABLED"
       android:value="true" />
   ...
   </application>

5. Open the MainActivity.java file and add the following lines of code:

   
   import com.google.firebase.messaging.FirebaseMessaging;
   import com.google.firebase.messaging.FirebaseMessagingService;
   import com.google.firebase.messaging.RemoteMessage;

public class MainActivity extends AppCompatActivity { private FirebaseMessaging messaging;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    messaging = FirebaseMessaging.getInstance();
    messaging.subscribeToTopic("my_topic");
}

@Override
public void onMessageReceived(RemoteMessage remoteMessage) {
    super.onMessageReceived(remoteMessage);
    Log.d("FCM", "Received message: " + remoteMessage.getNotification().getTitle());
}

}

6. Open the `MyFirebaseMessagingService.java` file and add the following lines of code:

import com.google.firebase.messaging.FirebaseMessagingService; import com.google.firebase.messaging.RemoteMessage;

public class MyFirebaseMessagingService extends FirebaseMessagingService { @Override public void onMessageReceived(RemoteMessage remoteMessage) { super.onMessageReceived(remoteMessage); Log.d("FCM", "Received message: " + remoteMessage.getNotification().getTitle()); } }

7. Open the `strings.xml` file and add the following lines of code:

8. Open the `activity_main.xml` file and add the following lines of code:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

<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"
    ads:adSize="BANNER"
    ads:adUnitId="YOUR_AD_UNIT_ID">
</com.google.android.gms.ads.AdView>

9. Replace `YOUR_AD_UNIT_ID` with your actual AdMob ad unit ID.

**Step 4: Test your app**

To test your app, follow these steps:

1. Run your app on a physical device or emulator.
2. Open the app and verify that the AdMob ad is displayed correctly.
3. Send a push notification to your app using the Firebase console.
4. Verify that the push notification is received correctly and displayed in the app.

**Conclusion**

In this tutorial, we have learned how to integrate AdMob and FCM into our app. We have set up AdMob and FCM, and integrated them into our app using the Android Studio project. We have also tested our app to verify that the AdMob ad is displayed correctly and the push notification is received correctly.