Skip to content

mDL Processing Customization

On this page, explore the customization capabilities available for the Mobile Driver's License (mDL) processing.

There are two data retrieval methods available:

  • Bluetooth Data Retrieval

When the device engagement method is set to QR code, the Camera Frame is launched to scan it. After the session is initiated, the corresponding processing screen is displayed:

Customizable elements of the Bluetooth Data Retrieval screens for mDL

  • NFC Data Retrieval

When the NFC is selected for both device engagement and data processing, the corresponding processing screen is displayed:

Customizable elements of the NFC Data Retrieval screens for mDL

The following elements are customizable:

Background

The processing screen background color can be adjusted in the following way.

Mobile screens, demonstrating different background colors for BLE data retrieval

Mobile screens, demonstrating different background colors for NFC data retrieval

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.blue, forItem: .RGLCustomizationColorMDLProcessingScreenBackground)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor blueColor] forItem:RGLCustomizationColorMDLProcessingScreenBackground];
}];

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_BACKGROUND, R.color.colorPrimary)
    .apply()

DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_BACKGROUND, R.color.colorPrimary)
        .apply();

DocumentReader.instance.customization.colors.mdlProcessingScreenBackground = Colors.blue;

DocumentReader.instance.customization.colors.mdlProcessingScreenBackground = 0xff0000ff

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenBackground: 0xff0000ff
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenBackground: 0xff0000ff
  }
})

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenBackground: 0xff0000ff
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit().SetColor(CustomizationColor.MdlProcessingScreenBackground, 0xff0000ff).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.MDLProcessingScreenBackground);
});

Hint Messages

Messages displayed during the processing are customizable. You can adjust:

  • Text color
  • Text font
  • Background color

Hint messages customization for mDL processing via Bluetooth

Hint messages customization for mDL processing via NFC

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.purple, forItem: .RGLCustomizationColorMDLProcessingScreenHintLabelText)
    $0.setColor(.blue, forItem: .RGLCustomizationColorMDLProcessingScreenHintLabelBackground)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RGLCustomizationFontMDLProcessingScreenHintLabel)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor purpleColor] forItem:RGLCustomizationColorMDLProcessingScreenHintLabelText];
    [builder setColor:[UIColor blueColor] forItem:RGLCustomizationColorMDLProcessingScreenHintLabelBackground];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RGLCustomizationFontMDLProcessingScreenHintLabel];
}];    

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_HINT_LABEL_TEXT, R.color.colorPrimary)
    .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_HINT_LABEL_BACKGROUND, R.color.colorAccent)
    .setFont(CustomizationFont.MDL_PROCESSING_SCREEN_HINT_LABEL, typeface)
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_HINT_LABEL_TEXT, R.color.colorPrimary)
        .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_HINT_LABEL_BACKGROUND, R.color.colorAccent)
        .setFont(CustomizationFont.MDL_PROCESSING_SCREEN_HINT_LABEL, typeface)
        .apply();

DocumentReader.instance.customization.colors.mdlProcessingScreenHintLabelText = Colors.purple;
DocumentReader.instance.customization.colors.mdlProcessingScreenHintLabelBackground = Colors.blue;
DocumentReader.instance.customization.fonts.mdlProcessingScreenHintLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
);

DocumentReader.instance.customization.colors.mdlProcessingScreenHintLabelText = 0xff00ff00
DocumentReader.instance.customization.colors.mdlProcessingScreenHintLabelBackground = 0xff0000ff
DocumentReader.instance.customization.fonts.mdlProcessingScreenHintLabel = {
  name: "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
}

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenHintLabelText: 0xff00ff00,
    mdlProcessingScreenHintLabelBackground: 0xff0000ff,
  },
  fonts: {
    mdlProcessingScreenHintLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenHintLabelText: 0xff00ff00,
    mdlProcessingScreenHintLabelBackground: 0xff0000ff,
  },
  fonts: {
    mdlProcessingScreenHintLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
})

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenHintLabelText: 0xff00ff00,
    mdlProcessingScreenHintLabelBackground: 0xff0000ff,
  },
  fonts: {
    mdlProcessingScreenHintLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.MdlProcessingScreenHintLabelText, 0xff00ff00)
    .SetColor(CustomizationColor.MdlProcessingScreenHintLabelBackground, 0xff0000ff)
    .SetFont(CustomizationFont.MdlProcessingScreenHintLabel, Typeface.Serif)
    .Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Purple, RGLCustomizationColor.MDLProcessingScreenHintLabelText);
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.MDLProcessingScreenHintLabelBackground);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(16), MDLProcessingScreenHintLabel);
});

Loading Spinner

When the processing begins, the loading spinner and a message below it appear. You can customize the following elements:

  • Text color
  • Text font
  • Progress color

Loading spinner customization for mDL processing via Bluetooth

