You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| :::image type="content" source="../../media/mobile-ui/android-color.png" alt-text="Screenshot that shows Android theming for a caller experience."::: | :::image type="content" source="../../media/mobile-ui/ios-dark.png" alt-text="Screenshot that shows iOS theming for a caller experience."::: |
96
98
99
+
### Button bar customization
100
+
101
+
The functionality allows developers to add new actions into the contextual menu or remove current buttons in the button bar, providing the flexibility to introduce custom actions and tailor the user interface according to specific application needs.
102
+
103
+
- Add Custom Buttons: Developers can introduce new buttons into the contextual button bar to trigger custom actions.
104
+
- Remove Existing Buttons: Unnecessary default buttons can be removed to streamline the interface: camera, microphone o audio selection.
105
+
106
+
Consider the following constraints during the implementation of this feature:
107
+
108
+
- Icons and Labels: Icons are added only for new actions. The button bar icons keep the predefined icon, labels should be concise to fit the menu dimension.
109
+
- Accessibility Considerations: Developers should ensure that all custom buttons are accessible, including appropriate labeling for screen readers.
110
+
111
+
|Remove buttons | Add custom actions|
112
+
|------------- | ------------------|
113
+
| :::image type="content" source="media/ui-library-remove-button.png" alt-text="Screenshot that demonstrates the remove button on the bottom bar."::: | :::image type="content" source="media/ui-library-add-action-button.png" alt-text="Screenshot that demonstrates add custom action into the contextual menu."::: |
114
+
115
+
#### Use cases
116
+
117
+
- Custom In-Call Actions: A business application can add a custom "Report Issue" button, allowing users to directly report technical issues during a call.
118
+
- Branding and User Experience: An enterprise app can remove buttons that are irrelevant to its use case and add branded buttons that enhance the user experience.
119
+
120
+
To ensure a consistent call experience, , we recommend that you integrate Fluent UI icons into your project; available at [Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/). By doing so, your custom icons will match the design of the Call Composite, creating a cohesive and professional appearance.
121
+
122
+
#### Best practices
123
+
124
+
- Minimalism: Avoid overcrowding the contextual menu bar. Only add buttons that are essential for the user experience.
125
+
- User Testing: Conduct user testing to ensure the customizations meets user needs and don't confuse or overwhelm them.
126
+
- Add a Feedback Mechanism: If adding buttons for actions like "Report Issue," ensure there's a robust backend system to handle the feedback collected, you can reuse the [mechanism that UI Library provides by default](../../../tutorials/collecting-user-feedback/collecting-user-feedback.md).
127
+
128
+
For more information, see [How to customize the button bar](../../../how-tos/ui-library-sdk/button-injection.md).
129
+
97
130
### Screen size
98
131
99
132
You can adapt the Azure Communication Services call composite to adapt to screen sizes from 5 inches to tablet size. Use split mode and tablet mode in the call composite to get the dynamic participants' roster layout, provide clarity on the view, and focus on the conversation.
To implement custom actions or modify the current button layout, you can interact with the Native UI Library's API. This API involves defining custom button configurations, specifying actions, and managing the button bar's current actions. The API provides methods for adding custom actions, and removing existing buttons, all of which are accessible via straightforward function calls.
23
+
24
+
This functionality provides a high degree of customization, and ensures that the user interface remains cohesive and consistent with the application's overall design.
25
+
26
+
## Prerequisites
27
+
28
+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
29
+
- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
30
+
- A user access token to enable the call client. [Get a user access token](../../quickstarts/access-tokens.md).
31
+
- Optional: Completion of the [quickstart for getting started with the UI Library composites](../../quickstarts/ui-library/get-started-composites.md).
32
+
33
+
## Set up the feature
34
+
35
+
::: zone pivot="platform-android"
36
+
[!INCLUDE [Customize the actions from the button bar in the Android UI Library](./includes/button-injection/android.md)]
37
+
::: zone-end
38
+
39
+
::: zone pivot="platform-ios"
40
+
[!INCLUDE [DCustomize the actions from the button bar in the iOS UI Library](./includes/button-injection/ios.md)]
41
+
::: zone-end
42
+
43
+
## Next steps
44
+
45
+
-[Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md)
description: Learn how to customize the actions from the button bar in the Android UI Library
3
+
author: garchiro7
4
+
5
+
ms.author: jorgegarc
6
+
ms.date: 08/01/2024
7
+
ms.topic: include
8
+
ms.service: azure-communication-services
9
+
---
10
+
11
+
## Remove buttons
12
+
13
+
`CallCompositeCallScreenControlBarOptions`, allow the flexibility to customize the button bar by removing specific buttons such as camera, microphone, and audio controls. This API allows you to tailor the user interface according to their specific application requirements and user experience design. Just set the visibility to `false` to hide, the default behavior is for `CallCompositeButtonOptions` object.
14
+
15
+
#### [Kotlin](#tab/kotlin)
16
+
17
+
```kotlin
18
+
val controlBarOptions =CallCompositeCallScreenControlBarOptions()
19
+
20
+
val cameraButton =CallCompositeButtonOptions()
21
+
.setVisible(false)
22
+
23
+
controlBarOptions.setCameraButton(cameraButton)
24
+
25
+
val callScreenOptions =CallCompositeCallScreenOptions()
`Call composite` is using Fluent UI icons. You can download the icons directly from [the Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/) and incorporate them into your project as needed. This approach guarantees visual consistency across all user interface elements, enhancing the overall user experience.
63
+
64
+
#### [Kotlin](#tab/kotlin)
65
+
66
+
```kotlin
67
+
val controlBarOptions =CallCompositeCallScreenControlBarOptions()
68
+
69
+
controlBarOptions.setCustomButtons(
70
+
listOf(
71
+
CallCompositeCustomButtonOptions(
72
+
R.drawable.my_button_image,
73
+
"My button",
74
+
fun(it:CallCompositeCustomButtonClickEvent) {
75
+
// Process my button onClick
76
+
},
77
+
)
78
+
)
79
+
)
80
+
81
+
val callScreenOptions =CallCompositeCallScreenOptions()
description: Learn how to customize the actions from the button bar in the iOS UI Library
3
+
author: garchiro7
4
+
5
+
ms.author: jorgegarc
6
+
ms.date: 08/01/2024
7
+
ms.topic: include
8
+
ms.service: azure-communication-services
9
+
---
10
+
11
+
12
+
## Remove buttons
13
+
14
+
`CallScreenControlBarOptions`, allow the flexibility to customize the button bar by removing specific buttons such as camera, microphone, and audio controls. This API allows you to tailor the user interface according to their specific application requirements and user experience design. Just set the visibility to `false` to hide, the default behavior is for `ButtonOptions` object.
15
+
16
+
```swift
17
+
let cameraButton =ButtonOptions(visible: false)
18
+
19
+
let callScreenControlBarOptions =CallScreenControlBarOptions(
20
+
cameraButton: cameraButton
21
+
)
22
+
23
+
let callScreenOptions =CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
24
+
let localOptions =LocalOptions(callScreenOptions: callScreenOptions)
25
+
26
+
let callComposite =CallComposite(credential: credential)
`Call composite` is using Fluent UI icons. You can download the icons directly from [the Fluent UI GitHub repository](https://github.com/microsoft/fluentui-system-icons/) and incorporate them into your project as needed. This approach guarantees visual consistency across all user interface elements, enhancing the overall user experience.
33
+
34
+
```swift
35
+
let customButton =CustomButtonOptions(image: UIImage(named: "...")!,
36
+
title: "My button") {_in
37
+
// Process my button onClick
38
+
}
39
+
40
+
let callScreenControlBarOptions =CallScreenControlBarOptions(
41
+
customButtons: [customButton]
42
+
)
43
+
44
+
let callScreenOptions =CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
45
+
let localOptions =LocalOptions(callScreenOptions: callScreenOptions)
46
+
47
+
let callComposite =CallComposite(credential: credential)
0 commit comments