# 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

# Using Sumsub SDK Theme API

Starting from SDK version 1.26 it is possible to use the SDK Theme API.

// create a theme using builder SNSTheme
val customTheme = SNSTheme {
    // customize theme parameters
    colors.backgroundCommon = SNSThemeColor(resources.getColor(R.color.owl_yellow_200))
    fonts.headline1 = SNSThemeFont(Typeface.MONOSPACE, 40)
    metrics.activityIndicatorStyle = SNSThemeMetric.Size.LARGE
    // ... other parameters

    // or like so
    colors {
        backgroundNeutral = SNSThemeColor(Color.RED)
        // ... other parameters
    }
    fonts {
        headline1 = SNSThemeFont(Typeface.MONOSPACE, 40)
        subtitle2 = SNSThemeFont(Typeface.MONOSPACE, 10)
        // ... other parameters here
    }
    metrics {
        screenHorizontalMargin = resources.getDimension(R.dimen.sns_margin_large)
        screenHeaderAlignment = SNSThemeMetric.TextAlignment.RIGHT
        bottomSheetHandleSize = SizeF(20f, 20f)
        // ... other parameters
    }
}

// provide the theme to the SDK builder
val snsSdkBuilder = SNSMobileSDK.Builder(this, apiUrl).withTheme(customTheme)
// create a theme using SNSThemeKt.newSNSTheme() method
SNSThemeHolder theme = SNSThemeKt.newSNSTheme();

// get parameter scopes
ColorsScope colorsScope = theme.getColorsScope();
MetricsScope metricsScope = theme.getMetricsScope();
FontsScope fontsScope = theme.getFontsScope();

// customize theme parameters
colorsScope.setBackgroundCommon(new SNSThemeColor(Color.RED, Color.GREEN));
metricsScope.setSectionHeaderAlignment(SNSThemeMetric.TextAlignment.CENTER);
fontsScope.setHeadline2(new SNSThemeFont(Typeface.SERIF, 15));
// ... other parameters

// provide the theme to the SDK builder
SNSMobileSDK.Builder builder = new SNSMobileSDK.Builder(this).withTheme(theme);

# Using Android theme

The SDK uses a material components theme for widgets. Using the SDK builder's .withTheme() method, provide a theme with 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 you are using Sumsub SDK 1.17 or earlier, please use the following customization guide.

Last Updated: 7/19/2023, 2:32:08 PM