You might ask why you’d bother to measure your app regions using a screenshot rather than just getting out a ruler and measuring the tablet directly.  The primary reason is that you’re 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 how the app is laid out 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 bringing up the app you’re interested in and hold your iPad in the orientation in which you’ll be using the app.
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 I can send the image directly to my PC).
6. Go to your PC and open your image (in this case from TouchChat) in Microsoft Paint. 
7. The size of the captured screen will depend on the properties of your iPad.  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 case 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 layout 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.