Theme API for Android

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);

Theme options are named to express their semantic and used in many different places across the Android SDK, so be aware that changing them may affect many elements at once.

For the convenience the options are split into the corresponding sections:

• Fonts
• Colors
• Metrics

Fonts

data class SNSThemeFont(
  val typeface: Typeface,
  val sizeSp: Int
)

headline1

theme.fonts.headline1: SNSThemeFont

Used for screen titles in conjunction with colors.contentStrong mostly.

headline2

theme.fonts.headline2: SNSThemeFont

Used for section titles in conjunction with colors.contentStrong mostly.

subtitle1

theme.fonts.subtitle1: SNSThemeFont

Used for subtitles in conjunction with colors.contentStrong mostly.

subtitle2

theme.fonts.subtitle2: SNSThemeFont

Used for subtitles in conjunction with colors.contentNeutral mostly.

body

theme.fonts.body: SNSThemeFont

Used for paragraphs, text fields, etc. in conjunction with colors.contentNeutral mostly.

caption

theme.fonts.caption: SNSThemeFont

Used for minor captions in conjunction with colors.contentWeak mostly.

Colors

data class SNSThemeFont(
  val typeface: Typeface,
  val sizeSp: Int
)

Common

navigationBarItem

theme.colors.navigationBarItem: SNSThemeColor

Navigation bar items tinting color. Used for the close button only at the moment.
Default is ● #94A0B8 and ● #FFFFFF with alpha 40% for the dark appearance.

alertTint

theme.colors.alertTint: SNSThemeColor

Used for the system alert actions and the toolbar buttons.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

Backgrounds

backgroundCommon

theme.colors.backgroundCommon: SNSThemeColor

Used for almost all the screens as the background color (the exception is the Camera Screen, see cameraBackground).
Default is ● #FFFFFF and ● #1E232E for the dark appearance.

backgroundNeutral

theme.colors.backgroundNeutral: SNSThemeColor

Used as a background state color for the verification steps and as a main background color for the DEFAULT-style cards.
Default is ● #F6F7F9 and ● #FFFFFF with alpha 7% for the dark appearance.

backgroundSuccess

theme.colors.backgroundSuccess: SNSThemeColor

Used as a background state color for the verification steps.
Default is ● #18B494 with alpha 12% and ● #18B494 with alpha 30% for the dark appearance.

backgroundWarning

theme.colors.backgroundWarning: SNSThemeColor

Used as a background state color for the verification steps.
Default is ● #F2AA0D with alpha 13% and ● #F2AA0D with alpha 30% for the dark appearance.

backgroundCritical

theme.colors.backgroundCritical: SNSThemeColor

Used as a background state color for the verification steps.
Default is ● #F05C5C with alpha 12% and ● #F05C5C with alpha 30% for the dark appearance.

Content

contentLink

theme.colors.contentLink: SNSThemeColor

Used for the text links.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

contentStrong

theme.colors.contentStrong: SNSThemeColor

Used as a foreground color for the headlines and some subtitles.
Default is ● #333C4D and ● #FFFFFF with alpha 85% for the dark appearance.

contentNeutral

theme.colors.contentNeutral: SNSThemeColor

Used as a foreground color for the text body, some subtitles and the accessory elements.
Default is ● #5C6B8A and ● #FFFFFF with alpha 60% for the dark appearance.

contentWeak

theme.colors.contentWeak: SNSThemeColor

Used as a foreground color for the minor captions and the light accessory elements.
Default is ● #94A0B8 and ● #FFFFFF with alpha 40% for the dark appearance.

contentInfo

theme.colors.contentInfo: SNSThemeColor

Used for the Video Screen's viewport border only at the moment.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

contentSuccess

theme.colors.contentSuccess: SNSThemeColor

Used as a foreground state color for the verification steps.
Default is ● #18B494.

contentWarning

theme.colors.contentWarning: SNSThemeColor

Used as a foreground state color for the verification steps.
Default is ● #E6A00B.

contentCritical

theme.colors.contentCritical: SNSThemeColor

Used as a foreground state color for the verification steps.
Default is ● #F05C5C.

Primary Button

primaryButtonBackground

theme.colors.primaryButtonBackground: SNSThemeColor

The primary button background color in the normal state.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

primaryButtonBackgroundHighlighted

theme.colors.primaryButtonBackgroundHighlighted: SNSThemeColor

The primary button background color in the highlighted state.
Default is ● #1485D1 and ● #0B4A75 for the dark appearance.

