Android button that uses morph animation to transform into circular progressbar. Easy way to make your application more responsive.
You can find library repository here. Example of usage here.
Transform view into another view using morph animation. You can also morph between two activities or fragments.
This is very nice looking effect that will help your user to better understand changes happening on the screen.
TransformationLayout uses MaterialContainerTransform from com.google.android.material:material package to achieve the effect.
You can find library repository here. Example of usage here.
You might consider using spring animation if you need physics based motion. You can customize spring's stiffness, damping ratio and its final position to achieve desired effect.
You can find documentation here. Example of usage here.
You can customize fling animation's friction and starting velocity. Friction force will be proportional to object's velocity.
You can find documentation here. Example of usage here.
android:animateLayoutChanges
flag is a great and easy way to breathe life into your application. You can use this flag on any ViewGroup.
Android framework will then automatically animate layout changes caused by any of the following actions:
- adding view
- removing view
- changing view visibility
- resizing view
You might also customize animation by modifying LayoutTransition object. Have in mind that this API is quite old and limited so you won't be able to achieve every effect you wish for.
You can find documentation here. Example of usage here.
Transition framework makes it easy to animate various changes in your application’s UI by simply providing the starting layout and the ending layout. You can describe what kind of animations you would like to use (fade in, fade out, translation) and the transition library will figure out how to animate from the starting layout to the ending layout. You can use transition framework to animate between activities or fragments. You might also animate simple layout changes. We can animate layout changes simply by calling
TransitionManager.beginDelayedTransition(layout)
//apply changes to layout
You might want to create custom transitions if required animation isn’t supported by one of the default transitions. You can do this by providing custom Transition object
val transition = TransitionSet().apply {
ordering = TransitionSet.ORDERING_SEQUENTIAL
addTransition(ChangeColor())
addTransition(Explode().addTarget(secondImageView))
addTransition(Fade().addTarget(imageView).setStartDelay(1000))
}
Have in mind that Transitions API has some limitations:
- Animations applied to SurfaceView or TextureView might not be displayed correctly.
- Classes extending AdapterView like ListView are incompatible with Transitions framework.
- If you resize widget with text then text will not be animated. It will just pop to the final location.
You can find documentation here. Example of usage here.
To animate between two layouts with Transitions framework you would use scenes API.
Steps needed to create animation:
- Create two Scene objects - one for the starting layout and second one for ending layout.
- Create Transition object. You customize animations and order.
- Invoke TransitionManager.go().
You can find documentation here. Example of usage here.
ConstraintSet lets you manipulate set of constraints of ConstraintLayout. You can combine manipulating constraint set with Transition API to achieve complex animations easily!
You can find documentation here. Example of usage here.
You can use Transitions API for activity transitions as well. You can provide enter and exit transitions. You can also specify transition for shared elements between two activities.
val options = ActivityOptions.makeSceneTransitionAnimation(this, androidRobotView, "robot")
startActivity(intent, options.toBundle())
Thanks to this, shared elements from one activity will seamlessly transition to second activity.
You can find documentation here. Example of usage here.
MotionLayout is a powerful layout that will let you create complex animations without single line of code. It's fully declarative - you define transitions and interactions in xml.
It's a subclass of ConstraintLayout. It uses underneath property animation framework and Transitions API.
You can find documentation here. Example of usage here.
You can see above debugging overlay. It will show you paths of widgets and will show animation frame rate.
You can enable it with app:motionDebug="SHOW_ALL"
.
We can control how animation progresses thanks to KeyFrameSet. MotionLayout support various keyframes:
- KeyPosition - specifies a view’s position during the motion sequence.
- KeyAttribute - specifies a view’s attribute value during the motion sequence.
- KeyCycle - adds oscillation to the animation. You can specify waveShape, waveOffset and wavePeriod.
- KeyTimeCycle - a keyframe that allows you to define a cycle driven by time instead of animation progress.
Common keyframes attributes:
- framePosition defines number of the frame (from 0 to 100).
- target defines which view should be modified.
It might be a little bit difficult to design complex animation with keyframes. Luckily you can use cycle editor
for that. It's a tool designed by Google developers that will let you to adjust key cycles in GUI environment.
You can find documentation here. Example of usage here.
Demonstration of what can be achieved with MotionLayout in few lines of code.
Example of usage here.
Sometimes it's very useful to animate icons. For example you may need to create progress bar animation consisting of several images or maybe you would like to create animation where one icon morphs into another. I have good news for you. You can delegate creating animation to your designer! This tool will generate drawable xml.
You can find documentation here. Example of usage here.
This layout can be used for many things but most often you will use it in combination with AppBarLayout to achieve complex toolbar animations.
You may also create your own custom behaviours that will dictate how CoordinatorLayout children interact with each other.
You might take a look at ShrinkBehaviour as a reference. It demonstrates how to create behaviour that will shrink you FAB
when bottom panel slides in. You can also create more complex behaviours - take a look at the SwipeToDismissBehaviour.
This example illustrates usage of ViewDragHelper, powerful class that makes detecting drag gestures much easier.
You can find CoordinatorLayout documentation here. Example of usage here.
Another popular use case with CoordinatorLayout is bottom sheet. Bottom sheet is a view that may be dragged by user to reveal its content.
Yow will achieve this effect by applying BottomSheetBehavior to a ViewGroup nested in CoordinatorLayout.
You can find documentation here. Example of usage here.