This document discusses various animation techniques in Jetpack Compose like tween animations, spring animations and keyframe animations. It provides examples of implementing an animated circular progress bar, drop down menu, and splash screen. It also covers animation concepts like AnimationDpState, AnimationSpec and different effect handlers like disposable effects and launched effects that can be used to handle side effects in Compose.

1. This work is licensed under the Apache 2.0 License
LOOK THROUGH
THE VIEW

2. Camping Continues

3. This work is licensed under the Apache 2.0 License
● Constraint Layout
● Effect Handlers
● Simple Animations
● Designing a animated circular progress bar
and drop down menu
● Animated Splash Screen
Overview

4. This work is licensed under the Apache 2.0 License
Constraint Layout

5. This work is licensed under the Apache 2.0 License
Constraint layout is a
Viewgroup which allows
you to position and size
widgets in a flexible
way.
What is Constraint Layout ?

6. This work is licensed under the Apache 2.0 License
Dependencies

7. This work is licensed under the Apache 2.0 License

8. This work is licensed under the Apache 2.0 License

9. This work is licensed under the Apache 2.0 License
App bar
Image icon
Text

10. This work is licensed under the Apache 2.0 License
Various Configurations
● Parent.Top
● Parent.Bottom
● Parent.start
● Parent.end

11. Effect Handlers

12. Basic networkCall() example :-

13. This work is licensed under the Apache 2.0 License
On firing the button ,the function
networkCall
does some network calling operations
and we get a sample toast.
1 network call -> 1 minute
On N recomposition ,
N network call -> N minutes

14. This work is licensed under the Apache 2.0 License
Side Effect

15. This work is licensed under the Apache 2.0 License
A side effect is a change to the state of the app that
happens outside the scope of a composable function .
Due to composables’ life cycle and properties such as
unpredictable recomposition , executing
recompositions of composables in different orders or
recompositions that can be discarded , composables
should ideally be side effect free.
What is Side Effect ?

16. This work is licensed under the Apache 2.0 License
Side Effect scope

17. This work is licensed under the Apache 2.0 License
Disposable
Effect

18. This work is licensed under the Apache 2.0 License
What is Disposable Effect?
This effect is used when a cleanup of
memory usage is required. For side effects
that need to be cleaned up after the keys
changed or is the composable leaves the
composition, use disposable effect.

19. This work is licensed under the Apache 2.0 License
Disposable Effect

20. This work is licensed under the Apache 2.0 License
Launched Effect

21. What is Launched
Effect?
Whenever we are required to launch
suspend function inside a composable , we
use this effect. When a launched effect
enters the composition , it launches a
coroutine.
This work is licensed under the Apache 2.0 License

22. This work is licensed under the Apache 2.0 License

23. This work is licensed under the Apache 2.0 License
}
LaunchedEffect()
launches a
coroutine scope.

24. This work is licensed under the Apache 2.0 License

25. This work is licensed under the Apache 2.0 License
Animations

26. This work is licensed under the Apache 2.0 License
Jetpack Compose provides powerful
and extensible APIs that make it easy to
implement various animations in your
app's UI. There are different types of
animation like tween , spring etc that
user can use in the app.

27. This work is licensed under the Apache 2.0 License
It is basically an animation state holding the
dimension state. Whenever an animation gets
updated from one state to another, to perform
smooth basic animation transition ,
animationDpState helps significantly.
AnimationDpState

28. Without animateDpState

29. With animateDpState

30. This work is licensed under the Apache 2.0 License
Animation spec
AnimationSpec stores the specification of an animation
including the data type to be animated , the animation
configuration that will be used once the data has been
converted to Animation Vector.

31. This work is licensed under the Apache 2.0 License
Types of Animation
There are many types of animation styles
provided in Jetpack Compose like tween ,
spring etc .
These are defined for the AnimationSpec and
hence, gets applied to the view model.

32. This work is licensed under the Apache 2.0 License

33. Tween Animation

34. This work is licensed under the Apache 2.0 License
Spring Animation

35. This work is licensed under the Apache 2.0 License
KeyFrame Animation

36. This work is licensed under the Apache 2.0 License
Infinite Animation

37. This work is licensed under the Apache 2.0 License

38. This work is licensed under the Apache 2.0 License
Animated Circular Bar

39. This work is licensed under the Apache 2.0 License

40. This work is licensed under the Apache 2.0 License

41. This work is licensed under the Apache 2.0 License
Animated Drop
Down

42. This work is licensed under the Apache 2.0 License

43. This work is licensed under the Apache 2.0 License

44. This work is licensed under the Apache 2.0 License
Splash
Screen

45. This work is licensed under the Apache 2.0 License
An app splash screen is an introductory screen
that appears while your application loads in the
background. It basically shows welcome screen
or company logo that enhances user’s first
impression.

46. This work is licensed under the Apache 2.0 License
Jetpack Compose is Android’s advanced toolkit for
creating materialistic UI in a very simpler form. Here, this
is a basic welcome screen below.

47. This work is licensed under the Apache 2.0 License
Navigation Splashscreen

48. This work is licensed under the Apache 2.0 License
First the splashscreen animation
appears
then it directs to the main screen.

49. Now try out
something
yourself…..
This work is licensed under the Apache 2.0 License

50. This work is licensed under the Apache 2.0 License
THANK YOU
Have fun encouraging your community in becoming
Android Developers!
VOILA HAPPY CAMPING !!!