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.

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. :)

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.

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)