primaryButtonBackgroundDisabled

theme.colors.primaryButtonBackgroundDisabled: SNSThemeColor

The primary button background color in the disabled state.
Default is ● #A1D2F7 and ● #072F4B for the dark appearance.

primaryButtonContent

theme.colors.primaryButtonContent: SNSThemeColor

The primary button foreground color in the normal state.
Default is ● #FFFFFF and ● #FFFFFF with alpha 85% for the dark appearance.

primaryButtonContentHighlighted

theme.colors.primaryButtonContentHighlighted: SNSThemeColor

The primary button foreground color in the highlighted state.
Default is ● #FFFFFF and ● #FFFFFF with alpha 85% for the dark appearance.

primaryButtonContentDisabled

theme.colors.primaryButtonContentDisabled: SNSThemeColor

The primary button foreground color in the disabled state.
Default is ● #FFFFFF and ● #0B4A75 for the dark appearance.

Secondary Button

secondaryButtonBackground

theme.colors.secondaryButtonBackground: SNSThemeColor

The secondary button background color in the normal state.
Default is the transparent color.

secondaryButtonBackgroundHighlighted

theme.colors.secondaryButtonBackgroundHighlighted: SNSThemeColor

The secondary button background color in the highlighted state.
Default is ● #E8F4FD and ● #072F4B for the dark appearance.

secondaryButtonBackgroundDisabled

theme.colors.secondaryButtonBackgroundDisabled: SNSThemeColor

The secondary button background color in the disabled state.
Default is the transparent color.

secondaryButtonContent

theme.colors.secondaryButtonContent: SNSThemeColor

The secondary button foreground color in the normal state.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

secondaryButtonContentHighlighted

theme.colors.secondaryButtonContentHighlighted: SNSThemeColor

The secondary button foreground color in the highlighted state.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

secondaryButtonContentDisabled

theme.colors.secondaryButtonContentDisabled: SNSThemeColor

The secondary button foreground color in the disabled state.
Default is ● #A1D2F7 and ● #0B4A75 for the dark appearance.

Card

cardPlainBackground

theme.colors.cardPlainBackground: SNSThemeColor

Used as a background color for the cards with PLAIN card style.
Default is the transparent color.

cardBorderedBackground

theme.colors.cardBorderedBackground: SNSThemeColor

Used as a background color for the cards with BORDERED card style.
Default is the transparent color.

Camera

cameraBackground

theme.colors.cameraBackground: SNSThemeColor

The Camera Screen background color.
Default is ● #1E232E.

cameraContent

theme.colors.cameraContent: SNSThemeColor

Used as a tint color for the elements placed on the Camera Screen such as the gallery button, the touch button, etc.
Default is ● #FFFFFF.

Fields

fieldBackground

theme.colors.fieldBackground: SNSThemeColor

The background color of the input fields. Used for text fields.
Default is ● #F6F7F9 and ● #FFFFFF with alpha 7% for the dark appearance.

fieldBackgroundInvalid

theme.colors.fieldBackgroundInvalid: SNSThemeColor

The background color of the input fields marked as invalid. Used for text fields.
Default is the colors.backgroundCritical color.

fieldBorder

theme.colors.fieldBorder: SNSThemeColor

The border color of the input fields. Used for text fields.
Default is the transparent color.

fieldPlaceholder

theme.colors.fieldPlaceholder: SNSThemeColor

The placeholder color of the input fields. Used for text fields.
Default is ● #94A0B8 and ● #FFFFFF with alpha 40% for the dark appearance.

fieldContent

theme.colors.fieldContent: SNSThemeColor

The content color of the input fields. Used for text fields.
Default is ● #333C4D and ● #FFFFFF with alpha 85% for the dark appearance.

fieldTint

theme.colors.fieldTint: SNSThemeColor

The tint color of the input fields. Used for text fields, checkboxes and radio buttons.
Default is ● #1693E9 and ● #1485D1 for the dark appearance.

List

listSeparator

theme.colors.listSeparator: SNSThemeColor

The list separator color.
Default is ● #D1D6E1 and ● #FFFFFF with alpha 20% for the dark appearance.

listSelectedItemBackground

theme.colors.listSelectedItemBackground: SNSThemeColor

The background color of the selected list item.
Default is ● #F6F7F9 and ● #FFFFFF with alpha 7% for the dark appearance.

Bottom Sheet

bottomSheetHandle

theme.colors.bottomSheetHandle: SNSThemeColor

