ANDROID

How to create Android Floating Widget!

How to create Android Floating Widget

Floating widgets are basically views that float over the screen. They are particularly effective for multi-tasking because they allow the user to control two applications simultaneously. For instance, if we are typing a text message and a floating widget from the music player is  over the screen, then we can control music while typing the message at the same time. Sounds amazing, right! In this tutorial, we shall be creating a simple floating widget which controls music through buttons, and the user will be able to drag this floating widget across the screen.

Android system allows applications having android.permission.SYSTEM_ALERT_WINDOW permission, to draw over other applications. We shall be using background service to add the floating widget into the view hierarchy of the current screen, which will keep the floating widget always on top of application windows.

Creating new project:

  • Create a new project in Android Studio from and fill in the necessary details.
  • Download this resource drawables and add them to project’s res directory. This folder contains all the necessary icons & images required for this app.
  • 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.
  • We shall also add a service named FloatingViewService.

  • For the floating view, create a new layout file named layout_floating_widget.xml. This layout will contain two main views. The ‘collapsed view’ which shall remain collapsed when the view is launched, and when the user will click on it, the ‘expanded view’ will open which shall have buttons to play music, play the next song and open the application.

    Adding Floating Widget & handling Dragging:

  • Next we create a service called FloatingViewService.java. We start the service  using startService() command which will display the floating view. Then in the onCreate() of the service, we shall add the layout of the floating view at the top-left corner of the window.

  • We shall be implementing the OnClickListner() for all the functionalities like play, pause, and open application. When the user clicks on the close button in the collapsed view, FloatingViewService will get destroyed and floating view will be removed from the view hierarchy.
  • Add the below code to FloatingViewService.java in onCreate() method.

  • Now we shall override the OnTouchListener() to drag the floating view along with the user’s touch.
  • We will record the initial x and y coordinates whenever the user touches the root of the view and when the user moves the view, the application will calculate the new X and Y coordinate and move the view.

 

Handling Widget Collapsing & Expanding:

When user clicks on the image view of the collapsed layout, visibility of the collapsed layout should changed to View.GONE and expanded view should become visible.

For this, we will implement OnClickListner() to the imageview of the collapsed layout. But since we implemented OnTouchListener() to the root view, OnClickListner() won’t work. So we will detect clicks in MotionEvent.ACTION_MOVE in the OnTouchListener() using below code:

The FloatingViewService.java will look like this:

Handle Overdraw permission:

  • Next we add the floating view by starting the FloatingViewService. For 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.
  • Here is the code snippet for the MainActivity that will display the floating view when button is clicked by checking the SYSTEM_ALERT_WINDOW permission.

  • Now build and run the project to see the results.

 

2 Comments

2 Comments

  1. descargar rust v25

    October 25, 2017 at 9:31 pm

    This i like. Thanks!

  2. hacktrafficriderandroid

    October 31, 2017 at 6:38 am

    This is amazing!

Leave a Reply

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

Most Popular

Buzzing your life from assorted Coding,tips and general life opinion. Made your life Buzz by BuzzMyCode articles, share with world.

What is Buzzmycode, we had started this website to give tech savy the new way of life by reading our fresh organic content on every technology and applications.

Copyright © 2017 SyncSaS. Theme by SyncSaS Themes, powered by BuzzMyCode.

To Top