Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Animations in Jetpack Compose

 

 
Rasul Aghakishiyev
Android Software Engineer. Interested in mobile development. Learning Flutter.
Published: January 18, 2021
Tweet
Share
 

 

Animation in an application has a significant role because it helps to provide a better user experience and makes your application more attractive.

Jetpack Compose provides a nice API for creating animations in our application. We can do any type of animation, for example, alpha or scale animations. In this tutorial, we will learn how to create and use animations in Jetpack Compose

Let’s assume that we developing a news app, which shows us the latest news as a list. And we want every item in the list to slide in from the right side.

First, let’s create class ListItemAnimationDefinition that will contain our animation logic.

 

class ListItemAnimationDefinition(delay: Int = 0) {
val slideValue = DpPropKey(label = "offset")
}

 

delay — It will be used to delay our animation

slideValue — This property key defines a value that will be changed. It seems like ValueAnimation if you are familiar with it. It doesn’t have any information about UI and only updates the value passed to it.

 

Also, we should define our animation states. I will use the enum class, but you can use anything as you wish.

 

enum class ListItemAnimationState {
INITIAL,
FINAL
}

 

Then we should define transitionDefinition in ourListItemAnimationDefinition. In it, we will write animation logic for INITIAL and FINAL states

 

 

Let’s look at this code closely.

If the animation state is INITIAL, the slideValue equals 90.dp. And on stateFINAL our slideValue will be 0.dp.

The next part is most important, it defines how our animation will work. We use a tween animation type which accepts the next parameters:

 

durationMillis — The animation duration in millis
delayMillis — The amount of time that animation starts after
easing — The easing curve that will be used to interpolate between start and end

 

Also, Jetpack Compose provides many types of animation, you can read them there https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TransitionSpec

Now it’s time to connect our animation to UI

In our list item view looks like

 

 
@Composable
fun ItemCardView(index : Int) {val listItemAnimationDefinition = remember(index) {
        ListItemAnimationDefinition(300)
    }
val listItemTransition = transition(
        definition = listItemAnimationDefinition.definition,
        initState = ListItemAnimationState.INITIAL,
        toState = ListItemAnimationState.FINAL,
    )
    Card(
        modifier = Modifier
            .height(200.dp)
            .fillMaxWidth()
            .absoluteOffset(x = listItemTransition[listItemAnimationDefinition.slideValue])
    ) {
        Text(
            text = "I'm a card from Jetpack Compose",
            textAlign = TextAlign.Center
        )
    }
}

 

There we declaring our animation that will run from INITIAL state to FINAL state, and pass definition which indicates how our animation must work.

Also as we know recomposition happens many times in Jetpack Compose. So we will use remember to store our animation and use it when recomposition happens.

To animate our Card we will absoluteOffset function in our Modifier and pass to x argument our animated value

 

.absoluteOffset(x =listItemTransition[listItemAnimationDefinition.slideValue])

 

And that’s all. Let’s run our application and see the result.

 

Image for post

 

And that’s all. Let’s run our application and see the result.

 

Additional

You can also add alpha animation using FloatPropKey.

Just add new variable

 

val alphaValue = FloatPropKey(label = "alpha")

 

Sets alpha value at INITIAL and FINAL state

 

state(ListItemAnimationState.INITIAL) {
this[slideValue] = 90.dp
this[alphaValue] = 0.0f
}
state(ListItemAnimationState.FINAL) {
this[slideValue] = 90.dp
this[alphaValue] = 0.0f
}

 

Then, in transitionDefinition add following code

 

alphaValue using tween(
durationMillis = 400,
delayMillis = delay
)

 

Don’t forget add alpha modifier to your UI

 

.alpha(listItemTransition[listItemAnimationDefinition.slideValue])

 

Conclusion

Today we learned how to create and use animations in Jetpack Compose. Animations in Jetpack Compose is impressive because it allows creating beautiful UI animations very easily. I hope it will be useful for you.

Feel free to follow me on Twitter, also don’t hesitate to ask questions related to this.

Thanks for reading, and see you later!

 

 

 

Tags: Android, Jetpack Compose, Android App Development, AndroidDev, Animation

 

View original article at: 


 

Originally published: January 06, 2021

Android News
Compose CameraX on Android
Compose CameraX on Android

By Peng Jiang

Android new UI toolkit Jetpack compose is in beta now, which has all the features you need to build production-ready apps. CameraX is another Jetpack support library, which let you control the camera easier. As compose is still under development, lots of the views are still not available the compose way.

By ProAndroidDev -
Android News
Getting… your BottomSheetScaffold working on Jetpack Compose Beta 03
Getting… your BottomSheetScaffold working on Jetpack Compose Beta 03

By Carlos Mota

It’s Monday, no releases this week, and… there’s a new version of Jetpack Compose — beta 03—available. What a perfect time to just increment 02 to 03 and see what’s new. The API is (almost) final so after updating from alpha to beta there weren’t any big changes to do. However, and remember that’s still in development, there’s always something that I need to update. 

By ProAndroidDev -
Android News
Noisy Code With Kotlin Scopes
Noisy Code With Kotlin Scopes

By Chetan Gupta

Scopes make your code more readable? think again... You are going to encounter these scope functions namely let, run, apply, also, within every Kotlin codebase, along with all the mischievous ways developers exploit their usage from the way they were intended for. Let see how popular opinion on those ends up just as a code noise.

By ProAndroidDev -
Android News
Improving Android DataBinding with Bindables library
Improving Android DataBinding with Bindables library

By Jaewoong Eum

DataBinding is one of the most important factors for MVVM architecture. The basic concept of DataBinding is to link the view and view model via observer patterns, properties, event callbacks, etc. Linking and automating communication between the view via the bound properties or something in the view model has a lot of benefits in the MVVM architecture concept.

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One