---
title: "BringIntoViewSpec"
description: "The configuration of how a scrollable reacts to bring into view requests.

Check the following sample for a use case usage of this API:"
type: "interface"
---

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


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

<div class='sourceset sourceset-common'>Common</div>



```kotlin
interface BringIntoViewSpec
```


The configuration of how a scrollable reacts to bring into view requests.

Check the following sample for a use case usage of this API:


## Properties

<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Animation spec customization is no longer supported.

```kotlin
val scrollAnimationSpec: AnimationSpec<Float>
```


An Animation Spec to be used as the animation to run to fulfill the BringIntoView requests.



## Functions

```kotlin
fun calculateScrollDistance(offset: Float, size: Float, containerSize: Float): Float
```


Calculate the offset needed to bring one of the scrollable container's child into view. This
will be called for every frame of the scrolling animation. This means that, as the animation
progresses, the offset will naturally change to fulfill the scroll request.

All distances below are represented in pixels.

#### Parameters

| | |
| --- | --- |
| offset | from the side closest to the start of the container. |
| size | is the child size. |
| containerSize | Is the main axis size of the scrollable container. |


#### Returns

| | |
| --- | --- |
|  | The necessary amount to scroll to satisfy the bring into view request. Returning zero from here means that the request was satisfied and the scrolling animation should stop. |




## Code Examples

### FocusScrollingInLazyRowSample
```kotlin
@ExperimentalFoundationApi
@Composable
fun FocusScrollingInLazyRowSample() {
    // a bring into view spec that pivots around the center of the scrollable container
    val customBringIntoViewSpec =
        object : BringIntoViewSpec {
            override fun calculateScrollDistance(
                offset: Float,
                size: Float,
                containerSize: Float,
            ): Float {
                val trailingEdgeOfItemRequestingFocus = offset + size
                val sizeOfItemRequestingFocus = abs(trailingEdgeOfItemRequestingFocus - offset)
                val childSmallerThanParent = sizeOfItemRequestingFocus <= containerSize
                val initialTargetForLeadingEdge =
                    containerSize / 2f - (sizeOfItemRequestingFocus / 2f)
                val spaceAvailableToShowItem = containerSize - initialTargetForLeadingEdge
                val targetForLeadingEdge =
                    if (
                        childSmallerThanParent &&
                            spaceAvailableToShowItem < sizeOfItemRequestingFocus
                    ) {
                        containerSize - sizeOfItemRequestingFocus
                    } else {
                        initialTargetForLeadingEdge
                    }
                return offset - targetForLeadingEdge
            }
        }
    // LocalBringIntoViewSpec will apply to all scrollables in the hierarchy.
    CompositionLocalProvider(LocalBringIntoViewSpec provides customBringIntoViewSpec) {
        LazyRow(modifier = Modifier.fillMaxWidth().wrapContentHeight()) {
            items(100) {
                var color by remember { mutableStateOf(Color.White) }
                Box(
                    modifier =
                        Modifier.size(100.dp)
                            .padding(4.dp)
                            .background(Color.Gray)
                            .onFocusChanged { color = if (it.isFocused) Color.Red else Color.White }
                            .border(5.dp, color)
                            .focusable(),
                    contentAlignment = Alignment.Center,
                ) {
                    Text(text = it.toString())
                }
            }
        }
    }
}
```