Skip to content
This repository was archived by the owner on Jul 11, 2025. It is now read-only.

Commit a7bf147

Browse files
objcodeobjcode
committed
readme for motionlayoutintegrations.
1 parent 9741396 commit a7bf147

4 files changed

Lines changed: 78 additions & 1 deletion

File tree

‎ConstraintLayoutExamples/motionlayoutintegrations/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Motion Layout Integrations samples
2+
3+
This sample showcases realistic animations built using `MotionLayout` in
4+
real-world settings.
5+
6+
It is recomended that you use Android Studio 4.0 or higher to view this sample
7+
to explore the animations in Motion Editor. For optimal experience, use Android
8+
Studio 4.2 or higher.
9+
10+
## ViewPagerIntegration
11+
Integrate with `ViewPager` to create a dynamic header that animates as the user
12+
swipes.
13+
14+
![Preview of View Pager integration](https://user-images.githubusercontent.com/119115/91504425-f3630700-e881-11ea-894e-f88704f8ce4d.gif)
15+
16+
This screen shows how to use a swipe event in another view to drive seekable
17+
animations in MotionLayout. It has a relatively simple animation, containing
18+
only two views, but by coordinating motion with user input it makes the screen
19+
engaging without adding a lot of code.
20+
21+
| File | Content |
22+
| ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
23+
| [Activity](src/main/java/com/example/androidstudio/motionlayoutintegrations/ViewPagerIntegration.kt) | Activity showing how to coordinate MotionLayout with ViewPager |
24+
| [layout](src/main/res/layout/activity_view_pager_integration.xml) | Layout with ViewPager and a MotionLayout |
25+
| [scene](src/main/res/xml/activity_view_pager_integration_scene.xml) | Scene to describe the animation with two states |
26+
27+
## Entrance
28+
29+
Build an entrance animation to play when the user enters a screen.
30+
31+
![Preview of Entrance animation](https://user-images.githubusercontent.com/119115/91504411-ea723580-e881-11ea-89f0-e46b6b04bc64.gif)
32+
33+
This example shows how to use `motion:autoTransition="animateToEnd"` to
34+
automatically progress animations through states. Visually it appears to be
35+
a single animation, but in code it's broken into four animations. For
36+
animations that play for a long time like this one, this can help break the
37+
animation into smaller pieces when developing. When viewed and edited in
38+
Motion Editor this structure makes it easier to work on just one part of the
39+
animation.
40+
41+
![Animation created from multiple constraint sets](https://user-images.githubusercontent.com/119115/91505778-48ece300-e885-11ea-8670-4068a0afc03a.png)
42+
> Animation is created by chaining multiple ConstraintSets
43+
44+
| File | Content |
45+
| ----------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
46+
| [Activity](src/main/java/com/example/androidstudio/motionlayoutintegrations/Entrance.kt) | Regular Activity (no extra code) |
47+
| [layout](src/main/res/layout/activity_entrance.xml) | Layout all Views used in this animation |
48+
| [scene](src/main/res/xml/activity_entrance_sceen.xml) | Scene containing multiple ConstraintSet and Transition |
49+
50+
## CollapsingToolbar
51+
Build a collapsing toolbar with support for insets using MotionLayout.
52+
53+
![Preview of Collapsing Toolbar animation](https://user-images.githubusercontent.com/119115/91504419-f0681680-e881-11ea-9143-fa3810c01abd.gif)
54+
55+
This example shows a complex custom collapsing toolbar built using
56+
MotionLayout. It shows how to use insets to set guidelines in a MotionLayout
57+
to avoid drawing under cutouts and display an animated systembar underlay.
58+
59+
It also shows how to integrate MotionLayout with a custom view which draws the
60+
circular coutouts and animates the background.
61+
62+
| File | Content |
63+
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
64+
| [Activity](src/main/java/com/example/androidstudio/motionlayoutintegrations/CollapsingToolbar.kt) | Integrate MotionLayout, CoordanatorLayout, and Custom View, and Insets |
65+
| [layout](src/main/res/layout/activity_collapsing_toolbar.xml) | Layout all Views used in this animation, including inset guidelines & custom view |
66+
| [scene](src/main/res/xml/activity_collapsing_toolbar_sceen.xml) | Scene showing how to integrate with custom views using CustomAttribute |

‎ConstraintLayoutExamples/motionlayoutintegrations/src/main/res/layout/activity_collapsing_toolbar.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
~ limitations under the License.
1616
-->
1717

18+
<!-- Use a CoordinatorLayout and AppBar to build a Collapsing Toolbar from MotionLayout -->
19+
<!-- See: https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout -->
20+
<!-- See: https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout-->
1821
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
1922
xmlns:app="http://schemas.android.com/apk/res-auto"
2023
android:layout_width="match_parent"

‎ConstraintLayoutExamples/motionlayoutintegrations/src/main/res/xml/activity_entrance_scene.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
2727
Each ConstraintSet uses deriveConstraintsFrom the previous constraint set to only specify the
2828
changes needed for the next KeyFrame.
29+
30+
The structure of this animation is best viewed and edited in the Motion
31+
Editor in Android Studio
2932
-->
3033
<ConstraintSet android:id="@+id/initial" >
3134
<Constraint

‎ConstraintLayoutExamples/motionlayoutintegrations/src/main/res/xml/activity_view_pager_integration_scene.xml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
motion:constraintSetEnd="@+id/end"
2424
motion:constraintSetStart="@+id/start">
2525
<KeyFrameSet>
26+
<!-- Add some curve from the first to second tab (framePosition: 0 to 50) -->
2627
<KeyPosition
2728
motion:motionTarget="@+id/ship_emoji"
2829
motion:keyPositionType="parentRelative"
@@ -39,6 +40,7 @@
3940
android:rotation="40"
4041
motion:framePosition="50"
4142
/>
43+
<!-- framePosition 50 describes the screen at the middle tab-->
4244
<KeyPosition
4345
motion:motionTarget="@+id/ship_emoji"
4446
motion:keyPositionType="parentRelative"
@@ -54,6 +56,7 @@
5456
</Transition>
5557

5658
<ConstraintSet android:id="@+id/start" >
59+
<!-- Rotate the ship_emoji and use bias to move it-->
5760
<Constraint
5861
android:id="@+id/ship_emoji"
5962
android:layout_width="wrap_content"
@@ -65,6 +68,7 @@
6568
motion:layout_constraintHorizontal_bias="0.07"
6669
motion:layout_constraintStart_toStartOf="parent"
6770
motion:layout_constraintTop_toTopOf="parent" />
71+
<!-- animate background from bottom constraint at start -->
6872
<Constraint
6973
android:id="@+id/background"
7074
android:layout_width="0dp"
@@ -75,6 +79,7 @@
7579
/>
7680
</ConstraintSet>
7781
<ConstraintSet android:id="@+id/end">
82+
<!-- Rotate the ship_emoji and use bias to move it-->
7883
<Constraint
7984
android:id="@+id/ship_emoji"
8085
android:layout_width="wrap_content"
@@ -86,7 +91,7 @@
8691
motion:layout_constraintHorizontal_bias="0.93"
8792
motion:layout_constraintStart_toStartOf="parent"
8893
motion:layout_constraintTop_toTopOf="parent" />
89-
94+
<!-- animate background to top constraint at end -->
9095
<Constraint
9196
android:id="@+id/background"
9297
android:layout_width="0dp"

0 commit comments

Comments
 (0)