Sizing layouts for Android devices for FileMaker 15 WebDirect

With the release of FileMaker 15 Server the Chrome browser on the Android operating system is now supported for use with FileMaker 15 WebDirect when using devices with a five inch or larger screen. I have spent some time testing this out and I’ve found that things seem to work as well as it does on the other platforms. However, during my testing I did come across something I found to be a bit odd and not quite as intuitive due to the variety of Android screen sizes and resolutions. iOS has historically used whole number multipliers to scale to the native screen resolution. Using either a 2x or 3x multiplier they can scale the output resolution to the native screen resolution and keep all elements of the items large and legible on the device screens. Android uses multipliers in the same manner as iOS, however the difference is that Android strays from simple 2x and 3x multipliers. Depending on the device resolution the multiplier may be anywhere from 1.3x to 3.5x! With the increasing density of new devices this problem is only going to get worse. Fortunately, there is a very nice reference available at https://design.google.com/devices/ that provides the dp (density-independent pixels) of various popular devices. Using the dp value you can determine your starting point when designing the size of our FileMaker layout. But the fun does not stop there! To complicate things the actual usable space that is available on the device is further limited by things such as the notification bar, status toolbar and button bar. And…one last thing: There is no defined cut off between pixel density for tablets. I’m not going to go into too much detail since the Android developer documents do a great job of explaining why this is complicated. I will just say that a general rule would be that if the width is 600dp or higher the device is most likley a tablet and will behave slightly different from a phone. https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts

How To Calculate Usable Screen Size

First, some important numbers: 1 dp = ~1pt

iOS:

Notification Bar and Safari Search Bar Height: 64 dp Safari Tab Bar Height: 32 dp Status Toolbar Height: 44 dp

Android Phone:

Notification Bar and Chrome Search Bar Height: 80 dp Status Toolbar Height: 44 dp Button Bar Height (Portrait): 48 dp Button Bar Width (Landscape): 48 dp

Android Tablet:

Notification Bar and Chrome Search Bar Height: 120 dp Status Toolbar Height: 44 dp Button Bar Height (Portrait and Landscape): 48 dp

iOS calculations:

For iOS devices it is simple to calculate how much space the notification toolbar and status toolbar take up since the layout elements are consistent across phones and tablets. For iOS devices use the following formula to determine the usable vertical dp: Without Status Toolbar and no tabs = vertical dp – 64 dp With Status Toolbar and no tabs = vertical dp – 108 dp Without Status Toolbar and tabs = vertical dp – 96 dp With Status Toolbar and tabs = vertical dp – 140 dp

Android calculations:

For Android devices it is slightly more complicated since chrome is displayed differently on tablets than on phones. You also have to take into account the button bar for devices that have on-screen buttons. Tablets always move the button bar on the bottom of the screen when switching between portrait and landscape orientation. Phones keep the button bar on the bottom or right, depending on orientation. This, of course, only applies if your Android device has on-screen buttons.

For Android phones without on-screen buttons:

Portrait and Landscape: Without Status Toolbar = Vertical dp – 80 dp With Status Toolbar = Vertical dp – 124 dp

For Android phones with on-screen buttons:

Portrait Orientation: Without Status Toolbar = Vertical dp – 128 dp With Status Toolbar = Vertical dp – 172 dp Landscape Orientation: Without Status Toolbar = Vertical dp – 80 dp With Status Toolbar = Vertical dp – 124 dp Available Width = Horizontal dp – 48 dp

For Android tablets without on-screen buttons:

Portrait and landscape: Without Status Toolbar = Vertical dp – 120 dp With Status Toolbar = Vertical dp – 164 dp

For Android tablets with on-screen buttons:

Portrait and landscape: Without Status Toolbar = Vertical dp – 168 dp With Status Toolbar = Vertical dp – 212 dp

Calculating WebDirect Screen Size The Other Way

As an alternative to the math: FileMaker 15 has some built in functions that will calculate the usable space available to you. You can use the Get(WindowContentHeight) and Get(WindowContentWidth) functions to return the usable space in pts that is available at the time you call the function. Showing or hiding the toolbar will allow you to determine the usable space for either scenario. Of course, you need to be calling the function on the device while connected with Web Direct to get a result on the device. This makes it a bit more time consuming to set up if you don’t already have FileMaker WebDirect configured and running.

Calculating WebDirect Screen Size the Easy Way

To make calculating the screen size even simpler I have created a simple utility that will calculate the usable space available for your device. This Javascript based utility uses the formulas above to determine the usable space for your device. To use this tool simply navigate to the link below from your target device and view the results! https://skeletonkey.com/webd_screen_calculator.html Calvin Cooper is a FileMaker 15 Certified Developer at Skeleton Key. About Skeleton Key Skeleton Key helps turn complex, complicated, and outdated systems into true information platforms. Our team of consultants and developers do this by developing custom-fit software tools and reporting dashboards that help businesses find, use, and understand their data, freeing them to focus on and grow their core business. In addition to custom databases and applications, we also provide training and coaching for getting the most out of your existing systems and understanding your unruly data. Skeleton Key is an open-book management company and active player of the Great Game of Business.