MotionLayout XML JSON DSL map

XML for MotionLayout works with a

• res/layout/layout_containing_motionlayout.xml
• res/xml/motion_scene.xml

MotionScene XML contains

<MotionScene>
 <Transition>
   <OnSwipe/>
   <OnClick/> - Not implemented in Compose
  <KeyFrameSet>
     <KeyAttribute/>
     <KeyPosition/>
     <KeyCycle/>
     <KeyTimeCycle/> - Not implemented in Compose
     <KeyTrigger/> - Not implemented in Compose
   </KeyFrameSet>
 </Transition>
<ConstraintSet>
<ViewTransition/> - Not implemented in Compose
<ConstraintSet/>
<include/>
</MotionScene>

Transition

XML	JSON	DSL	Example
android:id		transition(id, start, end) {}	"default" json dsl
constraintSetStart	to:	transition(id, start, end) {}	json dsl
constraintSetEnd	From:	transition(id, start, end) {}	json dsl
transitionDisable	TBD
layoutDuringTransition	N/A
autoTransition	TBD
motionInterpolator
duration	duration
staggered	staggered
transitionFlags	N/A
pathMotionArc	pathMotionArc:		json

OnSwipe

XML	JSON	DSL	Example
dragScale	scale:	OnSwipe(scale=
dragThreshold	threshold:	OnSwipe(springThreshold=
autoCompleteMode	mode:	OnSwipe(mode=
maxVelocity	maxVelocity:	TBD
maxAcceleration	maxAccel:	TBD
springMass	springMass:	TBD
springStiffness	springStiffness:	TBD
springDamping	springDamping:	TBD
springStopThreshold	stopThreshold:	TBD
springBoundary	springBoundary:	TBD
dragDirection	direction:	OnSwipe(direction=
touchAnchorId	anchor:	OnSwipe(anchor=
touchAnchorSide	side:	OnSwipe(side=
rotationCenterId	around:	TBD
touchRegionId	N/A	N/A
limitBoundsTo	limitBounds:	TBD
nestedScrollFlags	N/A	N/A
moveWhenScrollAtTop	N/A	N/A
onTouchUp	touchUp:	OnSwipe(onTouchUp=

OnClick: Not available

XML	JSON	DSL	Example
targetId
clickAction

KeyFrameSet

In XML KeyFrameSet is a container for:

• KeyPosition - Modifies the layout size & position
• KeyAttribute - Modifies the rendering Transform (scale, rotation etc.)
• KeyCycle - Modifies the rendering transform in a cyclic with respect to progress
• KeyTimeCycle - Modifies the rendering transform in cycles with respect to time
• KeyTrigger - Use to trigger callback and ViewTransitions

KeyPosition

JSON Syntax

{
  KeyFrames: {
    KeyPositions: [
      {
         target:   ['id1'],
         frames:   [25, 50, 75],
         percentX: [0.2, 0.5, 0.8],
         percentY: [0.2, 0.2, 0.8]
       }
     ],
  }
}

KeyPositions DSL examples

XML	JSON	DSL
keyPositionType	type:	keyPositions(){type=
percentX	percentX:	...ons(){frame(){percentX=
percentY	percentY:	...ons(){frame(){percentY=
percentWidth	percentWidth:	...ons(){frame(){percentWidth=
percentHeight	percentHeight:	...ons(){frame(){percentHeight=
framePosition	frames:	keyPositions(){frame(n)
motionTarget	target:	keyPositions(id){
transitionEasing	transitionEasing:	TBD
pathMotionArc	pathMotionArc	TBD
curveFit	curveFit:	...ons(){frame(){curveFit=
drawPath	N/A	N/A
sizePercent	Use sizeWidth & height	percentX= , percentX=

KeyAttribute

KeyAttribute DSL examples

XML	JSON	DSL
motionTarget	target:	keyAttributes(targets)
framePosition	frames:	...utes(){frame(fno){
transitionEasing	transitionEasing:	TBD
curveFit	curveFit:	TBD
motionProgress	N/A	N/A
android:alpha	alpha:	...utes(){frame(){alpha=
android:elevation	N/A	N/A
android:rotation	rotationZ:	...utes(){frame(){rotationZ=
android:rotationX	rotationX:	...utes(){frame(){rotationX=
android:rotationY	rotationY:	...utes(){frame(){rotationY=
android:transformPivotX	TBD	TBD
android:transformPivotY	TBD	TBD
transformPivotTarget	TBD	TBD
transitionPathRotate	TBD	TBD
android:scaleX	scaleX:	...utes(){frame(){rotationZ=
android:scaleY	scaleY:	...utes(){frame(){rotationZ=
android:translationX	translationX:	...utes(){frame(){rotationZ=
android:translationY	translationY:	...utes(){frame(){rotationZ=
android:translationZ	translationZ:	...utes(){frame(){rotationZ=

KeyCycle

KeyCycle DSL examples

XML	JSON	DSL
motionTarget	target:	KeyCycles(targets)
framePosition	frames:	...Cycles(){frame(fno){
waveShape	shape:	TBD
wavePhase	phase:	...cles(){frame(fno){phase=
wavePeriod	period:	...cles(){frame(fno){period=
waveOffset	offset:	...cles(){frame(fno){offset=
transitionEasing	transitionEasing:	TBD
curveFit	curveFit:	TBD
motionProgress	N/A	N/A
android:alpha	alpha:	...cles(){frame(fno){alpha=
android:elevation	N/A	N/A
android:rotation	rotationZ:	...cles(){frame(fno){rotationZ=
android:rotationX	rotationX:	...cles(){frame(fno){rotationX=
android:rotationY	rotationY:	...cles(){frame(fno){rotationY=
android:transformPivotX	N/A	N/A
android:transformPivotY	N/A	N/A
transformPivotTarget	N/A	N/A
transitionPathRotate	TBD	TBD
android:scaleX	scaleX:	...cles(){frame(fno){scaleX=
android:scaleY	scaleY:	...cles(){frame(fno){scaleYc=
android:translationX	translationX:	...cles(){frame(fno){translationX=
android:translationY	translationY:	...cles(){frame(fno){translationY=
android:translationZ	translationZ:	...cles(){frame(fno){translationZ=

KeyTimeCycle: Not implemented in Compose

XML	Example
waveShape
wavePhase
wavePeriod
waveOffset
framePosition
motionTarget
transitionEasing
curveFit
motionProgress
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:transformPivotX
android:transformPivotY
transformPivotTarget
transitionPathRotate
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ

KeyTrigger: Not implemented in Compose

XML	Example
framePosition
motionTarget
triggerReceiver
onNegativeCross
onPositiveCross
onCross
viewTransitionOnNegativeCross
viewTransitionOnPositiveCross
viewTransitionOnCross
triggerSlack
triggerId
motion_postLayoutCollision
motion_triggerOnCollision

ViewTransition: Not implemented in Compose

   <declare-styleable name="ViewTransition">
       <attr name="android:id" />
       <attr name="motionTarget" />
       <attr name="viewTransitionMode" />
       <attr name="onStateTransition" />
       <attr name="duration" />
       <attr name="upDuration" format="integer" />
       <attr name="transitionDisable" />
       <attr name="pathMotionArc" />
       <attr name="motionInterpolator" />
       <attr name="SharedValueId" format="reference"/>
       <attr name="SharedValue" format="integer"/>
       <attr name="setsTag" format="reference"/>
       <attr name="clearsTag" format="reference"/>
       <attr name="ifTagSet" format="reference"/>
       <attr name="ifTagNotSet" format="reference"/>
   </declare-styleable>

ConstraintSet

See ConstraintSet Table