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 …

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 🙂

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x