Customizing the look

Customizing the look

这个页面显示了ca的不同方式n 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. SeeUsing 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 thepermissions screenand thecall screen.

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

Note:colorOnSurfaceis 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 followsMaterial Design guidelines, but can also be altered by providing custom values for theme attributes liketextColorPrimary.

For more information about the theming system, see theMaterial 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 oromit itfrom your application.

To customize the look and feel:

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

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

2. Override the theme forTalkCallSetupActivityby declaring it inAndroidManifest.xml.

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

3. Provide your own values for theme attributes inCustomSetupTheme. Example:

                  
   
                   
   <stylename="CustomSetupTheme"parent="@style/Theme.TalkSdk.CallSetup"><itemname="colorPrimary">@color/my_brand_coloritem>style>
                  

   As long as your theme hasTheme.TalkSdk.CallSetupset 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 thestartCallScreenmethod. SeeUsing 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 inthemes.xml(or any other resource xml file).

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

2. Override the theme forTalkCallActivityby declaring it inAndroidManifest.xml.

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

3. Provide your own values for theme attributes inCustomCallTheme. Example:

                  
   
                   
   <stylename="CustomCallTheme"parent="@style/Theme.TalkSdk.Call"><itemname="colorPrimary">@color/my_brand_coloritem>style>
                  

   As long as your theme hasTheme.TalkSdk.Callset 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 useAppCompatDelegate.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

                 
  
                  
  <stylename="CustomCallTheme"parent="@style/Theme.TalkSdk.Call"><itemname="colorSurface">@color/whiteitem><itemname="colorOnSurface">@color/blackitem><itemname="colorPrimary">@color/my_brand_coloritem>style>
                 

• res/values-night/themes.xml

                 
  
                  
  <stylename="CustomCallTheme"parent="@style/Theme.TalkSdk.Call"><itemname="colorSurface">@color/blackitem><itemname="colorOnSurface">@color/whiteitem>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 withcolorPrimaryin the example above.