Apply alpha after scrolling part of the screen in Jetpack Compose

Question

I have an Image as a background. I want that after scrolling up to 1.5x the height of the screen, the alpha value of the Composable start changing. his is the logic that seems correct to me:

val contentOffset = scrollView.contentOffset.y < 0.0 ? 0.0 : scrollView.contentOffset.y
val backgroundAlpha = (contentOffsetAbsolute / (screenHeight * 1.5))

However, I don't know how to get the screen size in Jetpack Compose, or check if it's already 1.5x of the screen size, and also how to manipulate the alpha of the image so that it starts to disappear.

Below, you can see the code in question and the image I have as a background:

        val list = mutableListOf<String>().apply {
            for (i in 0..1000) {
                add("Item $i")
            }
        }

        setContent {
        // Decorations omitted for question-readability 
                        Image(
                            painter = ...,                              
                            contentScale = ContentScale.Crop,                               
                            modifier = Modifier.fillMaxWidth()
                        )

                        LazyColumn {
                            items(list.size) { index ->
                                Text(text = list[index], modifier = Modifier.padding(20.dp))
                            }
         }

The following's the image, if it adds any significance to the question.

Is your question just how you get the screen dimensions? There's plenty of questions on that already present on the site. Also, that's a hella nice gradient! — Richard Onslow Roper, Sep 29 '22 at 15:16
@RichardOnslowRoper Thanks, I'll pass this message on to the designer xD As for your question, my question is how to make the logic to change the background alpha as I scroll — R0ck, Sep 29 '22 at 15:22

score 0 · Answer 1 · answered Sep 29 '22 at 14:29

0

Have you tried this?

val configuration = LocalConfiguration.current

val screenHeight = configuration.screenHeightDp.dp
val screenWidth = configuration.screenWidthDp.dp

or something like this?

Surface(
    modifier = Modifier.onGloballyPositioned { 
        
    }
) { //...// }

though I haven't tried using onGloballyPositioned{...} on a parent layout or a Surface yet

answered Sep 29 '22 at 14:29

z.g.y

5,512
4
10
36

What would I put inside onGlobalPositioned? – R0ck Sep 29 '22 at 15:23
You'll get something you can use to check a `composable` size from `onGloballyPositioned`, but I would recommend just doing the first approach – z.g.y Sep 30 '22 at 00:04
But how do I get the how much was scrolled? @z.y – R0ck Oct 03 '22 at 09:56
Compose provides `rememberLazyListState()` that you can supply to any type of `LazyList` and access scroll information, `val listState = rememberLazyListState() LazyColumn(state = listState) {...} `, also, please have a look at this post https://stackoverflow.com/questions/73333935/current-scroll-position-value-in-pixels-in-lazycolumn-jetpack-compose – z.g.y Oct 03 '22 at 10:09

Apply alpha after scrolling part of the screen in Jetpack Compose

1 Answers1