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
constraintSetStart	to:
constraintSetEnd	From:
transitionDisable	TBD
layoutDuringTransition	N/A
autoTransition	TBD
motionInterpolator
duration	duration
staggered	staggered
transitionFlags	N/A
pathMotionArc	pathMotionArc:

OnSwipe

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

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]
       }
     ],
  }
}

XML	JSON	DSL	Example
keyPositionType	type:
percentX	percentX:
percentY	percentY:
percentWidth	percentWidth:
percentHeight	percentHeight:
framePosition	frames:
motionTarget	target:
transitionEasing	transitionEasing:
pathMotionArc	pathMotionArc
curveFit	curveFit:
drawPath	N/A
sizePercent	Use sizeWidth & height

KeyAttribute

XML	JSON	DSL	Example
framePosition	frames:
motionTarget	target:
transitionEasing	transitionEasing:
curveFit	curveFit:
motionProgress	N/A
android:alpha	alpha:
android:elevation	N/A
android:rotation	rotationZ:
android:rotationX	rotationX:
android:rotationY	rotationY:
android:transformPivotX	N/A
android:transformPivotY	N/A
transformPivotTarget	N/A
transitionPathRotate	N/A
android:scaleX	scaleX:
android:scaleY	scaleY:
android:translationX	translationX:
android:translationY	translationY:
android:translationZ	translationZ:

KeyCycle

XML	JSON	DSL	Example
waveShape	shape:
wavePhase	phase:
wavePeriod	period:
waveOffset	offset:
framePosition	frames:
motionTarget	target:
transitionEasing	transitionEasing:
curveFit	curveFit:
motionProgress	N/A
android:alpha	N/A
android:elevation	N/A
android:rotation	rotationZ:
android:rotationX	rotationX:
android:rotationY	rotationY:
android:transformPivotX	N/A
android:transformPivotY	N/A
transformPivotTarget	N/A
transitionPathRotate	N/A
android:scaleX	scaleX:
android:scaleY	scaleY:
android:translationX	translationX:
android:translationY	translationY:
android:translationZ	translationZ:

KeyTimeCycle: Not implemented in Compose

XML	JSON	DSL	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	JSON	DSL	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 separate page on on ConstraintSet