Overview

To begin making the SDK your own, you can change the app’s default name and icons, including the app icon. You can also change any images and add some fonts, which you’ll reference later in your theme file.


Display Name

To change the app’s display name, open institutions/mxmobile/config/overrides.yaml and edit app_name.


Logo

To change the logo that appears throughout your app, place your new mxmobile_logo_white.png images in the SD and HD folders in institutions/mxmobile/assets/mxmobile.

For more info, see the instructions for changing an image.


Icons

We recommend using the default icon size for any new icon you use.

All default icons are located in the client folder: /client/default/assets/icons.

However, to change an icon you must override it in the institutions folder:

  1. Open institutions/mxmobile/assets/mxmobile/icons, then place your new icon (which has the same name as the default icon you want to replace).
  2. Run ./generate.

App Icon

Your app icon should be a 1024x1024px .png.

To change your app icon:

  1. Edit institutions/mxmobile/config/overrides.yaml and change icon_url to either the:
  • Path to a local file (e.g. /Users/you/images/new_icon.png).
  • URL of a file hosted by MX (contact MX to have your new icon uploaded).
  1. Run ./generate

Fonts

You can use any TrueType font. To change a font, you must first add it, then reference it in the font definitions section of your theme file.

For more info on the theme file, refer to the theme section.

Once you have a .ttf file you’d like to add:

  1. Use a program like FontForge or FontBook to verify that the “Fontname” (FontForge) or “PostScript name” (FontBook) is the same as the file name (without the .ttf extension).
  2. Use a program like FontForge and ensure that the font has a glyph for U+25CF (the password masking character).
  3. Copy your .ttf file to institutions/mxmobile/assets.

After you’ve added and verified your .ttf file:

  1. Edit institutions/mxmobile/config/themes/theme_light.json, and change any font definitions you want to the new .ttf filename.
  2. Run ./generate.

If building for iOS, you may want to follow some additional steps to minimize problems:

  1. In the Xcode project navigator, add the font to the assets group.
  2. Edit proj.apple/Info.plist and add the font file name to the UIAppFonts array.

Images

Every image has an SD and HD variant. SD images are typically the same image as the HD image, but reduced to half the respective HD image’s size.

On almost all modern devices with a high pixel density display, the HD variant of an image will be used.

All default HD and SD images are in the client folder:

  • HD - client/mxmobile/assets/mxmobile/hd/images.
  • SD - client/mxmobile/assets/mxmobile/sd/images.

However, to override an image you must place your new image (which has the same name as the one you want to replace in the client folder) in the institutions folder:

  • HD - institutions/mxmobile/assets/mxmobile/hd/images.
  • SD - institutions/mxmobile/assets/mxmobile/sd/images.

For more info about which images you can change in some commonly used features and views, refer to the images sections throughout the features and views reference.