androidx.compose.foundation.gestures.snapping

---

Kotlin |Java

Common/All

Interfaces

SnapLayoutInfoProvider	Provides information about the layout that is using a snapFlingBehavior.	Cmn
SnapPosition	Describes the snapping positioning (i.e. final positioning after snapping animation finishes) of a given snap item in its containing layout.	Cmn

Classes

SnapFlingBehavior

This class is deprecated. Please use the snapFlingBehavior function

Cmn

Objects

SnapPosition.Center	Aligns the center of the item with the center of the containing layout.	Cmn
SnapPosition.End	Aligns the end of the item with the end of the containing layout.	Cmn
SnapPosition.Start	Aligns the start of the item with the start of the containing layout.	Cmn

Top-level functions summary

SnapLayoutInfoProvider	SnapLayoutInfoProvider(     lazyGridState: LazyGridState,     snapPosition: SnapPosition ) A SnapLayoutInfoProvider for LazyGrids.	Cmn
SnapLayoutInfoProvider	SnapLayoutInfoProvider(     lazyListState: LazyListState,     snapPosition: SnapPosition ) A SnapLayoutInfoProvider for LazyLists.	Cmn
TargetedFlingBehavior	@Composable rememberSnapFlingBehavior(     snapLayoutInfoProvider: SnapLayoutInfoProvider ) Creates and remember a FlingBehavior that performs snapping.	Cmn
FlingBehavior	@Composable rememberSnapFlingBehavior(     lazyGridState: LazyGridState,     snapPosition: SnapPosition ) Create and remember a FlingBehavior for decayed snapping in Lazy Grids.	Cmn
FlingBehavior	@Composable rememberSnapFlingBehavior(     lazyListState: LazyListState,     snapPosition: SnapPosition ) Create and remember a FlingBehavior for decayed snapping in Lazy Lists.	Cmn
TargetedFlingBehavior	snapFlingBehavior(     snapLayoutInfoProvider: SnapLayoutInfoProvider,     decayAnimationSpec: DecayAnimationSpec<Float>,     snapAnimationSpec: AnimationSpec<Float> ) A TargetedFlingBehavior that performs snapping to a given position in a layout.	Cmn

Top-level functions

SnapLayoutInfoProvider

Cmn

Artifact: androidx.compose.foundation:foundation

View Source

Added in 1.7.0-beta01

fun SnapLayoutInfoProvider(
    lazyGridState: LazyGridState,
    snapPosition: SnapPosition = SnapPosition.Center
): SnapLayoutInfoProvider

A SnapLayoutInfoProvider for LazyGrids.

Parameters
lazyGridState: LazyGridState	The LazyGridState with information about the current state of the grid
snapPosition: SnapPosition = SnapPosition.Center	The desired positioning of the snapped item within the main layout. This position should be considered with regards to the start edge of the item and the placement within the viewport.

Returns
SnapLayoutInfoProvider	A SnapLayoutInfoProvider that can be used with snapFlingBehavior

SnapLayoutInfoProvider

Cmn

Artifact: androidx.compose.foundation:foundation

View Source

Added in 1.7.0-beta01

fun SnapLayoutInfoProvider(
    lazyListState: LazyListState,
    snapPosition: SnapPosition = SnapPosition.Center
): SnapLayoutInfoProvider

A SnapLayoutInfoProvider for LazyLists.

Parameters
lazyListState: LazyListState	The LazyListState with information about the current state of the list
snapPosition: SnapPosition = SnapPosition.Center	The desired positioning of the snapped item within the main layout. This position should be considered with regard to the start edge of the item and the placement within the viewport.

Returns
SnapLayoutInfoProvider	A SnapLayoutInfoProvider that can be used with snapFlingBehavior

rememberSnapFlingBehavior

Cmn

Artifact: androidx.compose.foundation:foundation

View Source

Added in 1.3.0

@Composable
fun rememberSnapFlingBehavior(
    snapLayoutInfoProvider: SnapLayoutInfoProvider
): TargetedFlingBehavior

