4D for Mobile: Custom Data Formatters for Light & Dark Appearances

Automatically translated from English

For some time, you’ve been able to create your own custom data formatters and convert strings, booleans, or integers to images in your generated app.

This new 4D v19 R2 feature will allow you to take full advantage of those formatters for iOS and Android, and make sure images look good in both light and dark appearances.

Let’s see how!

You can do this in three different ways :

  • using black and white colors
  • using different pictures depending on the active mode
  • mixing the above two options

UsING black and white colors

This option will allow you to obtain color-optimized images depending on the mode set on your mobile device (light or dark).


{  "name": "textToImage",
   "type": ["text"],
   "binding": "imageNamed",
   "choiceList": {"clear":"clear.png","cloudy":"cloudy.png","rain":"rain.png"},
   "assets": {
      "size": 54,
      "tintable": true
   }
}

For all your classic formatters, the formatter manifest.json file should already contain the following information :

  • a “choiceList” that contains the values that are going to be replaced by images
  • images (or assets) properties such as “size”

 

The significant difference here is that the “tintable” key is set to true so that the image color (black or white) can be dynamically adapted according to the UI’s theme mode.

Here’s what you get on your phone when you switch modes:

UsING different pictures depending on the mode

This option lets you set different optimized images to be displayed depending on the mode set on your mobile device.


{  "name": "textToImage",
   "type": ["text"],
   "binding": "imageNamed",
   "choiceList": {"clear":"clear.png","cloudy":"cloudy.png","rain":"rain.png"},
      "assets": {
      "size": 54
   }
}

Here, the formatter is the same as the previous one. What changes is the name of the image. If an image suffixed with “_dark,” it is used for dark mode.

Example: “clear_dark.png” is set as the dark version of “clear.png”

Here’s the result:

MixING Both options

This option will allow you to take advantage of the two previous options. This means that you can set the “tintable” key to true, and at the same time specify optimized images and colors to be displayed depending on the mode set on your mobile device.

You’re now ready to use your formatters whether your iOS and Android device is in dark or light mode.

Yes, this feature is also available on Android!

Don’t hesitate to give us feedback on the 4D forum, and check out the dedicated documentation for more details. 

David Azancot

• 4D for iOS Product Owner •

David Azancot joined the 4D Product team as a Product Owner in 2017. He's in charge of writing the user stories and translating them into functional specifications. His role also includes making sure that feature implementations meet customers' needs.

David graduated with an MBA in Marketing, Internet and Mobility from the Leonard De Vinci Institute and began his career in 2011 with a mobile start-up company, later acquired by Madvertise (a mobile marketing group). Passionate about mobile interfaces, he was the natural choice to develop interactive mobile ad formats for the group in 2015. In parallel, David has been developing his own iOS and Android applications since 2012.