Merge pull request #291541 from pavelprystinka/pavelprystinka/add_header_custom_buttons

Add header custom button sample

Author: JamesJBarnett

articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md

@@ -191,7 +191,7 @@ To ensure a consistent call experience, we recommend that you integrate Fluent U
 - **User testing**: Conduct user testing to ensure that the customizations meet user needs and don't confuse or overwhelm them.
 - **Feedback mechanism**: Adding buttons like **Report Issue** ensure that a robust back-end system is available to handle the feedback collected. Reuse the [mechanism that UI Library provides by default](../../../tutorials/collecting-user-feedback/collecting-user-feedback.md).
 
-For more information, see [Customize the button bar](../../../how-tos/ui-library-sdk/button-injection.md).
+For more information, see [Customize buttons](../../../how-tos/ui-library-sdk/button-injection.md).
 
 ### Skip setup screen
 

articles/communication-services/how-tos/ui-library-sdk/button-injection.md

@@ -12,10 +12,10 @@ ms.date: 08/01/2024
 ms.custom: template-how-to
 zone_pivot_groups: acs-plat-ios-android
 
-#Customer intent: As a developer, I want to customize the button bar actions in the UI Library.
+#Customer intent: As a developer, I want to customize button actions in the UI Library.
 ---
 
-# Customize the button bar
+# Customize buttons
 
 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.
 

articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/android.md

@@ -10,7 +10,7 @@ ms.service: azure-communication-services
 
 ## Remove buttons
 
-`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 `visible` or `enabled` to `false` for the `CallCompositeButtonViewData` to hide or disable button.
+`CallCompositeCallScreenControlBarOptions`, allow the flexibility to customize buttons 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 `visible` or `enabled` to `false` for the `CallCompositeButtonViewData` to hide or disable button.
 
 :::image type="content" source="../../media/remove-button-experience.png" alt-text="Screenshot that shows the experience removing buttons in the UI Library.":::
 
@@ -78,6 +78,22 @@ cameraButton.setVisible(true);
 
 #### [Kotlin](#tab/kotlin)
 ```kotlin
+
+// Custom header button
+val headerCustomButton =
+    CallCompositeCustomButtonViewData(
+        "headerCustomButton",
+        R.drawable.my_header_button_icon,
+        "My header button",
+        fun(it: CallCompositeCustomButtonClickEvent) {
+            // process my button onClick
+        }
+    )
+
+val headerOptions = CallCompositeCallScreenHeaderViewData()
+    .setCustomButtons(listOf(headerCustomButton))
+
+// Custom control bar button
 val controlBarOptions = CallCompositeCallScreenControlBarOptions()
 
 controlBarOptions.setCustomButtons(
@@ -94,6 +110,7 @@ controlBarOptions.setCustomButtons(
 )
 
 val callScreenOptions = CallCompositeCallScreenOptions()
+    .setHeaderViewData(headerOptions)
     .setControlBarOptions(controlBarOptions)
 
 val localOptions = CallCompositeLocalOptions()
@@ -107,6 +124,22 @@ callComposite.launch(context, locator, localOptions)
 
 #### [Java](#tab/java)
 ```java
+// Custom header button
+List<CallCompositeCustomButtonViewData> headerCustomButtons = new ArrayList<>();
+headerCustomButtons.add(
+        new CallCompositeCustomButtonViewData(
+                "headerCustomButton",
+                R.drawable.my_header_button_icon,
+                "My header button",
+                eventArgs -> {
+                    // process my button onClick
+                }
+        )
+);
+CallCompositeCallScreenHeaderViewData headerOptions = new CallCompositeCallScreenHeaderViewData()
+        .setCustomButtons(headerCustomButtons);
+
+// Custom control bar button
 CallCompositeCallScreenControlBarOptions controlBarOptions = new CallCompositeCallScreenControlBarOptions();
 
 List<CallCompositeCustomButtonViewData> customButtons = new ArrayList<>();
@@ -124,6 +157,7 @@ customButtons.add(
 controlBarOptions.setCustomButtons(customButtons);
 
 CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions()
+        .setHeaderViewData(headerOptions)
         .setControlBarOptions(controlBarOptions);
 
 CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()

articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/ios.md

@@ -11,7 +11,7 @@ ms.service: azure-communication-services
 
 ## Remove or disable buttons
 
-`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 `visible` or `enabled` to `false` for the `ButtonViewData` to hide or disable button.
+`CallScreenControlBarOptions`, allow the flexibility to customize buttons 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 `visible` or `enabled` to `false` for the `ButtonViewData` to hide or disable button.
 
 :::image type="content" source="../../media/remove-button-experience.png" alt-text="Screenshot that shows the experience removing buttons in the UI Library.":::
 
@@ -42,16 +42,28 @@ cameraButton.visible = true
 :::image type="content" source="../../media/add-button-experience.png" alt-text="Screenshot that shows the experienc when you add a new button the UI Library.":::
 
 ```swift
+// Custom header button
+let headerCustomButton = CustomButtonViewData(image: UIImage(named: "...")!,
+                                              title: "My header button") {_ in
+    // Process my button onClick
+}
+let callScreenHeaderViewData = CallScreenHeaderViewData(
+    customButtons: [headerCustomButton]
+)
+
+// Custom control bar button
 let customButton = CustomButtonViewData(image: UIImage(named: "...")!,
-                                       title: "My button") {_ in
+                                        title: "My button") {_ in
     // Process my button onClick
 }
 
 let callScreenControlBarOptions = CallScreenControlBarOptions(
     customButtons: [customButton]
 )
 
-let callScreenOptions = CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
+let callScreenOptions = CallScreenOptions(
+    controlBarOptions: callScreenControlBarOptions, headerViewData: callScreenHeaderViewData)
+
 let localOptions = LocalOptions(callScreenOptions: callScreenOptions)
 
 let callComposite = CallComposite(credential: credential)

articles/communication-services/toc.yml

@@ -445,7 +445,7 @@ items:
           href: how-tos/ui-library-sdk/closed-captions.md
         - name: Configure theming
           href: how-tos/ui-library-sdk/theming.md
-        - name: Customize the button bar
+        - name: Customize buttons
           href: how-tos/ui-library-sdk/button-injection.md
         - name: Customize the title and subtitle
           href: how-tos/ui-library-sdk/setup-title-subtitle.md