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