Android Floating Widget like Facebook Messenger Chat Head - Androhub

Floating Widget banner

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.

Example

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.

VIDEO DEMO

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

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 FloatingWidgetService.java. 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 FloatingWidgetService.java 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 FloatingWidgetService.java.

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 MainActivity.java that will display the Floating Widget when button is clicked by checking the SYSTEM_ALERT_WINDOW permission.

11. Finally add the FloatingWidgetService.java in your AndroidManifest.xml.

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

Thanks. :)

 

27 Comments

Neeraja
Wednesday, August 30th, 2017

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?

Dr. Droid
Wednesday, August 30th, 2017

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:

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

Thanks

Pushpendra Kumar
Thursday, July 16th, 2020

I have tried, But it is not working for me. If application killed from recent application. Then widget also getting close. Please let me know the solution.

Yusuf
Thursday, September 7th, 2017

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

Raghav Satyadev
Thursday, April 12th, 2018

Thank you sir, for your great tutorial, however I found a bug in it which has been solved in this demo : https://github.com/raghavsatyadev/ChatBubbleDemo

Bug:

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.

Raghav Satyadev
Thursday, April 12th, 2018

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

Ashim Shrestha
Wednesday, May 2nd, 2018

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

Dr. Droid
Wednesday, May 2nd, 2018

Hi Ashim,

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

Thanks

Ashim Shrestha
Monday, May 7th, 2018

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

Dr. Droid
Monday, May 7th, 2018

Hi Ashim,

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

Thanks

Mohit Singla
Tuesday, July 24th, 2018

Hi,

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.
int LAYOUT_FLAG;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
} else {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_PHONE;
}

//Add view to the window
layoutParams = new WindowManager.LayoutParams(
pipWidth,
pipHeight,
LAYOUT_FLAG,
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSLUCENT
);
//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);

Mohit Singla
Wednesday, July 25th, 2018

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

Yuri
Friday, September 7th, 2018

Great tutorial. Thank you so much!

John
Saturday, February 16th, 2019

Is it possible to make this as cordova plugin and call from webview with passing data to create floating widget?

Dr. Droid
Saturday, February 16th, 2019

Hi John,

Actually i don’t have any knowledge about Cordova Plugins. So you can try but i don’t think so it will work as it is Native Code.

Thanks

Mostafijur
Saturday, March 23rd, 2019

When I stay locked, when it comes to chat head, but when the phone is unlocked, the chat head will be hidden, how to do it?

Dr. Droid
Saturday, March 23rd, 2019

Hi Mostafijur,

Actually I didn’t tried this scenario let me try this and figure out the solution.

Thanks

Amanpreet
Friday, May 31st, 2019

Floating widget closes after some time how to keep it alive.

Dr. Droid
Friday, May 31st, 2019

Hi Amanpreet,

It may be due to service is getting killed when app is in background from Oreo.
Check this link: https://developer.android.com/about/versions/oreo/background .

Thanks

moatasem
Tuesday, October 8th, 2019

when i try to put EditeText the keyboard dose not appear what can i do please ….!!

Dr. Droid
Wednesday, October 9th, 2019

Hi Moatasem,

You can check the same kind of issue here: https://stackoverflow.com/questions/27488569/unable-to-getfocus-and-start-editing-an-edittext-in-type-system-alert-window.

Google has introduced Bubbles recently which you can use instead of this in a much more easy way.
Here is the link : https://developer.android.com/guide/topics/ui/bubbles

Thanks

paul keum
Sunday, January 12th, 2020

I want to put screenshot button inside of floating widget, but i’m having trouble using getwindow(), cause we extends service in this example. Is there any solution that we can use getwindow() or similiar one in service? I have looked every stackoverflow, but there is no clear solution. Please help

Dr. Droid
Monday, January 13th, 2020

Hi Paul,

While taking a screenshot are you getting any error? If yes, then please share that error with me. I ll look into it.

Thanks

Yasiru
Thursday, February 6th, 2020

Great tutorial , Thanks For that , I have question i need to create floating widget like this to show sticky notes on android screen but i need to generate multiple widgets when new note is create single note in the app taking as single floating widget if you can explain me to how to that it is great help for me thank you

Dr. Droid
Thursday, February 6th, 2020

Hi Yasiru,

You cannot make Floating widget in Round shape like this.
Please check this link to create floating widget : https://www.androhub.com/android-home-screen-widgets/

Thanks

Jonathan Silva
Sunday, May 31st, 2020

Good night, I’m not able to prevent the icon from rising with the content
https://stackoverflow.com/questions/62095947/how-to-prevent-relativelayout-from-rising-with-linearlayout

Help me, please

Dr. Droid
Wednesday, July 29th, 2020

Hi Jonathan,

I have already added my solution to your StackOverflow question. Did you check?

Thanks

Post comment

Your email address will not be published. Required fields are marked *