Android Floating Widget like Facebook Messenger Chat Head

Android Floating Widget like Facebook Messenger Chat Head

Floating widgets are the views that float over the screen. We all love the chat heads (or chat bubbles) from the popular Facebook Messenger. This provides very handy and easy access to the chat conversation screen no matter on which screen you are. Chat heads are very convenient for multitasking as a user can work and chat at the same time. That means if you are using the any app on your phone and if any new message arrives, you can open the conversation and replay the message without switching app. Pretty cool!!!

Understanding the basics

  1. Floating widget 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 application windows.
  2. 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.


In this tutorial, we are going to learn how to create simple chat head and allow user to drag them across the screen. So that user can adjust the position of the floating widget in the screen.


1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is

2. Open res ⇒ values ⇒ strings.xml and add below string values. These are some strings that we are going to use in our project.

3. Add android.permission.SYSTEM_ALERT_WINDOW permission to the AndroidManifest.xml file. This permission allows an app to create windows, shown on top of all other apps.

4. Create a new layout naming floating_widget_layout.xml for the floating widget view. This layout will contain two main views.

Collapsed view:
The floating widget will remain collapsed when the view is launched. When the user clicks on this view, an expanded view will open.

Expanded View:
This view will contain all the views that you want to display when user clicks on Floating Widget.

Collapse View Screenshot

Collapse View Screenshot


Expanded View Screenshot

Expanded View Screenshot

5. For chat head if you long press it and drag to bottom a remove layout shows with close image. So we have to create the same layout naming remove_floating_widget_layout.xml and add the ImageView with cross image to it. This view will be displayed when user hold/long press the chat head.

6. Below are the custom drawables and vector drawables that i am using in this project.

  • circle_shape.xml
  • ic_aspect_ratio_black_24dp.xml
  • ic_close_black_24dp.xml
  • ic_close_white_24dp.xml
  • white_circle_shape.xml
7. Now create a service class called Whenever you want to display a chat head, start the service using startService() command. In onCreate() of the service we will add the layout of the chat head at the top-left corner of the window.

In this class we are adding both Floating Widget View and Remove View to Window manager and initially hiding Remove View and showing only Collapse View of Floating Widget.

8. To drag the chat head along with the user’s touch, we have to override OnTouchListener(). Whenever the user touches the chat head, we will record the initial x and y coordinates, and when the user moves the finger, the application will calculate the new X and Y coordinate and move the chat head.

The below code is performing various process:

  • Triggering long click if user hold or press chat head for long time.
  • If long click event occurs then displaying Remove View visibility.
  • Trigger on click event for Chat Head.
  • Stoping Floating widget service if user drag and drop the Floating View into Remove View.
Method responsible for updating Remove View Window on Floating widget long click.
This method will reset the position when user drag and place the Floating View to another place. This method help to prevent the Floating View not to be placed in centre of the screen. It will always place the Floating View to Left or Right of the screen depending on user dragging.
This method will move the Floating View to Left of the Screen when user drags.
This method will move the Floating View to Right of the Screen when user drags.
This method will return the status bar height according to device display metrics.
When user click the Floating Widget the below method will trigger and display the Expanded View.
Method to check if Collapse View is visible or not.
Also, implement click listener to close the chat head by stopping the service when the user clicks on the close icon at the top-right of the chat head.
9. Finally the will look like below. There are some extra click events as well to close the expanded view and open the activity from expanded view.
10. Now to Handle Overdraw permission for displaying Floating View over other apps, we need to start the

Before that, we need to check if the application has android.permission.SYSTEM_ALERT_WINDOW permission or not? For android version <= API22, this permission is granted by default. But for the android versions running API>22 ,we need to check for the permission run-time. If the permission is not available, we will open permission management screen to allow the user to grant permission using Settings.ACTION_MANAGE_OVERLAY_PERMISSION intent action. This will open below screen facilitate user to grant android.permission.SYSTEM_ALERT_WINDOW permission.

Settings screen to grant the Draw Over Other App permission.

Settings screen to grant the Draw Over Other App permission.

Below is code for the that will display the Floating Widget when button is clicked by checking the SYSTEM_ALERT_WINDOW permission.

11. Finally add the in your AndroidManifest.xml.

12. Woohooo we are all ready. Now you can also create any kind of Floating Widget for your applications.

Thanks. :)

Download Source Code


About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.


How can we make the widget to appear even after removing the app from ‘recent apps’? I want the service to be running until even after closing the app. And, the widget should be active until user manually removes it. How can we achieve this?

    Hi Neeraja,

    Put the below code into your service class, this code will your widget run even after you close your app or clear app from recent:

    public int onStartCommand(Intent intent, int flags, int startId) {
    return START_STICKY;



Thanks for this awesome tutorial. Sir can you answer me please. I have EditText in my expanded view, is it possible to open soft keyboard when edittext focused? I can’t open the soft keyboard in OS home screen


Thank you sir, for your great tutorial, however I found a bug in it which has been solved in this demo :


1. Apps not working on API 27

also I tried to improve the design. There also an issue in which chat bubble dragging is not smooth, and after 500 milliseconds expanded view gets visible even when we have removed our touch from the bubble.


    I solved that dragging issue (had to remove coding for that removeView)


Hello, I wanna add some Button after chat head is clicked. can you help me with that?

    Hi Ashim,

    Can you exactly tell me what you want and where you are facing issue?



Hello Dr.Droid

I m having a problem with the intent function from open_activity_button. I m trying to intent the open_activity_button to the expand container layout.

and I could not find the code for the expand container layout to show only chat head layout

    Hi Ashim,

    Can you show me your code that you had done. So that i can look into it and fix it.




How does the X, and Y works,
I want to set the default launch of the window at bottom right, and also i need some margin around the window. When i am trying to set X and Y cordinates its not working. Only the gravity works, but then X and Y is not working. This breaks the floating code as well. Can you please check this on priority.

//FLAG helps to show floating screen on different OS versions.
} else {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_PHONE;

//Add view to the window
layoutParams = new WindowManager.LayoutParams(
//layoutParams.flags = WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON;
//layoutParams.gravity = Gravity.BOTTOM | Gravity.RIGHT;

//layoutParams.x = 40;
//layoutParams.y = 40;

//add floating view to the window UI
//mWindowManager.updateViewLayout(floatingWidgetView, layoutParams);
mWindowManager.addView(floatingWidgetView, layoutParams);


Hi did u got a chance to check this please on priority.


Great tutorial. Thank you so much!

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)