Floating widgets float over the screen over any app that is currently running.
Here we will make a floating action button that you can drag around the screen to position and do actions on it.
Add Permission
For drawing over the other apps, you need “android.permission.SYSTEM_ALERT_WINDOW” permission.
So add this entry in your manifest.
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> |
Our Manifest will look like this
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="floating_demo.coderzheaven.com.floatingdemo"> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <service android:name=".FloatingService" android:enabled="true" android:exported="false" /> </application></manifest> |
Layout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="floating_demo.coderzheaven.com.floatingdemo.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:text="Floating action Demo\n(coderzheaven.com)" /> <Button android:id="@+id/createBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Create Floating Button" android:layout_centerInParent="true" android:textColor="@android:color/white" android:layout_marginBottom="30dp" android:padding="10dp" android:background="@color/colorAccent" android:layout_alignParentBottom="true"/></RelativeLayout> |
The next layout is shown when the floating button is clicked.
We will name it floating_layout.xml.
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RelativeLayout android:id="@+id/parentRel" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RelativeLayout android:id="@+id/r1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/mainButton" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentTop="true" android:src="@mipmap/ic_launcher" /> <ImageView android:id="@+id/closeBtn" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginLeft="30dp" android:src="@android:drawable/ic_dialog_info" /> </RelativeLayout> <LinearLayout android:id="@+id/showLin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_toRightOf="@+id/r1" android:background="@color/colorAccent" android:gravity="center" android:padding="20dp" android:visibility="gone"> <ImageView android:id="@+id/btnInfo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/ic_dialog_info" /> </LinearLayout> </RelativeLayout></FrameLayout> |
Activity and the Floating Service
MainActivity
package floating_demo.coderzheaven.com.floatingdemo;import android.content.Context;import android.content.Intent;import android.net.Uri;import android.os.Build;import android.os.Bundle;import android.provider.Settings;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Toast;public class MainActivity extends AppCompatActivity { private static final int APP_OVERLAY_PERMISSION = 1000; private Context context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = this; // Asking for permission from user... if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(context)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, APP_OVERLAY_PERMISSION); } findViewById(R.id.createBtn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (!(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(context))) { // Permission was already granted..starting service for creating the Floating Button UI... startService(new Intent(context, FloatingService.class)); finish(); } } }); findViewById(R.id.createBtn).setVisibility(checkIfOverlayPermissionGranted() ? View.VISIBLE : View.GONE); } Boolean checkIfOverlayPermissionGranted() { return Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && Settings.canDrawOverlays(context); } @Override protected void onDestroy() { super.onDestroy(); if (!(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(context))) { // Permission was already granted..starting service for creating the Floating Button UI... startService(new Intent(context, FloatingService.class)); } } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == APP_OVERLAY_PERMISSION) { showMessage(checkIfOverlayPermissionGranted() ? "Overlay Permission Granted :)" : "Overlay Permission Denied :("); findViewById(R.id.createBtn).setVisibility(checkIfOverlayPermissionGranted() ? View.VISIBLE : View.GONE); } else { super.onActivityResult(requestCode, resultCode, data); } } // Shows message to the user... void showMessage(String message) { Toast.makeText(context, message, Toast.LENGTH_LONG).show(); }} |
We will use a service to draw the floating button over other apps.
Create a java file named FloatingService.java which extends Service.
package floating_demo.coderzheaven.com.floatingdemo;import android.app.Service;import android.content.Intent;import android.graphics.PixelFormat;import android.os.IBinder;import android.support.annotation.Nullable;import android.view.Gravity;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.WindowManager;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.Toast;public class FloatingService extends Service implements OnClickListener, View.OnTouchListener { private WindowManager mWindowManager; private View mFloatingView; private ImageView mainButton; private LinearLayout showLin; private ImageView btnInfo; private WindowManager.LayoutParams params; private ImageView btnClose; int initialX = 0; int initialY = 0; float initialTouchX = 0; float initialTouchY = 0; @Nullable @Override public IBinder onBind(Intent intent) { return null; } @Override public void onCreate() { super.onCreate(); //Inflate the floating view layout we created mFloatingView = LayoutInflater.from(this).inflate(R.layout.floating_layout, null); //Add the view to the window. params = new WindowManager.LayoutParams( WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, PixelFormat.TRANSLUCENT); // Set the position to the top right corner of the screen params.gravity = Gravity.TOP | Gravity.LEFT; params.x = 50; params.y = 50; //Add the view to the window mWindowManager = (WindowManager) getSystemService(WINDOW_SERVICE); mWindowManager.addView(mFloatingView, params); mainButton = (ImageView) mFloatingView.findViewById(R.id.mainButton); btnClose = (ImageView) mFloatingView.findViewById(R.id.closeBtn); btnInfo = (ImageView) mFloatingView.findViewById(R.id.btnInfo); showLin = (LinearLayout) mFloatingView.findViewById(R.id.showLin); mainButton.setOnClickListener(this); btnInfo.setOnClickListener(this); btnClose.setOnClickListener(this); //Drag and move floating view using user's touch action. mainButton.setOnTouchListener(this); } @Override public void onClick(View view) { if (view == btnClose) { int vis = (showLin.getVisibility() == View.VISIBLE) ? View.GONE : View.VISIBLE; showLin.setVisibility(vis); } if (view == btnInfo) { Intent intent = new Intent(FloatingService.this, MainActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent); // Stop the service and Remove the Floating Button when our app opens... stopSelf(); } } @Override public void onDestroy() { super.onDestroy(); if (null != mFloatingView && null != mWindowManager) mWindowManager.removeView(mFloatingView); } // Shows message to the user... void showMessage(String message) { Toast.makeText(this, message, Toast.LENGTH_LONG).show(); } @Override public boolean onTouch(View view, MotionEvent motionEvent) { showLin.setVisibility(View.GONE); switch (motionEvent.getAction()) { case MotionEvent.ACTION_DOWN: //remember the initial position. //initialX = params.x; //initialY = params.y; //get the touch location initialTouchX = motionEvent.getRawX(); initialTouchY = motionEvent.getRawY(); return true; case MotionEvent.ACTION_UP: return true; case MotionEvent.ACTION_MOVE: //Calculate the X and Y coordinates of the view. params.x = (int) (motionEvent.getRawX() - initialTouchX) - initialX; params.y = (int) (motionEvent.getRawY() - initialTouchY) - initialY; //Update the layout with new X & Y coordinate mWindowManager.updateViewLayout(mFloatingView, params); return true; } return false; }} |
Source Code
You can download the complete source code from here.