How to show screen overlay in Android

Vedesh Kumar

31 May 2019

What is Screen Overlay?

Screen Overlay is a feature of the Android operating system that allows the applications to draw some layouts over the other applications. The most seen example of this feature is Facebook Messanger. Whenever you receive a message the chat head appears over any application and the user can easily see that whose message it is and can directly reply to it. The feature is supported by Android 23 and above.

Permissions Needed

Obviously, when your application starts to draw over other application’s UI then it is really going to interrupt the user while surfing the other application. Your application needs special permission from the user to do so. You must have seen the popup when you started using Facebook Messanger. You can see the screenshot below to the get the idea of the layout that appears when an app requests for permission.

If you also want your application to request this to a user then the below-provided code snippet will help you with that.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (!Settings.canDrawOverlays(this)) {
        val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:$packageName"))
        startActivityForResult(intent, 12345)
    }
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

if (!Settings.canDrawOverlays(this)) {

val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:$packageName"))

startActivityForResult(intent, 12345)

}

After this request, if the user permits your application then you will be able to draw over other apps.

How to draw Screen Overlay

1) First of all, Create a LayoutParams variable to define the overlay type, width, height, flags, etc.

val mParams: WindowManager.LayoutParams? = WindowManager.LayoutParams(
        200,
        200,
        WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,
        WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN,
        PixelFormat.TRANSLUCENT)

val mParams: WindowManager.LayoutParams? = WindowManager.LayoutParams(

200,

WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,

WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN,

PixelFormat.TRANSLUCENT)

2)Now we need a layout that will be inflated on the device window. Suppose we have a layout test.xml which looks something like.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/msg"
        app:layout_constraintVertical_bias="0.025" />

</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/msg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:layout_marginTop="16dp"

android:text="Button"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@+id/msg"

app:layout_constraintVertical_bias="0.025" />

</android.support.constraint.ConstraintLayout>

and get the view that needs to be inflated

val testView = LayoutInflater.from(context).inflate(R.layout.test, null)

1	val testView = LayoutInflater.from(context).inflate(R.layout.test, null)

3) And now, you need to add this view on the screen using the WindowManager class.

val wm = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
wm.addView(testView, mParams)

1 2	val wm = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager wm.addView(testView, mParams)

How to remove Screen Overlay

To remove the screen overlay, you need to use the remove function of the same WindowManager class

wm.removeView(testView)

1	wm.removeView(testView)

You can play with the layouts and overlay types to get different results.

That’s all for this blog. Thank you very much. This is Vedesh Kumar signing off.