Sumsub Developer Hub

# Customization

# Support Items

Support items define the ways in which your users will be prompted to contact you on the Support screen. By default, the SDK uses the following item:

private val DEFAULT_SUPPORT_ITEM = SNSSupportItem(
    "Support Email Title", // item title
    "Support Email Description", // item subtitle
    SNSSupportItem.Type.Email, // item type
    "[email protected]", // your support email from the dashboard
    null, // or provide your custom drawable
    SNSIconHandler.SNSCommonIcons.MAIL.imageName // resolve drawable using icon handler
)

SNSSupportItem defaultItem = new SNSSupportItem(
    "Support Email Title",
    "Support Email Description",
    SNSSupportItem.Type.Email,
    "[email protected]",
    null,
    SNSIconHandler.SNSCommonIcons.MAIL.getImageName(),
    null
);

if you want to change the support items you should create a new list:

val snsSdkBuilder = SNSMobileSDK.Builder(this, apiUrl).withSupportItems(listOf(DEFAULT_SUPPORT_ITEM))

SNSMobileSDK.Builder builder = new SNSMobileSDK.Builder(this)
  .withSupportItems(Collections.singletonList(defaultItem));

Each item must have a mandatory title, icon, subtitle, type and value. onClick listener is optional. By default, the SDK handles clicks if a support item were an email or a url, but if you want to change this behavior you can implement your own onClick listener and handle it by yourself. For example:

val supportItems = listOf(SNSSupportItem(
    "Google item title",
    "Google item description",
    SNSSupportItem.Type.Email,
    "[email protected]",
    null,
    SNSIconHandler.SNSCommonIcons.MAIL.imageName,
    onClick = { item ->
        // to do something
    })
)

val snsSdkBuilder = SNSMobileSDK.Builder(this, apiUrl).withSupportItems(supportItems)

SNSSupportItem defaultItem = new SNSSupportItem(
    "Support Email Title",
    "Support Email Description",
    SNSSupportItem.Type.Email,
    "[email protected]",
    null,
    SNSIconHandler.SNSCommonIcons.MAIL.getImageName(),
    snsSupportItem -> {
        return null;
    }
);

The support item can be one of three types:

enum class Type {
  Url,
  Email,
  Custom
}

If, for some reason, you wish to use Type.Custom, please make sure that you have implemented the onClick listener.

# Theme

The SDK uses a material components theme for widgets. There is a new SumSub SDK builder method - .withTheme().

You need to provide the following attributes:

  • Color attributes:

    • colorPrimary: A primary color for the app, often used for the app bar and other prominent UI elements.
    • colorPrimaryVariant: A variant of the primary color, used to provide visual contrast.
    • colorSecondary: A secondary color for the app, often used for buttons and other interactive UI elements.
    • colorSurface: The background color for surfaces, such as cards and sheets.
    • colorError: The color used to indicate error states.
    • colorOnPrimary: The color used for text and other content placed on top of the primary color.
    • colorOnSecondary: The color used for text and other content placed on top of the secondary color.
    • colorOnBackground: The color used for text and other content placed on top of the background color.
    • colorOnSurface: The color used for text and other content placed on top of the surface color.
    • colorOnError: The color used for text and other content placed on top of the error color.
    • colorControlNormal: The default color used for UI controls, such as checkboxes and radio buttons.

  • Text appearance attributes:

    • textAppearanceHeadline1: A text appearance for large headlines.
    • textAppearanceHeadline2: A text appearance for headlines.
    • textAppearanceHeadline3: A text appearance for small headlines.
    • textAppearanceHeadline4: A text appearance for smaller headlines.
    • textAppearanceHeadline5: A text appearance for smallest headlines.
    • textAppearanceHeadline6: A text appearance for tiny headlines.
    • textAppearanceSubtitle1: A text appearance for subtitles.
    • textAppearanceSubtitle2: A text appearance for smaller subtitles.
    • textAppearanceBody1: A text appearance for body text.
    • textAppearanceBody2: A text appearance for smaller body text.
    • textAppearanceButton: A text appearance for buttons.
    • textAppearanceCaption: A text appearance for captions.
    • textAppearanceOverline: A text appearance for overline text.

  • Shape appearance attributes:

    • shapeAppearanceSmallComponent: The shape appearance for small components.
    • shapeAppearanceMediumComponent: The shape appearance for medium-sized components.
    • shapeAppearanceLargeComponent: The shape appearance for large components.

# Additional color attributes

