Skip to content

Commit c27839f

Browse files
authored
Merge pull request #200293 from ahammer/release_acs_calling_composite
Documentation updates for ACS UI Library (Android and General)
2 parents 2bbc332 + b750324 commit c27839f

File tree

7 files changed

+217
-145
lines changed

7 files changed

+217
-145
lines changed
361 KB
Loading

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ Composites enable developers to easily integrate a whole calling experience into
2828
| | Video preview available throughout call for local user |
2929
| | Default avatars available when video is off |
3030
| | Shared screen content displayed on participant gallery |
31+
| | Participant Avatar Customization |
3132
| | Participant roster |
3233
| Call configuration | Microphone device management |
3334
| | Camera device management |
@@ -36,6 +37,7 @@ Composites enable developers to easily integrate a whole calling experience into
3637
| Call Controls | Mute/unmute call |
3738
| | Video on/off on call |
3839
| | End call |
40+
| | Hold/Resume Call on Audio Interruption |
3941

4042
## Supported Identities
4143

@@ -73,11 +75,15 @@ The calling composite offers to adapt to any screen size that would bring suppor
7375

7476
## Localization
7577

76-
Localization is a key to making products that can be used across the world and by people who speak different languages. The Mobile UI Library now provides support for 13 languages: ***English, Spanish, French, German, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Turkish and Chinese*** and RTL capabilities. [How to add localization to your app.](../../../how-tos/ui-library-sdk/localization.md)
78+
Localization is a key to making products that can be used across the world and by people who speak different languages. The Mobile UI Library now provides support for 12 languages: ***English, Spanish, French, German, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Turkish and Chinese*** and RTL capabilities. [How to add localization to your app.](../../../how-tos/ui-library-sdk/localization.md)
7779

78-
## Data Model Injection
80+
## Accessibility
7981

80-
The Mobile UI Library gives the developers the ability to provide a more customized experience. At launch, developers can now inject an optional Local Data Options. This object can contain an image that represents the avatar to render, and a display name they can optionally display instead. None of this information will be sent to Azure Communication Services and will be only held locally in the Mobile UI library. [How to inject user data model.](../../../how-tos/ui-library-sdk/data-model.md)
82+
Accessibility is a key focus of the calling libraries. Screen Readers are supported to make important announcements regarding calling status and to help ensure that visibility impaired users can effectively participate in using the application.
83+
84+
## Participant View Customization
85+
86+
The Mobile UI Library gives the developers the ability to modify both Local and Remote Participants and how they are displayed in the call. On call launch the developer can supply a local avatar and custom display name to show to the local user. For Remote Users, methods are available to allow customization of avatars as they join the meetings. [How to customize participant views.](../../../how-tos/ui-library-sdk/data-model.md)
8187

8288
## Recommended Architecture
8389

@@ -100,7 +106,7 @@ These client libraries also require the context for the call they'll join. Simil
100106
|Platform | Versions|
101107
|---------|---------|
102108
| iOS | iOS 14+ |
103-
| Android | v21+ |
109+
| Android | Api 21+ |
104110

105111
> [!div class="nextstepaction"]
106112
> [Quickstart guides](../../../quickstarts/ui-library/get-started-composites.md)

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

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
description: In this tutorial, you learn how to use the Calling composite on Android
2+
description: In this tutorial, you learn how to use the Calling composite on Android to customize the Participant Avatars and Display Names
33
author: garchiro7
44

55
ms.author: jorgegarc
@@ -12,59 +12,66 @@ ms.service: azure-communication-services
1212

