Movies. App

Movies. is the sample preview app of the MotionLayout experiments.
This app realizes the InVision Studio — Movies app concept.

Result Update #1

Design	Code

• Added the relative transition change of the Movie carousel progress, and the Movie details bottom info progress.
• Added the relative transition change of the Movie carousel progress, and the Movie rating progress.
• Tuned some Movie carousel transitions values.
• Fixed the movie description transition.

Result

Design	Code

Features

• Advanced animation examples by only using the ConstraintLayout and MotionLayout APIs.
• The nested MotionLayouts are decorated as CustomViews. It is possible to have multiple MotionLayouts on the same screen and manipulate them in your own manner.
• The multiple Carousels relations and progress transitions examples.
• The examples of switching and propagating the progress between the transitions programmatically.
• Great staggered animation example and its REAL usage.

MotionLayout Advantages:

• Animates the default scenarios easily and with the advanced preview/editor.
• Possibility to decouple MotionLayouts into the nested ones (f.e. CustomView).
• The ImageFilterView is kinda of a cherry on top, across the MotionLayout helpers.
• Possibility to run different and nested MotionLayouts transitions simultaneously.
• Decouples the animation stuff from the code to the motion scene file.
• Ability to transition the custom views and their attributes.
• Staggered animations and their manipulation.

MotionLayout Disadvantages:

• The advanced animation cases currently hard to achieve, especially with the multitouch.
• The Carousel does not provide a quick solution, it is better to use ViewPager or RecyclerView.
• The MotionLabel is BUGGY/artifacty inside the transition and does not support the custom fonts.
• The multitouch support requires a lot of improvements. It is not possible to properly have vertical/horizontal swipe and clicks simultaneously.
• And again, Carousel with the swipe and click, is the functionality we lack.
• The NestedScrollView/nested scroll inside the transition is not working. It is better to use AppBar/ CollapsingToolbar.
• Sometimes MotionLayout draws some artifacts on quick transitions switch.
• Editor does not invalidate the cache, and it forces reloading Android Studio frequently.
• The ConstraintSet/Constraint overrides sometimes does not work properly, so it forces to rewrite the whole Constraint from the original state.
• Lack of functionality to properly set/switch between the transitions. Right now it works the best when you have one scene with one transition.
• It is not possible to extend the MotionLayout as the CustomView, because there is not such a method to set the scene programmatically. It forces to wrap the MotionLayout into the FrameLayout or other.
• It still in beta, so it requires the last beta/alpha Android Studio build.
• Lack of the possibility to chain/reference multiple/nested MotionLayouts. For example, if you want to animate the main transition and with it propagate the animation state to the others.

Summary

The MotionLayout is an amazing solution for simple and advanced screen animations. It works well for the single transition to the end and back, but when there are multiple transitions the problems could occur. It has the handy scene editor under the hood, so it is useful to test transitions inside the Android Studio. The other advantage of the MotionLayouts is the ability to decouple them into the CustomViews. Also, MotionLayout supports touch events, like click and swipe, but I would not recommend them right now, because it still buggy, especially inside the Carousel. The following helpers Carousel and MotionLabel are not worth it for now, because the API is not completed yet and they contain some real issues. On the other hand, the ImageFilterView and MotionEffect do the job properly. In my opinion, MotionLayout should be used for some stunning screen animations, where no touch events included, for example splash screen, tutorial screen, or dashboard screen.

Environment

This sample app uses the following ConstrainLayout version:

dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.1.0-beta02")
}

Also, this sample app requires a Android Studio Beta - Arctic Fox.

Credits

Special thanks to the Charles Patterson.

Author:

Basil Miller
[email protected]