How to Create a Custom Lock Screen for Android (Part I)

  Programming

The lock screen apps you find on Google Play, such as Microsoft’s Next Lock Screen, are not true lock screens. They are just apps that look like lock screens. Now don’t get me wrong. They are very useful productivity apps, providing lots of short cuts and quick info widgets. The problem is that they don’t offer any real security. Additionally, most of them are quite unstable, running as services that use the SYSTEM_ALERT_WINDOW permission to draw themselves–or create overlays–over other apps, effectively simulating a lock screen. Sooner or later, they will break due to changes in the Android platform. In fact, many of them already break on devices running Android Oreo or higher because they aren’t able to draw over the status bar anymore.

Furthermore, such pseudo lock screens won’t work correctly on devices that have PIN or pattern security enabled. If you try to use them on such devices, you’ll actually end up with two lock screens: your device’s original lock screen, plus the pseudo lock screen. Again, let me stress on the fact that if you are creating a lock screen only for productivity purposes, you’re not going to have any major problems. But, if you want to offer security as well, a pseudo lock screen will just not cut it.

Many pseudo lock screens also double up as accessibility services. Why? Because if they don’t, they won’t be able to display notifications on devices running older versions of Android. Recently, Google Play announced that this behavior is not allowed. As a result, these lock screens will soon have to change to become notification services. But that would mean that they won’t run on older devices!

Well, now that you know the problems and disadvantages of creating a pseudo lock screen, let’s get to what this post is really about: system-level lock screens. A system-level lock screen is a true lock screen, and can be highly secure. It can offer PIN, pattern, password, and fingerprint-based security. It can count the number of failed attempts and, if necessary, actually lock a user out. It can’t be simply stopped or uninstalled to gain access to a device.

Unfortunately, a system-level lock screen is not something you can publish on Google Play. As its name suggests, it is a system app, which must be packaged along with an Android ROM. Alternatively, on rooted devices, it can be installed in the /system/priv-app directory and signed with the same key that was used to sign the Android ROM.

Creating a system-level lock screen from scratch is very hard, and will definitely take you months of effort. And there’s no documentation for it whatsoever. There aren’t even any open source projects you can refer to, except for AOSP itself, which, as you might already know, has miles and miles of code.

The easier option is to modify the existing lock screen of AOSP to give it new looks and functionality. Even that is easier said than done because the lock screen code is mildly coupled with several different parts of the Android platform. In this series of tutorials, I’ll be talking about how the AOSP lock screen works, what its components are, and how it can be customized. I too am still learning about the lock screen, so I’ll be updating this series as and when I learn something new that’s worth sharing.

Understanding the Keyguard

Almost all the code related to the AOSP lock screen is present in the com.android.keyguard package. A little bit of it is also present in the com.android.systemui package, but we’ll get to that later.

For now, let’s focus on just the looks of the keyguard, though I’ll talk about functionality too soon. In any case, if you are creating a custom lock screen for your ROM, chances are, you’re probably more interested in changing its looks than its functionality.

To make the lives of OEMs easy, the AOSP keyguard is very flexible when it comes to looks. In other words, most of its colors and dimensions are neatly placed inside XML files, instead of Java code. As a result, you can create a Substratum or RRO theme for it and dramatically change its looks. If you already have a rooted device and want to support devices running Android Marshmallow and higher, an RRO theme is your best bet. Just create overlays for the SystemUI and Keyguard packages, place them in the vendor/overlay directory, and you’re done. No need to deal with any code at all! Take a look at this repository if you want to see what a simple RRO theme looks like.

Important XML files

You can change several details about the lock screen by simply modifying the colors.xml and dimens.xml files of the Keyguard and SystemUI packages. To be able to do that though, you must understand several layout XML files.

Let me now point you to some of the most important layout XML files you’ll need to work with to specify the looks of your custom lock screen:

keyguard_status_view.xml

This file is present in the res/layout folder of the Keyguard package. It contains the TextClock widget responsible for showing the time on the lock screen. You can modify this file to change the color and font of the time, and even its position. It also contains a TextView widget to show the owner information.

keyguard_status_area.xml

This file too is present in the res/layout folder of the Keyguard package. It contains the TextClock widget that displays the date. Again, use this to change the font/color/position of the date. It also contains a TextView widget to display alarm information.

This layout is actually embedded inside the keyguard_status_view layout. As a result, both the TextClock widgets are actually inside a LinearLayout widget whose orientation is vertical.

keyguard_bottom_area.xml

This file is present in the res/layout folder of the SystemUI package. The bottom of the lock screen displays some informational text–such as “Charging” and “Swipe up to unlock”–and also shortcuts to open the camera and other apps. The UI for all that actually belongs to the SystemUI package, and is defined in this file.

It contains a KeyguardIndicationTextView widget to display the informational text. If you want to change the looks of that text, you must modify this widget.

The lock screen shortcuts are created using custom KeyguardAffordanceView widgets, which are based on the ImageView class. They can display an image, and create the growing circle animation when touched. This file contains two such widgets, one on the left and another on the right.

keyguard_status_bar.xml

This file too is present in the res/layout folder of the SystemUI package. It is responsible for displaying the icons in the status bar and the carrier text. You can modify this file if you want to change the looks of, say the battery indicator. But, there’s a lot more to this file. It includes a few layouts, which in turn include several other layouts. I haven’t fully understood all of those layouts, so I’ll be writing more about this file soon.

Part II coming soon…

If you found this article useful, please share it with your friends and colleagues!