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

All the Theme options are named to express their semantic and used in many different places across the Android SDK, so be aware that changing them could affect many elements at once. Please use Visual Guide to determine.

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

# 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

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 #041D2F 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 #F3F4F7 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

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.

# primaryButtonBackgroundDisabled

theme.colors.primaryButtonBackgroundDisabled: SNSThemeColor

The primary button background color in the disabled state.

# 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.

# primaryButtonContentDisabled

theme.colors.primaryButtonContentDisabled: SNSThemeColor

The primary button foreground color in the disabled state.

# 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.

# 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.

# secondaryButtonContentDisabled

theme.colors.secondaryButtonContentDisabled: SNSThemeColor

The secondary button foreground color in the disabled state.

# 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.

# fieldBackgroundInvalid

theme.colors.fieldBackgroundInvalid: SNSThemeColor

The background color of the input fields marked as invalid. Used for text fields, checkbox groups, attachments, and other elements that require validation. 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.

# fieldContent

theme.colors.fieldContent: SNSThemeColor

The content color of the input fields. Used for text fields.

# fieldTint

theme.colors.fieldTint: SNSThemeColor

The tint color of the input fields. Used as an accent color 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.

# listSelectedItemBackground

theme.colors.listSelectedItemBackground: SNSThemeColor

The ripple color of the selected list item.

# 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")
}

# 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

Last Updated: 8/24/2023, 12:25:39 PM