---
title: "SurfaceTransformation"
description: "Object to be used to apply different transformation to the content and the container (i.e. the
background) of the composable.

This interface allows you to customize the appearance of a surface by modifying the container
painter and applying visual transformations to the content. In this context, a surface is a
container composable that displays content (which could use other Composables such as Icon, Text
or Button) as well as a background typically drawn using a painter. This is useful for creating
custom effects like scaling, rotation, or applying shaders.

Example usage with the [Button]:


Example usage with the [Card]:


Example of adding support in a custom component:"
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>



```kotlin
public interface SurfaceTransformation
```


Object to be used to apply different transformation to the content and the container (i.e. the
background) of the composable.

This interface allows you to customize the appearance of a surface by modifying the container
painter and applying visual transformations to the content. In this context, a surface is a
container composable that displays content (which could use other Composables such as Icon, Text
or Button) as well as a background typically drawn using a painter. This is useful for creating
custom effects like scaling, rotation, or applying shaders.

Example usage with the `Button`:


Example usage with the `Card`:


Example of adding support in a custom component:


## Functions

```kotlin
public fun createContainerPainter(
        painter: Painter,
        shape: Shape,
        border: BorderStroke? = null,
    ): Painter
```


Returns a new painter to be used instead of `painter` which should react on a transformation.

This allows the transformation to modify the container painter based on properties like the
shape or border. For example, a transformation might apply a gradient that follows the shape
of the surface.

#### Parameters

| | |
| --- | --- |
| painter | The original painter. |
| shape | The shape of the content to be used for clipping. |
| border | The border to be applied to the container. |



```kotlin
public fun GraphicsLayerScope.applyContainerTransformation()
```


Visual transformations to be applied to the container of the item.

This function is called within a `GraphicsLayerScope`, allowing you to use properties like
`scaleX`, `scaleY`, `rotationZ`, `alpha`, and others to transform the content.


```kotlin
public fun GraphicsLayerScope.applyContentTransformation()
```


Visual transformations to be applied to the content of the item.

This function is called within a `GraphicsLayerScope`, allowing you to use properties like
`scaleX`, `scaleY`, `rotationZ`, `alpha`, and others to transform the content.



## Code Examples

### SurfaceTransformationButtonSample
```kotlin
@Preview
@Composable
fun SurfaceTransformationButtonSample() {
    val transformationSpec =
        rememberTransformationSpec(
            ResponsiveTransformationSpec.smallScreen(
                contentAlpha =
                    TransformationVariableSpec(
                        0f,
                        transformationZoneEnterFraction = 0.4f,
                        transformationZoneExitFraction = 0.8f,
                    ),
                containerAlpha = TransformationVariableSpec(0.3f),
            )
        )
    TransformingLazyColumn {
        items(count = 100) {
            Button(
                onClick = {},
                transformation = SurfaceTransformation(transformationSpec),
                modifier = Modifier.transformedHeight(this, transformationSpec),
            ) {
                Text("Button #$it")
            }
        }
    }
}
```

### SurfaceTransformationCardSample
```kotlin
@Preview
@Composable
fun SurfaceTransformationCardSample() {
    val transformationSpec = rememberTransformationSpec()
    var expandedIndex by remember { mutableIntStateOf(-1) }
    TransformingLazyColumn {
        items(count = 100) {
            TitleCard(
                onClick = { expandedIndex = if (expandedIndex == it) -1 else it },
                title = { Text("Card #$it") },
                subtitle = { Text("Subtitle #$it") },
                transformation = SurfaceTransformation(transformationSpec),
                modifier = Modifier.transformedHeight(this, transformationSpec),
            ) {
                if (it == expandedIndex) {
                    Text("Expanded content #$it")
                }
            }
        }
    }
}
```

### SurfaceTransformationOnCustomComponent
```kotlin
@Preview
@Composable
fun SurfaceTransformationOnCustomComponent() {
    @Composable
    fun MyCardComponent(
        title: String,
        body: String,
        transformation: SurfaceTransformation,
        modifier: Modifier = Modifier,
    ) {
        Column(
            modifier =
                modifier
                    .fillMaxWidth()
                    .paint(
                        transformation.createContainerPainter(
                            ColorPainter(color = Color.Gray),
                            shape = RoundedCornerShape(16.dp),
                        )
                    )
                    .graphicsLayer { with(transformation) { applyContainerTransformation() } }
                    .padding(horizontal = 16.dp, vertical = 8.dp)
        ) {
            Text(title)
            Text(body)
        }
    }
    val transformationSpec = rememberTransformationSpec()
    TransformingLazyColumn {
        items(count = 100) {
            MyCardComponent(
                "Message #$it",
                "This is a body",
                transformation = SurfaceTransformation(transformationSpec),
                modifier = Modifier.transformedHeight(this, transformationSpec),
            )
        }
    }
}
```