​

Styling

The SDK uses color attributes defined in the ASAPP theme, as well as extra style configuration options set via the style configuration class.

​

Themes

To customize the SDK theme, extend the default ASAPP theme in your styles.xml file:

<style name="ASAPPTheme.Chat">
   <item name="asapp_primary">@color/custom_asapp_primary</item>
</style>

ASAPP recommends starting by only customizing asapp_primary to be your brand’s primary color, and adjusting other colors when necessary for accessibility. asapp_primary is used as the message bubble background in most buttons and other controls. The screenshot below shows the default theme (gray primary - center) and custom primary colors on the left and right.

There are two other colors you may consider customizing for accessibility or to achieve an exact match with your app’s theme: asapp_on_background and asapp_on_primary. asapp_on_background is used by other elements that might appear in front of the background. asapp_on_primary is used for text and other elements that appear in front of the primary color.

​

More Colors

Besides the colors used for themes, you can override specific colors in a number of categories: the toolbar, chat content, messages, and other elements. You can override all properties mentioned below in the ASAPPTheme.Chat style.

The status bar color is asapp_status_bar and toolbar colors are asapp_toolbar (background), asapp_nav_button, asapp_nav_icon, and asapp_nav_text (foreground).

General chat content colors

• asapp_background
• asapp_separator_color
• asapp_control_tint
• asapp_control_secondary
• asapp_control_background
• asapp_success
• asapp_warning
• asapp_failure

Message colors

• asapp_messages_list_background
• asapp_chat_bubble_sent_text
• asapp_chat_bubble_sent_bg
• asapp_chat_bubble_reply_text
• asapp_chat_bubble_reply_bg

​

Text and Buttons

To customize fonts and colors for both text and buttons, use the ASAPPCustomTextStyleHandler. To set this optional handler use ASAPPStyleConfig.setTextStyleHandler. Use the given ASAPPTextStyles

object to:

• Set a new font family with updateFonts. If no new fonts are set, the system default will be used instead.
• Override font sizes, letter spacing, text colors, and text casing styles. You can also customize the font family for each text style individually, if needed.
• Override button colors for normal, highlighted and disabled states.

Example:

ASAPP.instance.getStyleConfig()
   .setTextStyleHandler { context, textStyles ->
       val regular = Typeface.createFromAsset(context.assets, "fonts/NH-Regular.ttf")
       val medium = Typeface.createFromAsset(context.assets, "fonts/Lato-Bold.ttf")
       val black = Typeface.createFromAsset(context.assets, "fonts/Lato-Black.ttf")
       textStyles.updateFonts(regular, medium, black)
       textStyles.body.fontSize = 14f
       val textHighlightColor = ContextCompat.getColor(context, R.color.my_text_hightlight_color)
       textStyles.primaryButton.textHighlighted = textHighlightColor
   }

See ASAPPTextStyles to see all overridable styles.

​

Atomic Customization

To customize the styles at an atomic level, you can use the following method. Customizing at the atomic level will override any default style that is being set on the UI views. Use it only if general styling is not sufficient, and you need further customization. This is optional, and in most cases, you won’t need it. Use with caution.

Example:

ASAPP.instance.getStyleConfig()
    .setAtomicViewStyleHandler { context: Context, viewStyles: ASAPPCustomViewStyles ->
        // Update viewStyles as needed
    }

​

Chat Header

The chat header (toolbar in the chat activity) has no content by default, but you can can add text or icon using ASAPPStyleConfig.

​

Text Title

To add text to the chat header, pass a String resource to setChatActivityTitle. By default, the title will be aligned to start. For example:

ASAPP.instance.getStyleConfig()
    .setChatActivityTitle(R.string.asapp_chat_title)

​

Drawable Title

To add an icon to the chat header use: setChatActivityToolbarLogo. You can also center the header content by calling setIsToolbarTitleOrIconCentered(true). For example:

ASAPP.instance.getStyleConfig
    .setChatActivityToolbarLogo(R.drawable.asapp_chat_icon)
    .setIsToolbarTitleOrIconCentered(true)

​

Dark Mode

Android 10 (API 29) introduced Dark Mode (a.k.a night mode, dark theme), with a system UI toggle that allows users to switch between light and dark modes. ASAPP recommends reading the developer documentation for more information.

The ASAPP SDK theme defines default colors using the system resource “default” and “night” qualifiers, so chat will react to changes to the system night mode setting.

​

Disable or Force a Dark Mode Setting

To disable Dark Mode, or to force Dark Mode for Android API levels below 29, ASAPP recommends using the AppCompatDelegate.setDefaultNightMode AndroidX API. This function changes the night mode setting throughout the entire application session, which also includes ASAPP SDK activities.

For example, it is possible to use Dark Mode on Android API 21 with the following:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)