Animating Image Size While Scrolling

Photo by Jatniel Tunon on Unsplash

Animations are a vital part of any application which you build as it helps the user to smoothly navigate around the app.

Animations have always been a complex topic in android but with jetpack compose it is much more easy and intuitive.

As they say Jetpack Compose moves the bar on animations from ‘polish, if we have the time’ to ‘so easy there’s no reason to not do it’.

Preview of the Animation we will be building today.

1. Include Dependency

Add the Coil Image Library Gradle dependency to show the image in your app.

Make sure to add the latest coil library version (in my case it is 1.3.2). You can check the latest version here.

2. Adding Permissions

Add the Internet Permission to get the image from the internet. (You can also use an image from your drawable for which you don’t have to add this permission.)

3. Create a Data Class

Create a data class for the data of the individual items of the Scrollable Column.

Function to draw a single list item of the scrollable list.

4. Animating the Image

Here we have to change the size and corner radius of the image based on whether the user is scrolling the list upwards, downwards, or not at all.

For that, we have to access a callback when the user starts to scroll the list.

LazyListState: It is a state object that can be hoisted to control and observe scrolling.

LazyListState gives us the information regarding whether the user has scrolled the list, which is the first visible item, etc.

In most cases, this will be created via rememberLazyListState.

Here we will be animating the image when the user scrolls upwards (i.e. first item is not visible) and back to the original image, when the user scrolls downwards (i.e. first item is visible).

We can create a transition object based on the logic of the animation we want (here i.e. listState.firstVisibleItemIndex != 0) and can call animate objects on it like animateDp or animateInt to change the parameter of our image modifier.

Every time the value of the user scrolls the list (i.e. the value of listState changes), our image will animate.

• We can use the rememberImagePainter function to create an ImagePainter that can be drawn by the Image composable:
• ImagePainter manages the asynchronous image request and handles drawing the placeholder/success/error drawables.
• Read more about ContentScale.
• Passing the listState to the state parameter of the LazyColumn ensures that any update to the state of the column will update the listState variable state.

Here is the full code for the project.

GitHub - pundirAbhishek/ImageSizeAnimation-Compose

Next time we will look at some other topics in jetpack compose.

Till the Happy Composing!