You might ask why you’d bother measuring your app regions with a screenshot rather than just using a ruler to measure the tablet directly.  The primary reason is that your measurements will be MUCH more accurate.  A secondary reason could be that you may not have direct access to the app, but the user who does can capture and send you a screenshot.  You can get all the information you need about the app’s layout from the screenshot.  The screenshot can also be displayed in the keyguard designer along with your keyguard design to validate the fit.

Follow these steps to obtain a screenshot of your app and open it in Microsoft Paint:

1. Begin by opening the app you’re interested in and holding your iPad in the orientation you’ll use.
2. Capture a screenshot.  Different tablets use different methods to capture a screenshot.  If you’re using an iPad and don’t know how to capture a screenshot, Apple provides instructions here.
3. Open up the Photos app  and go to the Screenshots album.
4. Tap “Select”  and tap on the screenshot that you just created – a check mark should appear on the image.
5. Tap on the “Share” icon  and choose a destination for the image (I have added support for Google Drive to my iPad so that I can send the image directly to my PC).
6. Go to your PC and open your image (in this instance, from TouchChat) in Microsoft Paint.
7. The captured screen size depends on your iPad’s display properties.  The iPad mini has a screen that is 1024 pixels wide and 768 pixels high.   Verify that you haven’t lost any pixels in the transition from your tablet to your computer by comparing your file to the table on this page.
8. Go to the View tab and check both “Rulers” and “Status bar”.
9. As you move your cursor around the screen it will look like a small set of cross hairs.   Place the cursor on the border of some region that you want to measure.  In this case, I’ve placed the cursor (a faint plus sign) on the border between the upper message bar and the upper command bar.  Note that you can get a much more useful set of mouse cross-hairs by downloading Microsoft Powertoys – more on that in the video below.
10. Look at the far left of the status bar at the bottom of the Microsoft Paint window.  You’ll see two numbers: the first represents the number of pixels your cursor is from the left side of the image, and the second is the number of pixels your cursor is from the top of the image.  You care about that second number – in this instance, 56.

Put each of your measurements into  the “App Layout in px” section of the Customizer.

What if you have a Mac?

All you need from a graphics program is a way to determine the location of the cursor, anywhere on the screen, in pixels.  The built-in photo editor in OS X (the Mac operating system) doesn’t help at all.  However, there are several free graphics editors that will do it and run on a Mac.  One example is Gimp.  Gimp has been a staple of the Open Source community for decades.  You can download a free copy of the software here.

Measuring the Layout of your App in Pixels

Now that you have a screenshot, you can use it to lay out the vertical regions of your app:

Though not shown in the video, if you have an app with no lower message bar and no lower command bar, then the tops of those regions should be set to the total number of vertical pixels in the screenshot.