How to add floating bubbles that are still visible outside of the app

[chenshuiluke]

I'm trying to figure out how to add a floating bubble that will be visible outside the app (after the app is minimized) like so:

Is this possible outside of writing a plugin over the existing Android libraries that do it? I'm new to nativescript so I'd rather not have to do that.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @chenshuiluke ,
First of all thank you for your interest in NativeScript.
I reviewed your case, however, at this point, there is no NativeScript plugin which provides support for this functionality.
Regarding that this issue seems to be a perfect candidate for a new plugin. In my research, I found FloatingView android native library, which could be used while implementing this functionality for NativeScript.
Also, you could review the below-attached articles from the documentation and the provided guidelines for creating a plugin.
https://docs.nativescript.org/plugins/building-plugins
https://docs.nativescript.org/runtimes/android/plugins/plugins

[chenshuiluke]

@tsonevn
Okay, I've started writing a plugin for this functionality but I haven't gotten very far. The code can be found here: https://github.com/chenshuiluke/nativescript-floating-bubbles. The FloatingView library seems to require a background service, which I have written here:

src/services/bubble.service.ts

declare var com:any;
const FloatingViewManager = com.github.recruitLifestyle.FloatingViewManager;
@JavaProxy("com.somepackage.BubbleService")
export class BubbleService extends android.app.IntentService {
    
    static constructorCalled: boolean = false;
    private floatingViewManager;

    public onHandleIntent(intent:android.content.Intent):number{
        console.log("Service started");
        if(this.floatingViewManager != null){

            return android.app.Service.START_STICKY;;
        }
        var context = app.android.context;

        let metrics = new android.util.DisplayMetrics();
        let windowManager = <android.view.WindowManager>this.getSystemService(android.app.ContextImpl.WINDOW_SERVICE);
        windowManager.getDefaultDisplay().getMetrics(metrics);

        let inflater = android.view.LayoutInflater.from(this);
        let iconView = <android.widget.ImageView>inflater.inflate(context.getResources().getIdentifier("widget_chathead", "layout", context.getPackageName()), null, false);

        let viewOnClickListener = new android.view.View.OnClickListener({
            onClick:(view:android.view.View) => {
                console.log("Clicked");
            }
        });
        iconView.setOnClickListener(viewOnClickListener);
        
        this.floatingViewManager = new FloatingViewManager(this, this);
        return 0;
    }
}

declared here:

src/platforms/android/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

	<!--Describe the permissions, features or other configurations required by your plugin for Android. 
		To read more about android permissions go to https://developer.android.com/guide/topics/permissions/index.html -->
	<!--EXAMPLE: uses-permission android:name="android.permission.INTERNET"/> -->
	<service android:name="com.somepackage.BubbleService" android:exported="false" >
</manifest>

and called here:

src/floating-bubbles.android.ts

import { Common } from './floating-bubbles.common';
import * as app from "tns-core-modules/application";
import { BubbleService } from './services/bubble.service';
declare var com:any;
export class FloatingBubbles extends Common {
    constructor(){
        super();
        let context = app.android.context;
        var intent = new android.content.Intent();
        intent.setClassName(context, "com.somepackage.BubbleService")
        context.startService(intent);
        console.log("In android section");
    }
}

Once the service is started, it should console.log Service started, but the only output I get is:

1:29:47 AM - Compilation complete. Watching for file changes.



JS: In android section
JS: Dialog closed.
JS: Dialog closed.

So it seems to me like the service's onHandleIntent function isn't being called despite the fact that the service is started and I honestly don't know what to do. At this point, I'd just like to make sure that what I have in the onHandleIntent function is correct so far before proceeding any further, but I can't seem to even get it to execute.

Could the problem be that the BubbleService class' package (com.somepackage.BubbleService)doesn't exist?

[TudorIoanMarin]

Hi guys,

I am working on a similar kind of plugin and ran into some problems. I hoped maybe I can find some help here. I'm trying to develop a floating chat head with nativescript and actually made some headway. I managed to render the floating head, but the thing is I use a custom xml file placed inside the src/res/layout. The problem is that in order to add some events on the chathead, I need to access it a way like this:

      const closeButton: android.widget.ImageView = this.chatHeadView.findViewById(android.R.id.my_custom_button) as android.widget.ImageView;

      closeButton.setOnClickListener(new android.view.View.OnClickListener({
        onClick: (param0: android.view.View) => {
          this.stopSelf();
        } 
      }))

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="65dp"
    android:id="@+id/chat_head_root"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!--Profile image for the chat head.-->
    <ImageView
        android:id="@+id/chat_head"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="8dp"
        android:src="@drawable/ic_android_circle"
        tools:ignore="ContentDescription"/>

    <!--Close button-->
    <ImageView
        android:id="@+id/my_custom_button"
        android:layout_width="26dp"
        android:layout_height="26dp"
        android:layout_marginLeft="40dp"
        android:src="@drawable/ic_close"
        tools:ignore="ContentDescription"/>
</RelativeLayout>

It seems that in this case ( custom xml file and custom foreground service that extends android.app.Service ) R is not aware of additional layouts or id's. So how could I add some event listeners on items if I can't call findViewById?

Any help would be very apreciated.