floating icon like facebook chat head

How to Create Floating Icon like Facebook Messenger icon Android

All of us love Facebook messenger icon(float over the screen ). The Facebook messenger icon (floating icon) remain on top and can float anywhere on screen. You can touch it anytime, it will let you inside the current active messenger window.

It is Pretty Cool !!! It is very convenient to perform multitask on one finger touch. You can drag it to any where on screen.

Today in this post, I will show you ” How to create floating icon like Facebook Messenger App”.  Some people called it as floating widget. Also in this project When you click on floating icon it will show a chat window ,where you can type a message.

Floating Icon- 3 Important Point

Facebook chat head(Messenger icon) or Generally say it floating icon is nothing but a floating view. In your android app, you have to define the app permission – android.permission.SYSTEM_ALERT_WINDOW . This permission let you drag your app icon over other app or Home screen.

Second important thing is icon can be click any time, so you have to create a service that can monitor click event on floating icon.

I have used 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.

Third thing is, to drag floating icon across the screen I am using OnTouchListener() to listen to drag events and change the position of the chat has in the screen.

1) Create Floating View Layout
2) Create activity_main.xml
3) Create floating service
4) Add Permission in Manifest file
5) Check run time Permission
6) Run code on device

Login & Download source code


50 day android course


Create Floating View Layout

Create a new project in android studio, My project name is “FloatingWidget”. On res folder create new xml layout file name as “floatingview.xml”.

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

On this view, I put a EditText to type message. You can create any type of form in this expanded view. Like you can put shortcut of different apps or can create google search bar etc.


Create activity_main.xml

In main layout file I am using a button to launch floating icon. I real project you need to do auto service launch when new notification come for your app. To do this you have to use Broadcast Receiver.


Create floating Service

Now I am going to create service that will keep care about floating icon. create new java file name as FloatingService.java There is three part of this service-

  1. Create Container view
  2. Create onclick listener on Expanded view items
  3. Create onTouch listener for drag and launch view

Create Container view

First I am going to create a view that will hold floating icon. In this java file I am going to define primary location of the floating icon which is top left corner of device screen. Inside onCreate() method I am using WindowManager to define location of icon.

There is an Important Flag

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM

I have created this project to demonstrate floating icon so when you click on edittext in expanded view, it will not show keypad to type word on it. You have to use WindowManager.LayoutParams.FLAG_LOCAL_FOCUS_MODE with some other configuration.

Create onclick listener on Expanded view items

In this part I define onClick Listener on editText and close button. You know about how to set onClick() on item so I am not going to explain it here.

Create onTouch listener for drag and launch view

Now its time to define where you floating icon will go with your finger movement. To get the finger movement attach onTouchListener on view.

Complete FloatingService.java file


Add Permission in AndroidManifest.xml

The last step of this project is adding floating view by starting the FloatingViewService. First you have to define permission on AndroidManifest.xml file
android.permission.SYSTEM_ALERT_WINDOW permission. 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 runtime. Also define FloatingServer.java file as service in manifest file.

Add Run time Permission


Run Code

Now run this code in real device. Your floating icon is ready to use. If you have any problem on execution of code, leave comment below.

Do you know how to create parallax animation on android? if no, read my this post

You can learn android App development with me in 50 Days. I am going to start online course where I will teach you both Basic and Advance Android App Development.

50 day android course


Posted in andorid.

kamal bunkar

I Am Post Graduation (M.Tech. C.S.E) from VNIT, Nagpur. I Have Published Two Research Paper On International Journal. My Apps on Google Play Store- Sanyukt Parivar(Mp Police ), NOTOtag- Digital Chhindwara, The Tubby-VoiceRecognizer & More.
Contact me at kamal.bunkar@blueappsoftware.in

One Comment

  1. Pingback: ExoPlayer Android Example- Best Alternative of VideoView By Kamal

Leave a Reply

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