1313
Azure Communication UI [open source library](https://github.com/Azure/communication-ui-library-android) for Android and the sample application code can be found [here](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-library-quick-start)
1414

15-
### Local Participant View Data Injection
15+
### Local Participant View Customization
1616

17-
The UI Library now gives developers the ability to provide a more customized experience. At launch, developers can now inject an optional Local Data Options. This object can contain a bitmap that represents the avatar to render, and a display name they can optionally display instead. None of this information will be sent to Azure Communication Services and will be only held locally in the UI library.
17+
The UI Library gives developers the ability to provide a more customized experience regarding Participant information. At launch, developers can optionally add Participant View Data. This local data is not shared with the server and can be used to customize the display name and avatar of the local user.
1818

19-
#### Participant View Data
19+
#### Local Participant View Data
2020

21-
`ParticipantViewData` is a class that set the `RenderedDisplayName`, `AvatarBitMap` and `ScaleType` for avatar control. This class is injected to UI Library to set avatar information.
21+
`CallCompositeParticipantViewData` is a class that set the `displayName`, `avatarBitmap` and `scaleType` for avatar control. This class is passed to the `CallCompositeLocalOptions` in order to customize the local participants view information.
2222

23-
#### Local Settings
23+
This class is held in the `CallCompositeLocalOptions` object that represents options used locally on the device making the call.
2424

25-
`LocalSettings` is a wrapper that set the persona data for UI Library components using a `ParticipantViewData`. By default, the UI library will display the `displayName` injected in `GroupCallOptions` and `TeamsMeetingOptions`. If `ParticipantViewData` is injected, the `RenderedDisplayName`, `AvatarBitMap` will be displayed for local participant.
25+
`displayName` differs from the `displayName` passed in via the `CallCompositeRemoteOptions`. `CallCompositeParticipantViewData` `displayName` is only used locally as an override, where `CallCompositeRemoteOptions` `displayName` is passed to the server and shared with other participants. When `CallCompositeParticipantViewData` `displayName` is not provided, `CallCompositeRemoteOptions` `displayName` is used.
2626

2727
#### Usage
2828

29-
To use the `LocalSettings`, pass the instance of `ParticipantViewData` and inject `LocalSettings` to `callComposite.launch`.
29+
To use the `CallCompositeLocalOptions`, pass the instance of `CallCompositeParticipantViewData` and inject `CallCompositeLocalOptions` to `callComposite.launch`.
3030

3131
#### [Kotlin](#tab/kotlin)
3232

3333
```kotlin
34-
val viewData = ParticipantViewData("user_name") // bitmap is optional
35-
val localSettings = LocalSettings(viewData)
36-
callComposite.launch(this, options, localSettings)
34+
val viewData = CallCompositeParticipantViewData().setDisplayName("displayName") // setAvatarBitmap for bitmap
35+
val localOptions = CallCompositeLocalOptions(viewData)
36+
callComposite.launch(this, remoteOptions, localOptions)
3737
```
3838

3939
#### [Java](#tab/java)
4040

4141
```java
42-
ParticipantViewData viewData = new ParticipantViewData("user_name", bitmap); // bitmap is optional
43-
LocalSettings localSettings = new LocalSettings(viewData);
44-
callComposite.launch(this, options, localSettings);
42+
CallCompositeParticipantViewData viewData = new CallCompositeParticipantViewData().setDisplayName("displayName"); // setAvatarBitmap for bitmap
43+
CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions(viewData);
44+
callComposite.launch(this, remoteOptions, localOptions);
4545
```
4646
-----
4747

4848
|Setup View| Calling Experience View|
4949
| ---- | ---- |
5050
| :::image type="content" source="media/android-model-injection.png" alt-text="Screenshot of a Android data custom model injection."::: | :::image type="content" source="media/android-model-injection-name.png" alt-text="Screenshot of a Android data custom model injection with name."::: |
5151

52-
### Remote Participant View Data Injection
52+
### Remote Participant View Customization
5353

54-
On remote participant join, developers can inject the participant view data for remote participant. This participant view data can contain a bitmap that represents the avatar to render, and a display name they can optionally display instead. None of this information will be sent to Azure Communication Services and will be only held locally in the UI library.
54+
In some instances, you may wish to provide local overrides for remote participants to allow custom avatars and titles.
55+
56+
The process is similar to the local participant process, however the data is set when participants join the call. As a developer you would need to add a listener to when remote participants join the call, and then call a method to set the `CallCompositeParticipantViewData` for that remote user.
5557

5658
#### Usage
5759

5860
To set the participant view data for remote participant, set `setOnRemoteParticipantJoinedHandler`. On remote participant join, use callComposite `setRemoteParticipantViewData` to inject view data for remote participant. The participant identifier [CommunicationIdentifier](https://azure.github.io/azure-sdk-for-android/azure-communication-common/index.html) is to uniquely identify a remote participant.
5961

62+
Calls to `setRemoteParticipantViewData` return a result of `CallCompositeSetParticipantViewDataResult`, which has the following values.
63+
64+
- CallCompositeSetParticipantViewDataResult.SUCCESS
65+
- CallCompositeSetParticipantViewDataResult.PARTICIPANT_NOT_IN_CALL
66+
6067
#### [Kotlin](#tab/kotlin)
6168

6269
```kotlin
6370
callComposite.setOnRemoteParticipantJoinedHandler { remoteParticipantJoinedEvent ->
6471
remoteParticipantJoinedEvent.identifiers.forEach { identifier ->
6572
// get displayName, bitmap for identifier
6673
callComposite.setRemoteParticipantViewData(identifier,
67-
ParticipantViewData("display_name"))
74+
CallCompositeParticipantViewData().setDisplayName("displayName")) // setAvatarBitmap for bitmap
6875
}
6976
}
7077
```
@@ -76,7 +83,7 @@ callComposite.setOnRemoteParticipantJoinedHandler { remoteParticipantJoinedEvent
7683
for (CommunicationIdentifier identifier: remoteParticipantJoinedEvent.getIdentifiers()) {
7784
// get displayName, bitmap for identifier
7885
callComposite.setRemoteParticipantViewData(identifier,
79-
new ParticipantViewData("display_name"));
86+
new CallCompositeParticipantViewData().setDisplayName("displayName")); // setAvatarBitmap for bitmap
8087
}
8188
});
8289
```

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

Lines changed: 70 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,55 +14,95 @@ Azure Communication UI [open source library](https://github.com/Azure/communicat
1414

1515
### Available Languages
1616

17-
The following is table of `CommunicationUISupportedLocale` with out of the box translations. If you want to localize the composite, pass the `Locale` from `CommunicationUISupportedLocale` into `LocalizationConfiguration` as options into `CallComposite`.
17+
The following is table of `CallCompositeSupportedLocale` with out of the box translations. If you want to localize the composite, pass the `Locale` from `CallCompositeSupportedLocale` into `CallCompositeLocalizationOptions` as options into `CallComposite`.
1818

19-
|Language| CommunicationUISupportedLocale|
19+
|Language| CallCompositeSupportedLocale|
2020
|---------|---------|
21-
|German| CommunicationUISupportedLocale.DE|
22-
|Japanese| CommunicationUISupportedLocale.JA|
23-
|English| CommunicationUISupportedLocale.EN_US|
24-
|Chinese (Traditional)| CommunicationUISupportedLocale.ZH_TW|
25-
|Spanish |CommunicationUISupportedLocale.ES|
26-
|Chinese (Simplified) |CommunicationUISupportedLocale.ZH_CN|
27-
|Italian |CommunicationUISupportedLocale.IT|
28-
|English (United Kingdom) |CommunicationUISupportedLocale.EN_UK|
29-
|Korean |CommunicationUISupportedLocale.KO|
30-
|Turkish |CommunicationUISupportedLocale.TR|
31-
|Russian |CommunicationUISupportedLocale.RU|
32-
|French |CommunicationUISupportedLocale.FR|
33-
|Dutch |CommunicationUISupportedLocale.NL|
34-
|Portuguese |CommunicationUISupportedLocale.PT_BR|
21+
|German| CallCompositeSupportedLocale.DE|
22+
|Japanese| CallCompositeSupportedLocale.JA|
23+
|English| CallCompositeSupportedLocale.EN_US|
24+
|Chinese (Traditional)| CallCompositeSupportedLocale.ZH_TW|
25+
|Spanish |CallCompositeSupportedLocale.ES|
26+
|Chinese (Simplified) |CallCompositeSupportedLocale.ZH_CN|
27+
|Italian |CallCompositeSupportedLocale.IT|
28+
|English (United Kingdom) |CallCompositeSupportedLocale.EN_UK|
29+
|Korean |CallCompositeSupportedLocale.KO|
30+
|Turkish |CallCompositeSupportedLocale.TR|
31+
|Russian |CallCompositeSupportedLocale.RU|
32+
|French |CallCompositeSupportedLocale.FR|
33+
|Dutch |CallCompositeSupportedLocale.NL|
34+
|Portuguese |CallCompositeSupportedLocale.PT_BR|
3535

3636
### Localization Provider
3737

38-
`LocalizationConfiguration` is an options wrapper that sets all the strings for Mobile UI Library components using a `CommunicationUISupportedLocale`. By default, all text labels use English strings. If desired `LocalizationConfiguration` can be used to set a different language by passing a `Locale` object from `CommunicationUISupportedLocale`. Out of the box, the UI library includes a set of `Locale` usable with the UI components and composites.
38+
`CallCompositeLocalizationOptions` is an options wrapper that sets all the strings for Mobile UI Library components using a `CallCompositeSupportedLocale`. By default, all text labels use English strings. If desired `CallCompositeLocalizationOptions` can be used to set a different language by passing a `Locale` object from `CallCompositeSupportedLocale`. Out of the box, the UI library includes a set of `Locale` usable with the UI components and composites.
3939

40-
You can also obtain list of `Locale` by the static function `CommunicationUISupportedLocale.getSupportedLocales()`.
40+
You can also obtain list of `Locale` by the static function `CallCompositeSupportedLocale.getSupportedLocales()`.
4141

4242
:::image type="content" source="media/android-localization.png" alt-text="Android localization":::
4343

4444
#### Usage
4545

46-
To use the `LocalizationConfiguration`, specify a `CommunicationUISupportedLocale` and pass it to the `CallCompositeOptions`. For the example below, we'll localize the composite to French.
46+
To use the `CallCompositeLocalizationOptions`, specify a `CallCompositeSupportedLocale` and pass it to the `CallCompositeBuilder`. For the example below, we'll localize the composite to French.
4747

48-
```Kotlin
49-
val callComposite: CallComposite = CallCompositeBuilder().localization(LocalizationConfiguration(CommunicationUISupportedLocale.FR).build()
48+
#### [Kotlin](#tab/kotlin)
49+
50+
```kotlin
51+
import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions
52+
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale
53+
54+
// CallCompositeSupportedLocale provides list of supported locale
55+
val callComposite: CallComposite =
56+
CallCompositeBuilder().localization(
57+
CallCompositeLocalizationOptions(CallCompositeSupportedLocale.FR)
58+
).build()
59+
```
60+
61+
#### [Java](#tab/java)
62+
63+
```java
64+
import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions;
65+
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale;
66+
67+
// CallCompositeSupportedLocale provides list of supported locale
68+
CallComposite callComposite =
69+
new CallCompositeBuilder()
70+
.localization(new CallCompositeLocalizationOptions(CallCompositeSupportedLocale.FR))
71+
.build();
5072
```
5173

74+
-----
75+
5276
### Layout Direction
5377

54-
Certain cultures (Arabic, Hebrew, etc.) may need for localization to have right-to-left layout. You can specify the `layoutDirection` as part of the `LocalizationConfiguration`. The layout of the composite will be mirrored but the text will remain in the direction of the string.
78+
Certain cultures (Arabic, Hebrew, etc.) may need for localization to have right-to-left layout. You can specify the `layoutDirection` as part of the `CallCompositeLocalizationOptions`. The layout of the composite will be mirrored but the text will remain in the direction of the string.
79+
80+
#### [Kotlin](#tab/kotlin)
5581

56-
```Koltin
57-
val callComposite: CallComposite = CallCompositeBuilder().localization(LocalizationConfiguration(CommunicationUISupportedLocale.FR,LaytoutDirection.RTL)).build()
82+
```kotlin
83+
import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions
84+
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale
85+
86+
// CallCompositeSupportedLocale provides list of supported locale
87+
val callComposite: CallComposite =
88+
CallCompositeBuilder().localization(
89+
CallCompositeLocalizationOptions(CallCompositeSupportedLocale.FR, LayoutDirection.LTR)
90+
).build()
5891
```
5992

60-
|`LayoutDirection.RTL` | `LayoutDirection.LTR` |
61-
| -------------------------------------------------------- | --------------------------------------------------------------- |
62-
| :::image type="content" source="media/android-rtl.png" alt-text="Android RTL"::: | :::image type="content" source="media/android-ltr.png" alt-text="Android LTR"::: |
93+
#### [Java](#tab/java)
6394

64-
### Customizing Translations
95+
```java
96+
import com.azure.android.communication.ui.calling.models.CallCompositeLocalizationOptions;
97+
import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale;
6598

66-
To override a particular string, you can find the list of localization keys here for the key-value pair. You can specify the `languageCode` to be one of the supported languages, and when a key isn't provided, will fall back to our supported translation string. If you specified an unsupported language, you should provide translations for all the keys for that language, and will fall back to English strings when a key isn't provided.
99+
// CallCompositeSupportedLocale provides list of supported locale
100+
CallComposite callComposite =
101+
new CallCompositeBuilder()
102+
.localization(new CallCompositeLocalizationOptions(CallCompositeSupportedLocale.FR, LayoutDirection.LTR))
103+
.build();
104+
```
67105

68-
Create a `string.xml` file (or other filename) with the key-value pair for selected keys you want to override.
106+
|`LayoutDirection.RTL` | `LayoutDirection.LTR` |
107+
| -------------------------------------------------------- | --------------------------------------------------------------- |
108+
| :::image type="content" source="media/android-rtl.png" alt-text="Android RTL"::: | :::image type="content" source="media/android-ltr.png" alt-text="Android LTR"::: |

0 commit comments

Comments
 (0)