1. Introduction
If you are a Facebook fan, you must be familiar with the Messages FB application, it appears as a floating chat bubble on the phone screen. You can drag and drop chat view onto other applications easily.
In this article, I will guide you to create an application that has the same view as the Message application of FB.
2. Get started
2.1. Create a new Project
You open Android Studio, create a new application with an activity: MainActivity and activity_main.xml layout as follows:
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?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=".MainActivity"> <Button android:id="@+id/btn_start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="START" /> <Button android:id="@+id/btn_stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/btn_start" android:layout_centerHorizontal="true" android:text="STOP" /> </RelativeLayout> |
In MainActivity, we will have 2 buttons START, STOP to open and close the view like Facebook Message.
2.2 “Draw over other apps” permission
In order for the view to be dragged and dropped on other applications, you must ask your application to use permison ACTION_MANAGE_OVERLAY_PERMISSION. Therefore, handle in MainActivity as follows:
1 2 3 4 5 6 7 8 9 10 11 12 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, 0); } } |
Additionally, you need to add permissions in AndroidManifest.xml as follows:
1 2 | <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> |
Now, when you run the application, the open app will switch to the setting screen, so you can allow your application to be displayed over other applications as follows:
Please enable this permission so we can continue with the following sections.
2.3. Service
We will create a Service to control the view we want. Create a new class, name it MyService .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import android.app.Service; import android.content.Intent; import android.os.IBinder; import androidx.annotation.Nullable; public class MyService extends Service { @Override public void onCreate() { super.onCreate(); } @Nullable @Override public IBinder onBind(Intent intent) { return null; } } |
Remember to declare it in AndroidManifest.xml as follows:
1 2 3 4 | <service android:name=".MyService" android:exported="true" /> |
In MyService , we will create an ImageView, display the icon of the app, and handle the logic when the user drag and drop as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | package com.demo.floating; import android.app.Service; import android.content.Intent; import android.graphics.PixelFormat; import android.os.IBinder; import android.view.Gravity; import android.view.MotionEvent; import android.view.View; import android.view.WindowManager; import android.widget.ImageView; import androidx.annotation.Nullable; public class MyService extends Service { private WindowManager mWindowManager; private ImageView image; @Override public void onCreate() { super.onCreate(); image = new ImageView(this); image.setImageResource(R.mipmap.ic_launcher); mWindowManager = (WindowManager)getSystemService(WINDOW_SERVICE); final WindowManager.LayoutParams paramsF = new WindowManager.LayoutParams( WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, PixelFormat.TRANSLUCENT); paramsF.gravity = Gravity.TOP | Gravity.LEFT; paramsF.x=0; paramsF.y=100; mWindowManager.addView(image, paramsF); try{ image.setOnTouchListener(new View.OnTouchListener() { WindowManager.LayoutParams paramsT = paramsF; private int initialX; private int initialY; private float initialTouchX; private float initialTouchY; @Override public boolean onTouch(View v, MotionEvent event) { switch(event.getAction()){ case MotionEvent.ACTION_DOWN: initialX = paramsF.x; initialY = paramsF.y; initialTouchX = event.getRawX(); initialTouchY = event.getRawY(); break; case MotionEvent.ACTION_UP: break; case MotionEvent.ACTION_MOVE: paramsF.x = initialX + (int) (event.getRawX() - initialTouchX); paramsF.y = initialY + (int) (event.getRawY() - initialTouchY); mWindowManager.updateViewLayout(v, paramsF); break; } return false; } }); } catch (Exception e){ e.printStackTrace(); } } @Nullable @Override public IBinder onBind(Intent intent) { return null; } } |
2.4. Processed in MainActivity
We will handle when clicking START, STOP button in MainActivity as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.provider.Settings; import android.view.View; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, 0); } findViewById(R.id.btn_start).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //toast startService(new Intent(MainActivity.this, MyService.class)); } }); findViewById(R.id.btn_stop).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { stopService(new Intent(MainActivity.this, MyService.class)); } }); } } |
Run the application, when you click on START, a view will appear as the app’s icon. You can drag and drop it full screen, even when exiting the app as follows:
