Thursday, 3 January 2013

How to overlay a View over everything on the screen

This tutorial will teach you how to place a view over all apps on Android. This means, your view will always be visible on the screen, no matter what application the user is using currently. It will also be shown on top of the home screen.

Why would you want to do this? Some situations I can think of are,
  1. You may want to display something really important to the user immediately, without the user having to slide the notification bar.
  2. You can make the screen darker than the minimum brightness possible by overlaying a translucent black view.
As the view is visible even when the user is on the home screen, it is better we use a Service instead of an Activity to manage it.

Let us start now. First, you need to add the following permission to your manifest,
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
Next, let us create the Service. I will be naming it OverlayService.java. This will add a full-screen translucent red colored view to the screen. So, your screen will have a reddish tint when this service is active. This red View is nothing but a LinearLayout which has a background color of 0x88ff0000. This is in the ARGB format, so the first 0x88 represents the alpha value of the color. As you might already know, alpha values range from 00 for fully transparent to FF for fully opaque.

We will be adding this LinearLayout to the Window, so we have to use the WindowManager.LayoutParams class to set its layout.

The Service has two important methods. The onCreate() creates the View and the onDestroy(), obviously removes the View. Here is the full code,
package com.whycouch.overlay;

import android.app.Service;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.os.IBinder;
import android.view.WindowManager;
import android.widget.LinearLayout;

/**
 * Service to overlay a translucent red View
 * @author Hathibelagal
 */
public class OverlayService extends Service {

    LinearLayout oView;

    @Override
    public IBinder onBind(Intent i) {
        return null;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        oView = new LinearLayout(this);   
        oView.setBackgroundColor(0x88ff0000); // The translucent red color
        WindowManager.LayoutParams params = new WindowManager.LayoutParams(
                WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
                0 | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
                PixelFormat.TRANSLUCENT);        
        WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
        wm.addView(oView, params);
    }
    
    @Override
    public void onDestroy() {            
        super.onDestroy();
        if(oView!=null){
            WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
            wm.removeView(oView);
        }
    }

}
Next, we create the Activity that can start and stop this Service. The only method we will define in the Activity is the onCreate. We will use the startService() and stopService() methods. This should be pretty self-explanatory,
package com.whycouch.overlay;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

/**
 * Activity to start and stop the Service
 * @author Hathibelagal
 */ 
public class OverlayActivity extends Activity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {    
        super.onCreate(savedInstanceState);            
        toggleService();
        finish(); // Just close the Activity after the toggle
    }
    
    private void toggleService(){
        Intent intent=new Intent(this, OverlayService.class);
        // Try to stop the service if it is already running
        // Otherwise start the service
        if(!stopService(intent)){
            startService(intent);
        }
    }
}
Don't forget to add the Service to your manifest file.
<service android:name=".OverlayService"></service>
We are done. Just deploy it, and you should see your phone's screen turn red. Just open the Activity again to remove the red tint.
The home screen with our overlay
Hope you found this useful. Do write to me with feedback and suggestions.

2 comments: