Customize the Theme

Geocortex Mobile's appearance is built around two concepts: theme and layout. The theme controls the color scheme of the app, while the layout controls the organization of content.

note

The theme can be partially configured by using the Geocortex Mobile Designer.

Prerequisites

Follow along by setting up the Geocortex Mobile SDK and editing the minimal layout and app config provided.

tip

If you just need to make a small change to the layout and app config of an existing application, you can download the config and layout files for the application, tweak them, and then re-upload them.

Create a Basic App

Let's create a basic application with layout and config that we can theme.

app/layout-large.xml
<?xml version="1.0" encoding="utf-8" ?>
<layout
xmlns="https://geocortex.com/layout/v1"
xmlns:gxm="https://geocortex.com/layout/mobile/v1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://geocortex.com/layout/v1 ../../ViewerSpec/layout/layout-mobile.xsd">
<gxm:taskbar id="taskbar" orientation="vertical">
<map config="default" slot="main"/>
<panel>
<results-list config="results" />
<feature-details config="feature-details"/>
</panel>
</gxm:taskbar>
</layout>

Add Configuration for the Branding Service

Next, we are going to add an app item to configure the Branding Service, which manages application theming.

app/app.json
{
"$schema": "..\\..\\ViewerFramework\\app-config\\mobile\\mobile-app-config.schema.json",
"schemaVersion": "1.0",
"items": [
{
"$type": "layout",
"id": "desktop-layout",
"url": "resource://layout-large.xml",
"tags": ["mobile", "large"]
},
{
"$type": "branding",
"id": "branding"
},
{
"$type": "map-extension",
"id": "default",
"onClick": [
"tasks.identify",
"results.display",
"map.zoom-to-features"
],
"webMap": "0ba877a4185448cb832af9a661031e31"
},
{
"$type": "feature-details",
"id": "feature-details",
"onFeatureShow": "highlights.add-focus",
"onFeatureHide": "highlights.remove-focus"
},
{
"$type": "results",
"id": "results",
"onFeatureShow": [
"highlights.add",
{
"name": "panel.snap-host-panel",
"arguments": {
"userSet": true
}
}
],
"onFeatureRemove": "highlights.remove",
"onAllFeaturesRemoved": [
"panel.close-host-panel",
"search.clear",
"results.clear"
],
"onFeatureClick": [
"results.display-details",
{
"name": "panel.snap-host-panel",
"arguments": {
"snapPosition": "middle"
}
},
"map.zoom-to-features",
"highlights.pulse"
]
}
]
}

Add a New Theme

The branding service can be configured with a list of themes. Let's configure our branding service with a new theme with that has a custom background color.

You can customize the theme by changing any of the built-in color keys used for themes.

app/app.json
{
"$schema": "..\\..\\ViewerFramework\\app-config\\mobile\\mobile-app-config.schema.json",
"schemaVersion": "1.0",
"items": [
{
"$type": "layout",
"id": "desktop-layout",
"url": "resource://layout-large.xml",
"tags": ["mobile", "large"]
},
{
"$type": "branding",
"id": "branding",
"activeTheme": "custom-theme",
"themes": [
{
"id": "custom-theme",
"colors": {
"primaryBackground": [50, 153, 168, 255]
}
}
]
},
{
"$type": "map-extension",
"id": "default",
"onClick": [
"tasks.identify",
"results.display",
"map.zoom-to-features"
],
"webMap": "0ba877a4185448cb832af9a661031e31"
},
{
"$type": "feature-details",
"id": "feature-details",
"onFeatureShow": "highlights.add-focus",
"onFeatureHide": "highlights.remove-focus"
},
{
"$type": "results",
"id": "results",
"onFeatureShow": [
"highlights.add",
{
"name": "panel.snap-host-panel",
"arguments": {
"userSet": true
}
}
],
"onFeatureRemove": "highlights.remove",
"onAllFeaturesRemoved": [
"panel.close-host-panel",
"search.clear",
"results.clear"
],
"onFeatureClick": [
"results.display-details",
{
"name": "panel.snap-host-panel",
"arguments": {
"snapPosition": "middle"
}
},
"map.zoom-to-features",
"highlights.pulse"
]
}
]
}

Relevant SDK Samples

The Geocortex Mobile SDK Samples has an example of changing the theme through configuration.

Edit this page