The SDK can be customized: you can change styles, colors, typefaces, and so on.

Support items

Support items define the ways in which your applicants 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. The 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
}

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

Use Sumsub SDK theme API

Starting from SDK version 1.26 it is possible to use the Android 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

Attribute	Description
`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

Attribute	Description
`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

Attribute	Description
`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.

Attribute	Description
`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>