Loading spinner customization for mDL processing via NFC

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.purple, forItem: .RGLCustomizationColorMDLProcessingScreenProgressLabelText)
    $0.setColor(.blue, forItem: .RGLCustomizationColorMDLProcessingScreenLoadingBar)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RGLCustomizationFontMDLProcessingScreenProgressLabel)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor purpleColor] forItem:RGLCustomizationColorMDLProcessingScreenProgressLabelText];
    [builder setColor:[UIColor blueColor] forItem:RGLCustomizationColorMDLProcessingScreenLoadingBar];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RGLCustomizationFontMDLProcessingScreenProgressLabel];
}];

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_PROGRESS_LABEL_TEXT, R.color.colorPrimary)
    .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_LOADING_BAR, R.color.colorAccent
    .setFont(CustomizationFont.MDL_PROCESSING_SCREEN_PROGRESS_LABEL, typeface)
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_PROGRESS_LABEL_TEXT, R.color.colorPrimary)
        .setColor(CustomizationColor.MDL_PROCESSING_SCREEN_LOADING_BAR, R.color.colorAccent)
        .setFont(CustomizationFont.MDL_PROCESSING_SCREEN_PROGRESS_LABEL, typeface)
        .apply();

DocumentReader.instance.customization.colors.mdlProcessingScreenProgressLabelText = Colors.purple;
DocumentReader.instance.customization.colors.mdlProcessingScreenLoadingBar = Colors.blue;
DocumentReader.instance.customization.fonts.mdlProcessingScreenProgressLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
);

DocumentReader.instance.customization.colors.mdlProcessingScreenProgressLabelText = 0xff00ff00
DocumentReader.instance.customization.colors.mdlProcessingScreenLoadingBar = 0xff0000ff
DocumentReader.instance.customization.fonts.mdlProcessingScreenProgressLabel = {
  name: "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
}

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenProgressLabelText: 0xff00ff00,
    mdlProcessingScreenLoadingBar: 0xff0000ff,
  },
  fonts: {
    mdlProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenProgressLabelText: 0xff00ff00,
    mdlProcessingScreenLoadingBar: 0xff0000ff,
  },
  fonts: {
    mdlProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
})

DocumentReader.setCustomization({
  colors: {
    mdlProcessingScreenProgressLabelText: 0xff00ff00,
    mdlProcessingScreenLoadingBar: 0xff0000ff,
  },
  fonts: {
    mdlProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.MdlProcessingScreenProgressLabelText, 0xff00ff00)
    .SetColor(CustomizationColor.MdlProcessingScreenLoadingBar, 0xff0000ff)
    .SetFont(CustomizationFont.MdlProcessingScreenProgressLabel, Typeface.Serif)
    .Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Purple, RGLCustomizationColor.MDLProcessingScreenProgressLabelText);
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.MDLProcessingScreenLoadingBar);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(16), MDLProcessingScreenProgressLabel);
});

Enable NFC Screen

To retrieve the mDL data from a mobile device via NFC, the corresponding module needs to be enabled. On iOS this step is performed automatically, while on Android the manual user action may be required. In this case, the corresponding screen is displayed. You can adjust:

  • Text color
  • Text font
  • Button (color, text color, text font)

Enable NFC Screen customization for mDL processing

For example:

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.MDL_ENABLE_NFC_TITLE_TEXT, Color.RED)
    .setColor(CustomizationColor.MDL_ENABLE_NFC_DESCRIPTION_TEXT, Color.BLUE)
    .setColor(CustomizationColor.MDL_ENABLE_NFC_BUTTON_TEXT, Color.YELLOW)
    .setColor(CustomizationColor.MDL_ENABLE_NFC_BUTTON_BACKGROUND, Color.BLACK)
    .setFont(CustomizationFont.MDL_ENABLE_NFC_TITLE_TEXT, Typeface.MONOSPACE)
    .setFont(CustomizationFont.MDL_ENABLE_NFC_DESCRIPTION_TEXT, Typeface.SERIF)
    .setFont(CustomizationFont.MDL_ENABLE_NFC_BUTTON_TEXT, Typeface.ITALIC)
    .apply()

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.MDL_ENABLE_NFC_TITLE_TEXT, Color.RED)
    .setColor(CustomizationColor.MDL_ENABLE_NFC_DESCRIPTION_TEXT, Color.BLUE)
    .setColor(CustomizationColor.MDL_ENABLE_NFC_BUTTON_TEXT, Color.YELLOW)
    .setColor(CustomizationColor.MDL_ENABLE_NFC_BUTTON_BACKGROUND, Color.BLACK)
    .setFont(CustomizationFont.MDL_ENABLE_NFC_TITLE_TEXT, Typeface.MONOSPACE)
    .setFont(CustomizationFont.MDL_ENABLE_NFC_DESCRIPTION_TEXT, Typeface.SERIF)
    .setFont(CustomizationFont.MDL_ENABLE_NFC_BUTTON_TEXT, Typeface.ITALIC)
    .apply(); 

