add images and update the preview notice

Author: garchiro7

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

@@ -12,6 +12,8 @@ ms.service: azure-communication-services
 
 `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.
 
+:::image type="content" source="../../media/remove-button-experience.png" alt-text="Screenshot that shows the experience removing buttons in the UI Library.":::
+
 #### [Kotlin](#tab/kotlin)
 ```kotlin
 val controlBarOptions = CallCompositeCallScreenControlBarOptions()
@@ -72,6 +74,8 @@ cameraButton.setVisible(true);
 
 `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.
 
+:::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.":::
+
 #### [Kotlin](#tab/kotlin)
 ```kotlin
 val controlBarOptions = CallCompositeCallScreenControlBarOptions()

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

@@ -13,6 +13,8 @@ ms.service: azure-communication-services
 
 `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.
 
+:::image type="content" source="../../media/remove-button-experience.png" alt-text="Screenshot that shows the experience removing buttons in the UI Library.":::
+
 ```swift
 let cameraButton = ButtonViewData(visible: false)
 
@@ -33,11 +35,12 @@ Button can be updated after launching call composite.
 cameraButton.visible = true
 ```
 
-
 ## Add custom actions
 
 `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.
 
+:::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
 let customButton = CustomButtonOptions(image: UIImage(named: "...")!,
                                        title: "My button") {_ in

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

@@ -8,6 +8,8 @@ ms.topic: include
 ms.service: azure-communication-services
 ---
 
+[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)]
+
 For more information, see the [open-source Android UI Library](https://github.com/Azure/communication-ui-library-android) and the [sample application code](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-calling).
 
 ### Defining a theme

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

@@ -8,6 +8,8 @@ ms.topic: include
 ms.service: azure-communication-services
 ---
 
+[!INCLUDE [Public Preview Notice](../../../../includes/public-preview-include.md)]
+
 For more information, see the [open-source iOS UI Library](https://github.com/Azure/communication-ui-library-ios) and the [sample application code](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-calling).
 
 ### Defining a theme

articles/communication-services/how-tos/ui-library-sdk/media/add-button-experience.png

@@ -21,6 +21,8 @@ Developers now have the capability to customize the title and subtitle of a call
 
 For instance, in a customer support scenario, the title could display the issue being addressed, while the subtitle could show the customer's name or ticket number.
 
+:::image type="content" source="./media/title-subtitle.png" alt-text="Screenshot that shows the experience of title and subtitle in the UI Library.":::
+
 Additionally, if tracking time spent in various segments of the call is crucial, the subtitle could dynamically update to display the elapsed call duration, helping to manage the meeting or session effectively.
 
 ## Prerequisites

articles/communication-services/how-tos/ui-library-sdk/media/custom-colors.png

@@ -15,6 +15,8 @@ zone_pivot_groups: acs-plat-web-ios-android
 
 # Theme the UI Library in an application
 
+:::image type="content" source="./media/custom-colors.png" alt-text="Screenshot that shows the experience using custom colors in the UI Library.":::
+
 The Azure Communication Services UI Library is a set of components, icons, and composites that make it easier for you to build high-quality user interfaces for your projects. The UI Library uses components and icons from [Fluent UI](https://developer.microsoft.com/fluentui), the cross-platform design system that Microsoft uses. As a result, the components are built with usability, accessibility, and localization in mind.
 
 In this article, you learn how to change the theme for UI Library components as you configure an application.