Customizing the look

Customizing the look

This page shows you the different ways that you can customize the SDK UI.

Before you start

Before you start, note the following:

• You can customize text, colors, and fonts used in the out-of-the-box UI
• You cannot move UI elements, remove parts of the UI, or add new parts

If customizing the UI elements is important to you, consider building your own UI and using the SDK's API. See Using the SDK with your own UI.

Applying custom theme to SDK UI

The Talk SDK interface is built using the Material Components for Android library, which defines many theme attributes you can use to customize the look and feel of UI elements. You can provide your own custom theme for any of the two screens (activities) included in the SDK. The following sections describe how for the permissions screen and the call screen.

The list of theme attributes that can be overridden includes, but is not limited to, the following:

Attribute	Description
colorPrimary	Primary branding color
colorOnPrimary	Color used to display text and icons displayed on top of colorPrimary
colorSurface	Background color for large surfaces, such as a bottom sheet
colorOnSurface	Color used to display text and icons displayed on top of colorSurface

Note: colorOnSurface is not used directly as text color. Instead, different shades of it are applied to various types of text by the Material Components library. The default behavior follows Material Design guidelines, but can also be altered by providing custom values for theme attributes like textColorPrimary.

For more information about the theming system, see the Material Design documentation.

Customizing the permissions screens

The permissions screen from the Talk SDK has the following responsibilities:

• Request permission to access the microphone if not yet granted
• Verify agent availability
• Ask the user for recording consent

In this version of the SDK, getting recording consent is not available in the UI but is available in the API.

The permissions screen provides the user with additional context and reassurance as to why access to their microphone is required. You can customize the look and feel of this screen or omit it from your application.

To customize the look and feel:

1. Create a custom theme extending the Talk SDK theme in themes.xml (or any other resource xml file).

   <style name="CustomSetupTheme" parent="@style/Theme.TalkSdk.CallSetup">
   </style>

2. Override the theme for TalkCallSetupActivity by declaring it in AndroidManifest.xml.

   <activity
       android:name="zendesk.talk.android.internal.call.setup.TalkCallSetupActivity"
       android:theme="@style/CustomSetupTheme"
       tools:replace="android:theme" />

3. Provide your own values for theme attributes in CustomSetupTheme. Example:

   <style name="CustomSetupTheme" parent="@style/Theme.TalkSdk.CallSetup">
       <item name="colorPrimary">@color/my_brand_color</item>
   </style>

   As long as your theme has Theme.TalkSdk.CallSetup set as parent, you can override any subset of attributes.

Omitting the permissions screen

If you don't want to use the SDK's built-in permissions and recording consent screen, you can build your own and start the call screen directly with the startCallScreen method. See Using your own permissions screen only.

Customizing the call screen

The call screen is less customizable than the permissions screen. You can't change the icons and colors used for action buttons. It's customized the same way as the permissions screen.

1. Create a custom theme extending the Talk SDK theme in themes.xml (or any other resource xml file).

   <style name="CustomCallTheme" parent="@style/Theme.TalkSdk.Call">
   </style>

2. Override the theme for TalkCallActivity by declaring it in AndroidManifest.xml.

   <activity
       android:name="zendesk.talk.android.internal.call.TalkCallActivity"
       android:theme="@style/CustomCallTheme"
       tools:replace="android:theme" />

3. Provide your own values for theme attributes in CustomCallTheme. Example:

   <style name="CustomCallTheme" parent="@style/Theme.TalkSdk.Call">
       <item name="colorPrimary">@color/my_brand_color</item>
   </style>

   As long as your theme has Theme.TalkSdk.Call set as parent, you can override any subset of attributes.

Dark theme support

the UI provided by the SDK automatically switches between light and dark themes based on system-controlled night mode flags. If you use AppCompatDelegate.setDefaultNightMode() to force light/dark theme throughout your app, the Talk SDK UI will also respect the setting. Overriding theme attributes as shown in earlier examples will impact both light and dark themes. When you want customize something differently in each theme, you need to declare another version of your custom theme in a night-qualified resource folder as in the following example:

• res/values/themes.xml

  <style name="CustomCallTheme" parent="@style/Theme.TalkSdk.Call">
      <item name="colorSurface">@color/white</item>
      <item name="colorOnSurface">@color/black</item>
      <item name="colorPrimary">@color/my_brand_color</item>
  </style>

• res/values-night/themes.xml

  <style name="CustomCallTheme" parent="@style/Theme.TalkSdk.Call">
      <item name="colorSurface">@color/black</item>
      <item name="colorOnSurface">@color/white</item>
  </style>

Note that you can also override a theme attribute in only one theme and rely on the SDK-provided default in the other, such as with colorPrimary in the example above.