DocumentReader.instance.customization.colors.mdlEnableNfcTitleText = Colors.red;
DocumentReader.instance.customization.colors.mdlEnableNfcDescriptionText = Colors.green;
DocumentReader.instance.customization.colors.mdlEnableNfcButtonText = Colors.blue;
DocumentReader.instance.customization.colors.mdlEnableNfcButtonBackground = Colors.black;
DocumentReader.instance.customization.fonts.mdlEnableNfcTitleText = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD,
  size: 14,
);
DocumentReader.instance.customization.fonts.mdlEnableNfcDescriptionText = Font(
  "sans-serif-thin",
  style: FontStyle.ITALIC,
  size: 15,
);
DocumentReader.instance.customization.fonts.mdlEnableNfcButtonText = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 16,
);

DocumentReader.instance.customization.colors.mdlEnableNfcTitleText = 0xffff0000
DocumentReader.instance.customization.colors.mdlEnableNfcDescriptionText = 0xff00ff00
DocumentReader.instance.customization.colors.mdlEnableNfcButtonText = 0xff0000ff
DocumentReader.instance.customization.colors.mdlEnableNfcButtonBackground = 0xff000000
DocumentReader.instance.customization.fonts.mdlEnableNfcTitleText = {
  name: "sans-serif-thin",
  style: FontStyle.BOLD,
  size: 14,
}
DocumentReader.instance.customization.fonts.mdlEnableNfcDescriptionText = {
  name: "sans-serif-thin",
  style: FontStyle.ITALIC,
  size: 15,
}
DocumentReader.instance.customization.fonts.mdlEnableNfcButtonText = {
  name: "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 16,
}

DocumentReader.setCustomization({
  colors: {
    mdlEnableNfcTitleText: 0xffff0000,
    mdlEnableNfcDescriptionText: 0xff00ff00,
    mdlEnableNfcButtonText: 0xff0000ff,
    mdlEnableNfcButtonBackground: 0xff000000,
  },
  fonts: {
    mdlEnableNfcTitleText: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD,
      size: 14,
    },
    mdlEnableNfcDescriptionText: {
      name: "sans-serif-thin",
      style: FontStyle.ITALIC,
      size: 15,
    },
    mdlEnableNfcButtonText: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    },
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    mdlEnableNfcTitleText: 0xffff0000,
    mdlEnableNfcDescriptionText: 0xff00ff00,
    mdlEnableNfcButtonText: 0xff0000ff,
    mdlEnableNfcButtonBackground: 0xff000000,
  },
  fonts: {
    mdlEnableNfcTitleText: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD,
      size: 14,
    },
    mdlEnableNfcDescriptionText: {
      name: "sans-serif-thin",
      style: FontStyle.ITALIC,
      size: 15,
    },
    mdlEnableNfcButtonText: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    },
  }
})

DocumentReader.setCustomization({
  colors: {
    mdlEnableNfcTitleText: 0xffff0000,
    mdlEnableNfcDescriptionText: 0xff00ff00,
    mdlEnableNfcButtonText: 0xff0000ff,
    mdlEnableNfcButtonBackground: 0xff000000,
  },
  fonts: {
    mdlEnableNfcTitleText: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD,
      size: 14,
    },
    mdlEnableNfcDescriptionText: {
      name: "sans-serif-thin",
      style: FontStyle.ITALIC,
      size: 15,
    },
    mdlEnableNfcButtonText: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    },
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.MdlEnableNfcTitleText, 0xffff0000)
    .SetColor(CustomizationColor.MdlEnableNfcDescriptionText, 0xff00ff00)
    .SetColor(CustomizationColor.MdlEnableNfcButtonText, 0xff0000ff)
    .SetColor(CustomizationColor.MdlEnableNfcButtonBackground, 0xff000000)
    .SetFont(CustomizationFont.MdlEnableNfcTitleText, Typeface.Monospace)
    .SetFont(CustomizationFont.MdlEnableNfcDescriptionText, Typeface.Serif)
    .SetFont(CustomizationFont.MdlEnableNfcButtonText, Typeface.Italic)
    .Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Red, RGLCustomizationColor.MDLEnableNfcTitleText);
    builder.SetColor(UIColor.Green, RGLCustomizationColor.MDLEnableNfcDescriptionText);
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.MDLEnableNfcButtonText);
    builder.SetColor(UIColor.Black, RGLCustomizationColor.MDLEnableNfcButtonBackground);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(14), MDLEnableNfcTitleText);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(15), MDLEnableNfcDescriptionText);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(16), MDLEnableNfcButtonText);
});

Next Steps