Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-material3

Compose material3 OverScroll Shows in all 4 directions


I am using meterial3 with Compose . I found that all the Scrollable Composable Showing overscroll effect in all 4 directions regardless of scrolling direction. that goes for Column, LazyColumn, LazyVerticalGrid etc ..

I m not using anything custom to override overscroll effect. i can not figure out whats causing this behavior . i will add an example code below with LazyVerticalGrid which is causing this behavior . Since this is vertical grid it should show over scroll only vertically(to and bottom) but it also show it horizontally (left and right)..

Any direction on this will be appreciated.

@Composable
@Destination
fun FavoritesScreen(navigator: DestinationsNavigator) {
val favoritesViewModel: FavoritesViewModel = hiltViewModel()
val favoritesLiveData =
    favoritesViewModel.favoritesLiveData.observeAsState(initial = null)
if (favoritesLiveData.value != null) {
    if (favoritesLiveData.value!!.isEmpty()) {
      // Show empty view
    } else {
        LazyVerticalGrid(
            contentPadding = PaddingValues(
                12.dp,
                12.dp,
                12.dp,
                20.dp
            ),
            columns = GridCells.Fixed(2),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            item(span = { GridItemSpan(2) }) {
                Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
                Text(
                    text = stringResource(id = R.string.favorites),
                    style = MaterialTheme.typography.headlineMedium,
                    modifier = Modifier.padding(top = 20.dp)
                )
                ColumnSpacer(value = 10)
            }
            items(favoritesLiveData.value!!) { game ->
                // grid Item
            }
        }
    }
} 
}

Solution

  • You may need to update your Compose version. This was a known issue in Compose 1.3.0-alpha01, which was fixed subsequently.