The foreground color of the bottom sheet handle.

Note that the handle can be both inside (on bottomSheetBackground color) and outside (on the backgroundCommon color) of the bottom sheet.
Default is ● #D1D6E1 and ● #FFFFFF with alpha 20% for the dark appearance.

bottomSheetBackground

theme.colors.bottomSheetBackground: SNSThemeColor

The background color of the bottom sheet.
Default is ● #FFFFFF and ● #333C4D for the dark appearance.

Metrics

Common

activityIndicatorStyle

theme.metrics.activityIndicatorStyle: SNSThemeMetric.Size

The loading spinner style. Default is MEDIUM.

Content

screenHorizontalMargin

theme.metrics.screenHorizontalMargin: Float

The horizontal margins of the screen content. Default is 16dp.

Buttons

buttonHeight

theme.metrics.buttonHeight: Float

The primary and secondary buttons height. Default is 48dp.

buttonCornerRadius

theme.metrics.buttonCornerRadius: Float

The primary and secondary buttons corner radius. Default is 8dp.

buttonBorderWidth

theme.metrics.buttonBorderWidth: Float

The secondary button border width. Bordered primary buttons are not supported at the moment.
Default is 1dp.

Fields

fieldHeight

theme.metrics.fieldHeight: Float

Used for the text input fields. Default is 48dp.

fieldBorderWidth

theme.metrics.fieldBorderWidth: Float

The text input fields border width. Default is 0dp.

fieldCornerRadius

theme.metrics.fieldCornerRadius: Float

The text input fields corner radius. Default is 8dp.

Viewport

viewportBorderWidth

theme.metrics.viewportBorderWidth: Float

The selfie viewport border width. Default is 8dp.

Bottom Sheet

bottomSheetCornerRadius

theme.metrics.bottomSheetCornerRadius: Float

The bottom sheet corners radius. Default is 16dp.

bottomSheetHandleSize

theme.metrics.bottomSheetHandleSize: SizeF

The bottom sheet handle size. Default is 36dp x 4dp.

List separator

listSeparatorHeight

theme.metrics.listSeparatorHeight: Float

The list separator thickness. Default is 1dp.

listSeparatorMarginLeft

theme.metrics.listSeparatorMarginLeft: Float

The list separator left margin. Default is 0dp.

listSeparatorMarginRight

theme.metrics.listSeparatorMarginRight: Float

The list separator right margin. Default is 0dp.

Card Style

enum class CardStyle(val value: String) : SNSThemeMetric {
    BORDERED("bordered"),
    PLAIN("plain"),
    DEFAULT("default")
}

• With BORDERED style a border will be rendered around the card (see also colors.cardBorderedBackground).
• With PLAIN style neither border nor background will be rendered by default (see colors.cardPlainBackground).
• With DEFAULT style the default background will be used.

verificationStepCardStyle

theme.metrics.verificationStepCardStyle: SNSThemeMetric.CardStyle

The verification steps card style.
Default is DEFAULT.

verificationCommentCardStyle

theme.metrics.verificationCommentCardStyle: SNSThemeMetric.CardStyle

The style of a verification comment block that can be displayed when the applicant is temporarily declined.
Default is BORDERED.

supportItemCardStyle

theme.metrics.supportItemCardStyle: SNSThemeMetric.CardStyle

The support items card style.
Default is BORDERED.

documentTypeCardStyle

theme.metrics.documentTypeCardStyle: SNSThemeMetric.CardStyle

The document types card style.
Default is DEFAULT.

selectedCountryCardStyle

theme.metrics.selectedCountryCardStyle: SNSThemeMetric.CardStyle

The selected country card style.
Default is DEFAULT.

cardCornerRadius

theme.metrics.cardCornerRadius: Float

The cards' corners radius.
Default is 8dp.

cardBorderWidth

theme.metrics.cardBorderWidth: Float

The cards' border width. Used for the cards with the BORDERED card style only.
Default is 1dp.

Alignment

enum class TextAlignment(val value: String) : SNSThemeMetric {
    LEFT("left"),
    CENTER("center"),
    RIGHT("right")
}

screenHeaderAlignment

theme.metrics.screenHeaderAlignment: SNSThemeMetric.TextAlignment

The alignment for the screen headers. Default is CENTER

sectionHeaderAlignment

theme.metrics.sectionHeaderAlignment: SNSThemeMetric.TextAlignment

The alignment for the section headers. Default is LEFT