Custom scrollView (ObservableScrollView) in Jetpack Compose

I have a button that I show at the bottom of an image in my Box :

val scrollState = rememberScrollState()

Column(
        modifier = Modifier.verticalScroll(scrollState)
    ) {
        Box(
            modifier = Modifier.height(boxHeight)
        ) {
            Image(
                painter = rememberImagePainter(item.poster),
                contentDescription = null,
                modifier = Modifier
                    .align(Alignment.TopCenter)
                    .fillMaxWidth()
                    .clip(shape = MaterialTheme.shapes.medium)
                    .alpha(contentAlpha()),
                contentScale = ContentScale.Crop,
            )
            Button(
                onClick = sendNotification,
                shape = RoundedCornerShape(36.dp),
                modifier = Modifier
                    .width(126.dp)
                    .align(Alignment.BottomCenter)
                    .offset(y = 23.5.dp)

            ) {
                Text(text = "DeepLink")
            }
        }
    }

Button will scroll with the content as expected.

Is there any solution that button get scrolled up until bottom of ToolBar and not higher and when I scroll down, button get scrolled down at the bottom of image again? Same thing has been built by Roman Nurik as a custom ScrollView for xml layouts (ObservableScrollView) and not in Jetpack Compose.

There is Sticky headers. I guess it is useful in your case. More info click.

As well you can inspire this example click with custom sticky logic
enter image description here

Leave a Comment