Blog Infos
Author
Published
Topics
Published

 

Source: webflow.com

 

Few years back I wrote an article on creating parallax using ScrollView from XML view here. In this article we’ll do the same but using Jetpack Compose.

 

End Result

 

Creating parallax effect is fairly simple in compose. We track the scroll state of our scroller and changes the speed of translation of the views we want the parallax on. So let’s begin.

 

Firstly, we’ll create parallax using a Column. Column provides vertical arrangement for view hierarchy but aren’t scrollable. To make them scroll, we simply provide it a scrolling state as follows

val scrollState = rememberScrollState()
Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(scrollState),
)

Because we’re scrolling vertically so verticalScroll. We remember the scrolling state and hence whichever view will be reading this value will recompose itself accordingly.

In the demo video, it is shown that we’re parallaxing both the tiger image and the header bar. So let’s do it one by one.

Image Parallax

We’ve a column in which we’ve an image and a scrollable long text.

@Composable
fun ImageParallaxScroll() {
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp)
                .background(Color.White),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painterResource(id = R.drawable.ic_tiger),
                contentDescription = "tiger parallax",
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
        }
        Text(
            text = stringResource(R.string.dummy_text),
            modifier = Modifier.background(
                Color.White
            ),
            style = TextStyle(
                fontSize = 24.sp
            )
        )
    }
}

The above code will give us image and text but both scrollable at same speed.

Now to make the image move slower than the text, we simply modify the Y translation of the image as follows

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(500.dp)
        .background(Color.White)
        .graphicsLayer {
           translationY = 0.5f * scrollState.value
        },
    contentAlignment = Alignment.Center
)

Using graphicsLayer has the advantage of redrawing only the affected part of the view than recomposing the whole composable. Here we’ve translated Y movement by half of actual scroll.

Bamn! Tiger is parallaxed. But wait, let’s also fades it along by updating its alpha value too as follows

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(500.dp)
        .background(Color.White)
        .graphicsLayer {
            alpha = 1f - ((scrollState.value.toFloat() / scrollState.maxValue) * 1.5f)
            translationY = 0.5f * scrollState.value
        },
    contentAlignment = Alignment.Center
)

In case of alpha, we calculate the scroll ratio and because the ratio could be very small initially (depending on the scroll height), we magnify it 1.5 times for each value and by trial and error and 1.5 works well for me. You can try with different values. But it gives us the desired result.

Job Offers

Job Offers


    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Kotlin Multiplatform Mobile Developer

    Touchlab
    Remote
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Branching out to Jetpack Compose

As one of the most widely used social media platforms, Twitter is always hunting for ways to better connect its users. In early 2021 the Client UI team at Twitter began the task of integrating…
Watch Video

Branching out to Jetpack Compose

Nacho López & Chris Banes
Staff Software Engineer
Twitter

Branching out to Jetpack Compose

Nacho López & Chr ...
Staff Software Engin ...
Twitter

Branching out to Jetpack Compose

Nacho López & C ...
Staff Software Engineer
Twitter

Jobs

Header Bar Parallax

Now in the demo video, we also noticed that the visibility of the header bar changes with scroll movement. So let’s do that too.

@Composable
fun HeaderBarParallaxScroll() {
    val scrollState = rememberScrollState()
    Box {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .verticalScroll(scrollState),
        ) {
            ...
        }

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(Color.Yellow),
            contentAlignment = Alignment.CenterStart
        ) {
            Text(
                text = "Header bar",
                modifier = Modifier.padding(horizontal = 16.dp),
                style = TextStyle(
                    fontSize = 24.sp,
                    fontWeight = FontWeight.W900,
                    color = Color.Black
                )
            )
        }
    }
}

We use the same composable but we add a new header bar box over the column as shown above. But initially the header bar will be completely visible. We want that is should be hidden and appears as with scroll up movement.

Box(
    modifier = Modifier
        .alpha(min(1f, (scrollState.value.toFloat() / scrollState.maxValue) * 5f))
        .fillMaxWidth()
        .height(60.dp)
        .background(Color.Yellow),
    contentAlignment = Alignment.CenterStart
)

So we simply apply the alpha value on the box modifier as per the scroll state. Again the scroll ratio could be small so we magnified it 5 times for each value and it works well. You can play around with different values too.

Bamn! Now everything is working as expected. So overall having parallax effect in compose is pretty straightforward.

You can check out the gist for both the composables here and here.

Hope it’ll help!

Until next time…

Cheers!

This article was originally published on proandroiddev.com on June 12, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu