Introduction

In Android, Floating bubbles or ChatHeads allow quick access to core features without fully opening the app. For example, replying to messages through Floating bubbles.

Floating bubbles are just views attached to WindowManager with custom flags. In this post we will see how we can attach them to the window manager, drag them and change their position.

Foreground Service

To do the Floating Bubbles we need the help of a service which will be running in the background. However, background services are restricted for apps that target Android 9 (API level 28) or higher so we need a foreground service. A foreground service is nothing but a service that executes tasks that are noticeable to the user. For notifying users, we need to show notifications in the status bar.

If you want to know more about foreground service please check out my post How To Implement a Foreground Service in Android

Example

Let’s create a simple app where at the click of a button we can start the service and inside the service, we will see how to attach a view to the window manager and make it draggable.

For doing this we might need some permissions and which we will cover below.

Implementation

Step 1

Let’s start with a layout file that has 2 buttons to start and stop a service.

Step 3

Add permissions that are required in Manifest file.

1. FOREGROUND_SERVICE — This permission is required to start foreground service.
2. SYSTEM_ALERT_WINDOW — This permission is required to draw over the other apps. We need to check whether we have the permission or navigate to setting to ask this permission

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

Step 2

Let’s inflate the layout inside the activity and handle the click events. Before starting the service we have to check if we have draw overlay permissions and then we can proceed.

private fun checkHasDrawOverlayPermissions(): Boolean {
    return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        Settings.canDrawOverlays(this)
    }else{
        true
    }
}

Our activity would look like

Step 3

The important part is the service here where we inflate the view and attach it to a window.

Let’s see the part of attaching the view to windows. Suppose floatingControlView is the required view we inflate that in OnCreate of service

if(floatingControlView == null ){
    val li = getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater
    floatingControlView = li.inflate(R.layout.layout_floating_control_view, null) as ViewGroup?
}

Now call addFloatingMenu from onStartCommand method

If you check the snippet above there are various flags of WindowManager being used let’s check some of them

Based on OS version set TYPE_PHONE or TYPE_APPLICATION_OVERLAY. TYPE_APPLICATION_OVERLAY is the one for which we require draw overlay permission.

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O)          WindowManager.LayoutParams.TYPE_PHONE
 else
 WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY

TYPE_PHONE windows are used for non-application windows providing user interaction with the phone. These windows are normally placed above all applications, but behind the status bar.

TYPE_APPLICATION_OVERLAY windows are displayed above all activity windows but below critical system windows like the status bar or IME.
The system may change the position, size, or visibility of these windows at anytime to reduce visual clutter to the user and also manage resources.

Note: In case of TYPE_APPLICATION_OVERLAY the system will adjust the importance of processes with this window type to reduce the chance of the low-memory-killer killing them.

Next we define the height and width of the view and positions where it should be displayed these can be customized as per requirement. We used dpToPx just for this conversion.

//Method to convert dp to px
private fun dpToPx(dp: Int): Int {
    val displayMetrics = this.resources.displayMetrics
    return Math.round(dp * (displayMetrics.xdpi /   DisplayMetrics.DENSITY_DEFAULT))
}

Finally we need to check whether the view is added or not then only we can add the view else it may cause unwanted issues. To do this we can just check whether the view has any parent or not

if (floatingControlView?.parent == null) {
    windowManager?.addView(floatingControlView, params)
}

Now, we need a foreground service for targeting 29 and above so we need to start a foreground service with a notification

Now if we run the app and click on start button it prompts for permission, once granted then check that there will be a view attached to the window

Output

After providing permissions there will be an alarm icon being attached to to the WindowManager