Creates and remember a FlingBehavior that performs snapping.

Parameters
snapLayoutInfoProvider: SnapLayoutInfoProvider	The information about the layout that will do snapping

rememberSnapFlingBehavior

Cmn

Artifact: androidx.compose.foundation:foundation

View Source

Added in 1.7.0-beta01

@Composable
fun rememberSnapFlingBehavior(
    lazyGridState: LazyGridState,
    snapPosition: SnapPosition = SnapPosition.Center
): FlingBehavior

Create and remember a FlingBehavior for decayed snapping in Lazy Grids. This will snap the item according to snapPosition.

Parameters
lazyGridState: LazyGridState	The LazyGridState from the LazyGrid where this FlingBehavior will be used.
snapPosition: SnapPosition = SnapPosition.Center	The desired positioning of the snapped item within the main layout. This position should be considered with regards to the start edge of the item and the placement within the viewport.

rememberSnapFlingBehavior

Cmn

Artifact: androidx.compose.foundation:foundation

View Source

Added in 1.7.0-beta01

@Composable
fun rememberSnapFlingBehavior(
    lazyListState: LazyListState,
    snapPosition: SnapPosition = SnapPosition.Center
): FlingBehavior

Create and remember a FlingBehavior for decayed snapping in Lazy Lists. This will snap the item according to snapPosition.

Parameters
lazyListState: LazyListState	The LazyListState from the LazyList where this FlingBehavior will be used.
snapPosition: SnapPosition = SnapPosition.Center	The desired positioning of the snapped item within the main layout. This position should be considered with regards to the start edge of the item and the placement within the viewport.

snapFlingBehavior

Cmn

Artifact: androidx.compose.foundation:foundation

View Source

Added in 1.7.0-beta01

fun snapFlingBehavior(
    snapLayoutInfoProvider: SnapLayoutInfoProvider,
    decayAnimationSpec: DecayAnimationSpec<Float>,
    snapAnimationSpec: AnimationSpec<Float>
): TargetedFlingBehavior

A TargetedFlingBehavior that performs snapping to a given position in a layout.

You can use SnapLayoutInfoProvider.calculateApproachOffset to indicate that snapping should happen after this offset. If the velocity generated by the fling is high enough to get there, we'll use decayAnimationSpec to get to that offset and then we'll snap to the next bound calculated by SnapLayoutInfoProvider.calculateSnapOffset using snapAnimationSpec.

If the velocity is not high enough, we'll use snapAnimationSpec to approach and the same spec to snap into place.

Please refer to the sample to learn how to use this API.

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val state = rememberLazyListState()

LazyRow(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    state = state,
    flingBehavior = rememberSnapFlingBehavior(lazyListState = state)
) {
    items(200) {
        Box(
            modifier = Modifier
                .height(400.dp)
                .width(200.dp)
                .padding(8.dp)
                .background(Color.Gray),
            contentAlignment = Alignment.Center
        ) {
            Text(it.toString(), fontSize = 32.sp)
        }
    }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.snapping.SnapLayoutInfoProvider
import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val state = rememberLazyListState()

// If you'd like to customize either the snap behavior or the layout provider
val snappingLayout = remember(state) { SnapLayoutInfoProvider(state) }
val flingBehavior = rememberSnapFlingBehavior(snappingLayout)

LazyRow(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    state = state,
    flingBehavior = flingBehavior
) {
    items(200) {
        Box(
            modifier = Modifier
                .height(400.dp)
                .width(200.dp)
                .padding(8.dp)
                .background(Color.Gray),
            contentAlignment = Alignment.Center
        ) {
            Text(it.toString(), fontSize = 32.sp)
        }
    }
}

Parameters
snapLayoutInfoProvider: SnapLayoutInfoProvider	The information about the layout being snapped.
decayAnimationSpec: DecayAnimationSpec<Float>	The animation spec used to approach the target offset when the fling velocity is large enough. Large enough means large enough to naturally decay.
snapAnimationSpec: AnimationSpec<Float>	The animation spec used to finally snap to the correct bound.