CallBackground

The CallBackground component is a versatile component designed to wrap the content of your call UI with a themed background. It provides a consistent visual foundation for call screens while allowing you to customize both the background and the main content.

Let's see how to use the component.

Usage

To use the CallBackground, you can simply embed it somewhere in your custom UI, like so:

CallBackground(
    modifier = Modifier.padding(16.dp),
    backgroundContent = {
        // Optional custom background content
    },
) {
    // Content to be displayed in the call background
    UserAvatar(
        modifier = Modifier.size(56.dp),
        userImage = user.image,
        userName = user.name,
    )
}

Using this small snippet of code, you can represent something like the following:

In this simple example, the component provides a themed background for the call UI. For simplicity, we wrapped a UserAvatar in the CallBackground, but you can embed more complex UI if necessary.

Since this is a purely visual component that doesn't have any actions or behavior, there are no action handler customization options, but you can still customize the UI.

Customization

This component has the following parameters that can be used to customize its behavior and appearance:

public fun CallBackground(
    modifier: Modifier = Modifier,
    backgroundContent: (@Composable BoxScope.() -> Unit)? = null,
    content: @Composable BoxScope.() -> Unit,
)

modifier: A Modifier for styling. Optional parameter, but can be used for additional styling.
backgroundContent: An optional composable that renders custom background content. Use this to add custom images or gradients behind the main content.
content: A composable Slot API that allows you to specify the content that should be wrapped by the component. This parameter is mandatory, since you need to define what content you're wrapping with the background.

The CallBackground component automatically applies the theme's baseSheetTertiary color as the background. All of this should be more than enough to customize any call screens. You can create immersive and engaging calling experiences that are tailored to your app's needs.

Avatar

Reactions