RFID Chip Processing Customization

On this page, explore the customization capabilities available for the RFID chip processing.

The following elements are customizable:

Ready to Scan Screen
Background
Hint Messages
Progress Bar
Error Screen

Ready to Scan Screen

When the application is ready to scan the RFID chip, the corresponding screen is displayed.

In iOS, this screen is complemented by the native modal sheet with the info message and controls. This sheet cannot be hidden or customized as Apple doesn't provide such functionality.

In Android, there is no such a modal sheet.

Background

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

For example:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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

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

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

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

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

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

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

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

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

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

Hint Messages

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

Text color
Text font
Background color

For example:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration { 
    $0.setColor(.purple, forItem: .RFIDProcessingScreenHintLabelText)
    $0.setColor(.blue, forItem: .RFIDProcessingScreenHintLabelBackground)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RFIDProcessingScreenHintLabel)
}

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

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_TEXT, R.color.colorPrimary)
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_BACKGROUND, R.color.colorAccent)
    .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_HINT_LABEL, typeface)
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_TEXT, R.color.colorPrimary)
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_BACKGROUND, R.color.colorAccent)
        .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_HINT_LABEL, typeface)
        .apply();

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

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

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

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

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.RfidProcessingScreenHintLabelText, 0xff00ff00)
    .SetColor(CustomizationColor.RfidProcessingScreenHintLabelBackground, 0xff0000ff)
    .SetFont(CustomizationFont.RfidProcessingScreenHintLabel, Typeface.Serif)
    .Apply();

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

Progress Bar

When the processing begins, a progress bar and a message above it appear. You can customize the following elements:

Text color
Text font
Progress color
Background color

For example:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.purple, forItem: .RFIDProcessingScreenProgressLabelText)
    $0.setColor(.blue, forItem: .RFIDProcessingScreenProgressBar)
    $0.setColor(.yellow, forItem: .RFIDProcessingScreenProgressBarBackground)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RFIDProcessingScreenProgressLabel)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor purpleColor] forItem:RFIDProcessingScreenProgressLabelText];
    [builder setColor:[UIColor blueColor] forItem:RFIDProcessingScreenProgressBar];
    [builder setColor:[UIColor yellowColor] forItem:RFIDProcessingScreenProgressBarBackground];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RFIDProcessingScreenProgressLabel];
}];

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_LABEL_TEXT, R.color.colorPrimary)
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR, R.color.colorAccent)
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR_BACKGROUND, R.color.orange)
    .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_PROGRESS_LABEL, typeface)
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_LABEL_TEXT, R.color.colorPrimary)
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR, R.color.colorAccent)
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR_BACKGROUND, R.color.orange)
        .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_PROGRESS_LABEL, typeface)
        .apply();

DocumentReader.instance.customization.colors.rfidProcessingScreenProgressLabelText = Colors.purple;
DocumentReader.instance.customization.colors.rfidProcessingScreenProgressBar = Colors.blue;
DocumentReader.instance.customization.colors.rfidProcessingScreenProgressBarBackground = Colors.yellow;
DocumentReader.instance.customization.fonts.rfidProcessingScreenProgressLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
);

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenProgressLabelText: 0xffff0000,
    rfidProcessingScreenProgressBar: 0xff00ff00,
    rfidProcessingScreenProgressBarBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenProgressLabelText: 0xffff0000,
    rfidProcessingScreenProgressBar: 0xff00ff00,
    rfidProcessingScreenProgressBarBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
})

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenProgressLabelText: 0xffff0000,
    rfidProcessingScreenProgressBar: 0xff00ff00,
    rfidProcessingScreenProgressBarBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.RfidProcessingScreenProgressLabelText, 0xffff0000)
    .SetColor(CustomizationColor.RfidProcessingScreenProgressBar, 0xff00ff00)
    .SetColor(CustomizationColor.RfidProcessingScreenProgressBarBackground, 0xff0000ff)
    .SetFont(CustomizationFont.RfidProcessingScreenProgressLabel, Typeface.Serif)
    .Apply();

// iOS
    RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
    {
        builder.SetColor(UIColor.Purple, RGLCustomizationColor.ProgressLabelText);
        builder.SetColor(UIColor.Blue, RGLCustomizationColor.ProgressBar);
        builder.SetColor(UIColor.Yellow, RGLCustomizationColor.ProgressBarBackground);
        builder.SetFont(UIFont.ItalicSystemFontOfSize(16), RGLCustomizationFont.ProgressLabel);
    });

Error Screen

On the error screen, you can adjust:

Text color
Text font
Image

For example:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration { 
    $0.setColor(.blue, forItem: .RFIDProcessingScreenResultLabelText)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RFIDProcessingScreenResultLabel)
    $0.setImage(UIImage(named: "custom_image_rfid_failure")!, forItem: .RFIDProcessingScreenFailureImage)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor blueColor] forItem:RFIDProcessingScreenResultLabelText];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RFIDProcessingScreenResultLabel];
    [builder setImage:[UIImage imageNamed:@"custom_image_rfid_failure"] forItem:RFIDProcessingScreenFailureImage];
}];

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_RESULT_LABEL_TEXT, R.color.colorPrimary)
    .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_RESULT_LABEL, typeface)
    .setImage(CustomizationImage.RFID_PROCESSING_SCREEN_FAILURE_IMAGE, getDrawable(R.drawable.image))
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_RESULT_LABEL_TEXT, R.color.colorPrimary)
        .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_RESULT_LABEL, typeface)
        .setImage(CustomizationImage.RFID_PROCESSING_SCREEN_FAILURE_IMAGE, getResources().getDrawable(R.drawable.image))
        .apply();

DocumentReader.instance.customization.colors.rfidProcessingScreenResultLabelText = Colors.blue;
DocumentReader.instance.customization.fonts.rfidProcessingScreenResultLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 16,
);
DocumentReader.instance.customization.images.rfidProcessingScreenFailureImage = await rootBundle.load("custom_image_rfid_failure");

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenResultLabelText: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenResultLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    }
  },
  images: {
    rfidProcessingScreenFailureImage: "base64Image"
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenResultLabelText: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenResultLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    }
  }
  images: {
    rfidProcessingScreenFailureImage: "base64Image"
  }
})

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenResultLabelText: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenResultLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    }
  },
  images: {
    rfidProcessingScreenFailureImage: "base64Image"
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.RfidProcessingScreenResultLabelText, 0xff0000ff)
    .SetFont(CustomizationFont.RfidProcessingScreenResultLabel, Typeface.Serif)
    .SetImage(CustomizationImage.RfidProcessingScreenFailureImage, Platform.AppContext.Resources.GetDrawable(Resource.Drawable.image))
    .Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.ResultLabelText);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(16), RGLCustomizationFont.ResultLabel);
    builder.SetImage(UIImage.FromFile("custom_image_rfid_failure.png"), RGLCustomizationImage.RFIDProcessingScreenFailureImage);
});

Examples

See the sample projects, demonstraring how to customize the RFID chip processing:

iOS
Android

RFID Chip Processing Customization

Ready to Scan Screen

Background

Hint Messages

Progress Bar

Error Screen

Examples

Next Steps