Skip to main content

Theming

Getting Started with Theming​

The LikeMinds Chat SDK simplifies the process of customizing the appearance of all UI views. The SDK allows you to change the appearance of components such as colors and fonts with the help of dedicated class for theming LMChatAppearance.

With LMChatAppearance, you can adjust various aspects of UI widgets by defining attributes through LMChatAppearanceRequest. LikeMinds Chat uses a top-level configuration to apply theming information throughout your application. You can customize the appearance of all UI widgets provided by the LikeMinds Chat SDK by adjusting properties such as button color, text link color, fonts through the LMChatAppearance class. To implement your custom appearance, create an instance of LMChatAppearanceRequest and pass it when initializing the SDK with LMChatCore.setup().

Detailed Overview of LMChatAppearanceRequest​

The LMChatAppearanceRequest class allows you to create a request to customize various aspects of the LikeMinds Chat SDK's UI using builder pattern. By passing properties in the LMChatAppearanceRequest class, you can control the appearance of all UI widgets to ensure a consistent appearance throughout your application.

  • fonts: Set the fonts for app by providing regular, bold and medium fonts in LMFonts (parameters decsribed below).
VARIABLETYPEDESCRIPTION
regularFontResfont resource for regular type font
mediumFontResfont resource for medium type font
boldFontResfont resource for bold type font
note

@FontRes is an annotation used to indicate that a parameter is expected to reference a font resource.

  • headerColor: Set the color of the toolbars for fragments/activity for throughout your app by providing the hexcode of the color.
  • buttonsColor: Set the color of clickables throughout your app by providing the hexcode of the color.
  • textLinkColor: Set the color of link text throughout your app by providing the hexcode of the color.

Applying LMChatAppearance in your Application​

Here’s an example of how to apply LMChatAppearance using LMChatAppearanceRequest while setting up LMChatCore in your application class.

val lmChatAppearanceRequest = LMChatAppearanceRequest.Builder()
    .headerColor("#FFFFFF") // change with your header color
    .buttonsColor("#00897B") // change with your button color
    .textLinkColor("#007AFF") // change with your text link color
    .fonts(
        LMFonts.Builder()
            .bold(R.font.roboto_bold) // change with your bold font resource
            .medium(R.font.roboto_medium) // change with your medium font resource
            .regular(R.font.oboto_regular) // change with your regular font resource
            .build()
    )
    .build()

LMChatCore.setup(
    application = this,
    theme = lmChatTheme,
    lmChatCoreCallback = lmChatCoreCallback,
    lmChatAppearanceRequest = lmChatAppearanceRequest,
    domain = domain,
    enablePushNotifications = enablePushNotifications,
    deviceId = deviceId
)