Android - display In-app message natively

Question

I would like my app tз display a notification of the incoming messages, but only when the application is active, similar to how many social apps do that. I.e., the user has my messaging app open and he gets a notification slide in from top, within this Android application. To my understanding, this is something that is called “in app messages” in Firebase. However, I wouldn’t like to have firebase as a dependency, as I am not using any part of it: the notifications will be triggered by an open network connection that my app made.

I also so wouldn’t want to involve push notifications as I need this functionality only when the app is active.

What would be the best way to achieve this goal?

Basically what I am asking is how to make my own notification “bubble” in UI that shows up inside my app, similar to how it is done in messaging/dating apps (see Badoo, for example). Mainly I am wondering if there are any implemendations available that I could use or do I have to draw this stuff myself (using Fragments?)

Dmitri · Accepted Answer

It's a very broad question. So in broad strokes: Use some real time communications technology, such as sockets/websockets to listen for incoming messages, and hook up into lifecycle to start listening when the app moves into foreground (and stop when it moves out) [assuming that is the meaning of app being active - otherwise if you include foreground state, just start listening and don't unlisten) -

 class MyListener : LifecycleObserver {

        @OnLifecycleEvent(Lifecycle.Event.ON_START)
        fun onMoveToForeground() {
             listenForNotification()
            //start listening
        }
       @OnLifecycleEvent(Lifecycle.Event.ON_STOP)
        fun onMoveToBackground() {
           //stop listening
        }

where listener would be something like this:

 private suspend fun listenForNotification(){
        withContext(Dispatchers.IO){
            myApi.receive() {
                println("this is my notification object: $it")
                NotificationHelper.sendNotification($it.message)
            }
        }
    }

And NotificationHelper would be based on Notification Manager to push local notifications (as you wanted them to slide from the top - look like any push notification). Pay close attention to the flags you use to send the notification to make sure it is received and processed by the currently opened activity (do more research on it, separate topic) https://developer.android.com/reference/android/app/NotificationManager

In that same activity use OnNewIntent to receive user's action of tapping on the notification and then do whatever you want to do with it.

Alternatively, do not use local notification but just develop your own UI where you would display these things messaging style. (edit: for example, like this - link. Another one for actually showing notifications without using Notifications lib -link Or a combination of both local notifications and the above example.

Edit: *You can also use Firebase messaging to display messages locally.* Yes you would still need a firebase json to init the app, but after that you can construct your messages locally and display them, so it a very lightweight dependency on two libs and aside from initializing you won't need anything else from the firebase server.

Below is an example with two types of messages, card and banner. And of course you can just take the full code on GitHub and extract the part you need and modify it as needed. (the method used here is public for testing the appearance of the message locally - I don't see anything wrong with using it as a vehicle to deliver local notifications, but again the option to take the code and modify is always there)

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.firebase.FirebaseApp
import com.google.firebase.inappmessaging.MessagesProto
import com.google.firebase.inappmessaging.display.FirebaseInAppMessagingDisplay
import com.google.firebase.inappmessaging.model.*
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    companion object {
        val whiteHex = "#ffffff"
        val magHex = "#9C27B0"
        val appUrl ="app://open.my.app"
    }

    override fun onNewIntent(intent: Intent?) {
        super.onNewIntent(intent)
        val action: String? = intent?.action
        val data: Uri? = intent?.data

        data?.let {
            helloTextView.text ="You just clicked from Firebase Message"
            return
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        FirebaseApp.initializeApp(this)

        val text = Text.builder()
                .setHexColor(whiteHex)
                .setText("Local Firebase Message Body")
                .build()

        val title = Text.builder()
                .setHexColor(whiteHex)
                .setText("Local Firebase Message Title")
                .build()

        val imageData = ImageData.builder()
                .setImageUrl("https://homepages.cae.wisc.edu/~ece533/images/frymire.png")
                .build()

        val button = Button.builder()
                .setButtonHexColor(whiteHex).setText(text).build()

        val campaignMeta = CampaignMetadata("S", "D", true)

        val primaryAction = Action.builder()
                .setActionUrl(appUrl)
                .setButton(button)
                .build()

        val fmessage = CardMessage.builder()
                .setPrimaryAction(primaryAction)
                .setBackgroundHexColor(magHex)
                .setPortraitImageData(imageData)
                .setTitle(title).build(campaignMeta)

        val bannerMessage = BannerMessage.builder()
                .setAction(primaryAction)
                .setImageData(imageData)
                .setBackgroundHexColor(magHex)
                .setBody(text)
                .setTitle(title).build(campaignMeta)


                FirebaseInAppMessagingDisplay
                        .getInstance()
                        .testMessage(this, bannerMessage, null)

    }
}

In build.gradle make sure to add:

    implementation 'com.google.firebase:firebase-core:17.2.1'
    implementation 'com.google.firebase:firebase-inappmessaging-display:19.0.2'

and intent filter into manifest (to process click on the message)

also modify launchMode to singleTop to process the click within the same instance of the activity:

and apply

apply plugin: 'com.google.gms.google-services'

The result:

Card message:

Banner message and updating text in response to clicking on the banner:

Added project into GitHub if you are interested - project link. Must add your own google-services.json for firebase (to be able to init the engine only)

Android - display In-app message natively

Answers (1)

Related Questions