The following theme attributes used by SumSub to specify applicant or document states:

  • sns_colorInit: background color for the INIT state
  • sns_colorPending: background color for the PENDING state
  • sns_colorSuccess: background color for the SUCCESS state
  • sns_colorRejected: background color for the REJECTED state
  • sns_colorProcessing: background color for the PROCESSING state
  • sns_colorOnInit: text (or icon tint) color for the INIT state
  • sns_colorOnPending: text (or icon tint) color for the PENDING state
  • sns_colorOnSuccess: text (or icon tint) color for the SUCCESS state
  • sns_colorOnRejected: text (or icon tint) color for the REJECTED state
  • sns_colorOnProcessing: text (or icon tint) color for the PROCESSING state

By default, SumSub's SDK uses the following theme:

<style name="Base.Theme.SNSCore" parent="Base.Theme.MaterialThemeBuilder">
  <item name="colorPrimary">@color/sns_color_primary_50</item>
  <item name="colorPrimaryVariant">@color/sns_color_primary_60</item>
  <item name="colorSecondary">@color/sns_color_primary_50</item>
  <item name="colorSecondaryVariant">@color/sns_color_primary_60</item>

  <item name="android:colorBackground">@color/sns_color_white_100</item>
  <item name="colorSurface">@color/sns_color_neutral_5</item>
  <item name="colorError">@color/sns_color_critical_50</item>

  <item name="colorOnPrimary">@color/sns_color_white_100</item>
  <item name="colorOnSecondary">@color/sns_color_white_100</item>
  <item name="colorOnBackground">@color/sns_color_neutral_80</item>
  <item name="colorOnSurface">@color/sns_color_neutral_80</item>
  <item name="colorOnError">@color/sns_color_critical_50</item>
  <item name="android:textColorPrimary">@color/sns_color_neutral_80</item>
  <item name="android:textColorSecondary">@color/sns_color_neutral_60</item>
  <item name="sns_colorInit">@color/sns_color_neutral_5</item>
  <item name="sns_colorPending">@color/sns_color_warning_10</item>
  <item name="sns_colorSuccess">@color/sns_color_success_10</item>
  <item name="sns_colorRejected">@color/sns_color_critical_10</item>
  <item name="sns_colorProcessing">@color/sns_color_primary_5</item>
  <item name="sns_colorOnInit">@color/sns_color_neutral_40</item>
  <item name="sns_colorOnPending">@color/sns_color_warning_50</item>
  <item name="sns_colorOnSuccess">@color/sns_color_success_50</item>
  <item name="sns_colorOnRejected">@color/sns_color_critical_50</item>
  <item name="sns_colorOnProcessing">@color/sns_color_primary_50</item>
  <item name="colorControlNormal">@color/sns_color_neutral_40</item>

  <item name="textAppearanceHeadline1">@style/TextAppearance.SNSCore.Headline1</item>
  <item name="textAppearanceHeadline2">@style/TextAppearance.SNSCore.Headline2</item>
  <item name="textAppearanceHeadline3">@style/TextAppearance.SNSCore.Headline3</item>
  <item name="textAppearanceHeadline4">@style/TextAppearance.SNSCore.Headline4</item>
  <item name="textAppearanceHeadline5">@style/TextAppearance.SNSCore.Headline5</item>
  <item name="textAppearanceHeadline6">@style/TextAppearance.SNSCore.Headline6</item>
  <item name="textAppearanceSubtitle1">@style/TextAppearance.SNSCore.Subtitle1</item>
  <item name="textAppearanceSubtitle2">@style/TextAppearance.SNSCore.Subtitle2</item>
  <item name="textAppearanceBody1">@style/TextAppearance.SNSCore.Body1</item>
  <item name="textAppearanceBody2">@style/TextAppearance.SNSCore.Body2</item>
  <item name="textAppearanceButton">@style/TextAppearance.SNSCore.Button</item>
  <item name="textAppearanceCaption">@style/TextAppearance.SNSCore.Caption</item>
  <item name="textAppearanceOverline">@style/TextAppearance.SNSCore.Overline</item>
  <item name="android:textAppearance">@style/TextAppearance.SNSCore.Body1</item>

  <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.SNSCore.SmallComponent</item>
  <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.SNSCore.MediumComponent</item>
  <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.SNSCore.LargeComponent</item>

  <item name="editTextStyle">@style/Widget.SNSTextEdit</item>
  <item name="android:listDivider">@drawable/sns_list_divider</item>

  <item name="materialButtonStyle">@style/Widget.SNSButton</item>
  <item name="materialButtonOutlinedStyle">@style/Widget.SNSButton.Outlined</item>
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.SNSCore.BottomSheetDialog</item>
</style>

If your are using SumSub SDK 1.17 or earlier, please use the following customization guide.

Last Updated: 5/30/2023, 11:35:06 AM