Floating Chat head like facebook in android using Kotlin

Floating Chat head like facebook in android using Kotlin

Floating chat head is nothing but the view that is drawn over other applications. Android system allows applications to draw over other application if the application has android.permission.SYSTEM_ALERT_WINDOW permission. We are going to use the background service to add the floating widget into the view hierarchy of the current screen. So, this floating view is always on top of the application windows.

To drag the view across the screen we are going to override OnTouchListener() to listen to drag events and change the position of the view has in the screen.

Let’s start how we can achieve Floating Chat Head like facebook 

Add Permissions in your Manifest file:-

In this manifest you can we have a user-permission android:name=”android.permission.SYSTEM_ALERT_WINDOW” that is responsible for adding the overlay layout.

As you can see we have also declared.MyFloatingWindowService in the service tag. That is the Started service that is for managing our touch events on overlay floating window when our app is in the background state.

Now lat’s do some code in MainActivity class:-

In our MainActivity, As you can see we have a button in activity_main.xml layout we are performing two tasks on click of it.

1- We check that is Build version is greater then Marshmallow and is app have the permission of overlay.

2- Simply start the service that we created in the next step and after starting the service we finish the activity.

Now let’s do some real code in our service class:-

In our service class first thing to do is we need to initialize a window manager object because we add the layout or view on it.

We need to call the getSysytemServices method and its parameters we pass Context.WINDOW_SERVICE to initialize WindowManager object.

Also, we need to initialize the Window Manager layout params.

At this point please take a look at LAYOUT_FLAG initialization above comment because it can through Exception.

Now getting the view by the help of LayoutInflater and after getting the view we add that view in our window manger object with layout params.

Now we can achieve the overlay but for handling the touch event on that popup window we need to setOnTouchLlistner on that view or you can set any child view of that view.

In my case I have an image view in my floating view that’s id is chat_head.

I setOnTouchListener on it and manage the touch events in onTouch callback.

Now we achieved Floating Chat head like facebook in android using Kotlin.