Android Floating Widget Tutorial – Display Widget Over Apps

In this tutorial we will learn creating a Floating Widget in our Application. You may have already seen a floating widget that is visible over the other apps. A very common example of Android Floating Widget can be seen with the Facebook Messenger App and I am sure many of you are already using messenger. So if you want to create a widget like that then, that is what we will be creating in this Android Floating Widget Tutorial.

How can we create a Floating Widget?

Basically an Android Floating Widget is a normal view that is drawn over the apps. Or it doesn’t matter in which screen you are it will be drawn over, so it becomes very handy for user to perform multi tasking.

If you want to draw a Floating Widget in your application then your application mus have the SYSTEM_ALERT_WINDOW permission. Now you already know it that after Android Marshmallow we need to ask permissions at run time.

You can go to this Android Marshmallow Permissions Example to learn about runtime permissions.

Now lets create a new project and implement Android Floating Widget.

Creating a New Project

  • So lets create a new project using Android Studio.
  • Select an Empty Activity and wait till your project is completely loaded.

Creating UI

  • For this project we need two layouts. The first layout is for the activity_main.xml from here we will create the Widget. The another layout is for our widget. Now lets start with the activity_main.xml.

Creating MainActivity UI

  • Here activity_main.xml will contain only a single button and by pressing it we can create our widget. So paste the following code inside your activity_main.xml.

Creating Android Floating Widget UI

  • Now lets come to the main part of the UI. The UI for our widget. We have two states for the widget, the first state is when it is collapsed, and other state is when it is expanded.
  • So create a new layout file named layout_floating_widget.xml inside layout directory and write the following xml code.

  • You can see in the above layout the expanded part  has the android:visibility=”gone” so we will switch the view states of widget on click.
  • In the above layout I have used some icons so if you want these icons download my project from the bottom of this post and you will get the icons. As the icon part will give you errors right now. 

Creating Android Floating Widget

Service for our Android Floating Widget

  • Create a java class named FloatingViewService.java and write the following code.

  • Now we will code the MainActivity to launch our Android Floating Widget when the button is clicked.

Launching Android Floating Widget

  • Now come inside MainActivity.java and write the following code.

  • Now at last we need to define the service and the SYSTEM_ALERT_WINDOW permission in the manifest.

Modifying Android Manifest File

  • Here is my AndroidManifest.xml file.

  • Now thats it try running the application.

android floating widget tutorial

  • You can see it is working fine. Now you can design your Android Floating Widget as per your requirements and do whatever you want.

So thats all for this Android Floating Widget Tutorial friends. If you are having any queries then please comment. And I will try to solve your problems. Thank You 🙂

17 thoughts on “Android Floating Widget Tutorial – Display Widget Over Apps”

  1. Widget crashing in Android 8.0 showing this error : Unable to add window android.view.ViewRootImpl$W@432d219 — permission denied for window type 2002

    Reply
    • In the floatingViewService layout parameters, try changing WindowManager.LayoutParams.TYPE_PHONE to WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY, the problem seems to be related to the sdk version.

      Reply
  2. How do I let a floating view like this to have clicking effect? For some reason, using setOnClickListener works, but it doesn’t let me show the clicking effect of the view, no matter what I try…

    Reply
  3. It is very helpful to show some texts by this floating widget. But how can get the user’s input? It seems that I cannot make users type into this floating widget.

    Reply
  4. I get error

    Caused by: android.view.WindowManager$BadTokenException: Unable to add window — token null is not valid; is your activity running?
    at android.view.ViewRootImpl.setView(ViewRootImpl.java:798)
    at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:356)
    at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:94)
    at com.protectabnormalities.service.FloatingViewService.onCreate(FloatingViewService.java:47)

    Reply
  5. Hi Belal Khan,

    I successfully implemented your code and its very cool.
    Wanna use it for my project.

    Hey, I have three questions. Appreciate it really if you can provide any insight.

    1. Do you have idea how to make the expanded view’s width only cover the screen width?
    2. How can I go back from expanded view to Main Activity view?
    3. Is it possible and how to add video/photo or Admob(banner or interstitial or rewarded)?

    Thanks.

    Reply

Leave a Comment