Documentation
API ReferenceChangelogFAQDashboard

Android SDK customization

Customize appearance and support items in the Android SDK to match your preferences.

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 is 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

AttributeDescription
colorPrimaryPrimary color for the app, often used for the app bar and other prominent UI elements.
colorPrimaryVariantVariant of the primary color, used to provide visual contrast.
colorSecondarySecondary color for the app, often used for buttons and other interactive UI elements.
colorSurfaceBackground color for surfaces, such as cards and sheets.
colorErrorColor used to indicate error states.
colorOnPrimaryColor used for text andColor other content placed on top of the primary color.
colorOnSecondaryColor used for text and other content placed on top of the secondary color.
colorOnBackgroundColor used for text and other content placed on top of the background color.
colorOnSurfaceColor used for text and other content placed on top of the surface color.
colorOnErrorColor used for text and other content placed on top of the error color.
colorControlNormalDefault color used for UI controls, such as checkboxes and radio buttons.

Text appearance attributes

AttributeDescription
textAppearanceHeadline1Text appearance for large headlines.
textAppearanceHeadline2Text appearance for headlines.
textAppearanceHeadline3Text appearance for small headlines.
textAppearanceHeadline4Text appearance for smaller headlines.
textAppearanceHeadline5Text appearance for smallest headlines.
textAppearanceHeadline6Text appearance for tiny headlines.
textAppearanceSubtitle1Text appearance for subtitles.
textAppearanceSubtitle2Text appearance for smaller subtitles.
textAppearanceBody1Text appearance for body text.
textAppearanceBody2Text appearance for smaller body text.
textAppearanceButtonText appearance for buttons.
textAppearanceCaptionText appearance for captions.
textAppearanceOverlineText appearance for overline text.

Shape appearance attributes

AttributeDescription
shapeAppearanceSmallComponentShape appearance for small components.
shapeAppearanceMediumComponentShape appearance for medium-sized components.
shapeAppearanceLargeComponentShape appearance for large components.

Additional color attributes

The following theme attributes used by Sumsub to specify applicant or document states.

AttributeDescription
sns_colorInitBackground color for the INIT state.
sns_colorPendingBackground color for the PENDING state.
sns_colorSuccessBackground color for the SUCCESS state.
sns_colorRejectedBackground color for the REJECTED state.
sns_colorProcessingBackground color for the PROCESSING state.
sns_colorOnInitText (or icon tint) color for the INIT state.
sns_colorOnPendingText (or icon tint) color for the PENDING state.
sns_colorOnSuccessText (or icon tint) color for the SUCCESS state.
sns_colorOnRejectedText (or icon tint) color for the REJECTED state.
sns_colorOnProcessingText (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>

Updated 4 days ago