Add a Medium Layout

The Geocortex Mobile Quickstart comes with a small and large layout. This tutorial will walk you through creating a medium form factor layout.

Prerequisites#

Check out and setup the Geocortex Mobile SDK Quickstart project.

Create the Layout File#

Add a new file layout-medium.xml to the platform agnostic project.

Copy the content from layout-large.xml into the layout-medium.xml.

Include the Layout File in each project#

Add the layout-medium.xml file as an asset to each project.

Android#

  1. Add the existing file layout-medium.xml as an link to the Assets folder.
  2. Ensure the build action for the file is AndroidAsset

iOS#

  1. Add the existing file layout-medium.xml as an link to the Resources folder.
  2. Ensure the build action for the file is BundleResource

UWP#

  1. Add the existing file layout-medium.xml as an link to the Assets folder.
  2. Ensure the build action for the file is Content

Reference the Medium Layout in the app.json#

Add the new layout as an app item to the app.json that references the medium layout.

{
"$schema": "..\\..\\ViewerFramework\\app-config\\mobile\\mobile-app-config.schema.json",
"schemaVersion": "1.0",
"items": [
...
{
"$type": "layout",
"id": "tablet-layout",
"url": "resource://layout-medium.xml",
"tags": [ "medium" ]
},
...
]
}
tip

An easy way to test your new layout when developing on a Windows Device is to temporarily remove the small and large layouts from your app.json.

Next Steps#

You now have a medium layout defined for your application. Learn more about how layout works and customize this new layout to be optimized for a tablet screen size.

Edit this page