Skip to content

XML to JSON and DSL for ConstraintSet attributes

Jump to bottom
Shane Wong edited this page Oct 28, 2022 · 23 revisions

XML for ConstraintSet has many attributes because of the way XML works. Many of them have been combined for example android:layout_width, layout_constraintWidth, layout_constrainedWidth, layout_constraintWidth_min, layout_constraintWidth_max, layout_constraintWidth_percent, and layout_constraintDimensionRatio are all combined in width:

{
  width: 23,
  width: 'spread',
  width: { value: 'wrap', max: 300 }
}
XML JSON DSL Example
android:orientation 1*
android:id 2* createRefFor(...)
android:visibility visibility visibility = Visibility.kt (DSL)
test.kt (JSON)
visibilityMode N/A
android:alpha alpha alpha = Visibility.kt (DSL)
test.kt (JSON)
android:rotation rotationZ rotationZ = Transforms.kt (DSL)
test.kt (JSON)
android:rotationX rotationX rotationX = Transforms.kt (DSL)
VTest02.kt (JSON)
android:rotationY rotationY rotationY = MotionCarouselDemos.kt (DSL)
VTest02.kt (JSON)
android:scaleX scaleX scaleX = CollapsibleToolbar.kt (DSL)
test.kt (JSON)
android:scaleY scaleY scaleY = CollapsibleToolbar.kt (DSL)
test.kt (JSON)
pivotAnchor TBD
android:transformPivotX pivotX pivotX = Transforms.kt (DSL)
test.kt (JSON)
android:transformPivotY pivotY pivotY = MISSING (DSL)
test.kt (JSON)
transformPivotTarget TBD
android:translationX translationX translationX = Transforms.kt (DSL)
test.kt (JSON)
android:translationY translationY translationY = Transforms.kt (DSL)
CyclesDemo.kt (JSON)
android:translationZ translationZ translationZ = Transforms.kt (DSL)
test.kt (JSON)
android:elevation translationZ elevation = MotionStatesExample.kt (DSL)
test.kt (JSON)
android:layout_width width Modifier.width()
Modifier.fillMaxWidth()
Modifier.fillMaxSize()		 AttributesDemo.kt (DSL)
N/A (JSON)
android:layout_height height Modifier.height()
Modifier.fillMaxHeight()
Modifier.fillMaxSize()		 AttributesDemo.kt (DSL)
N/A (JSON)
layout_constraintWidth Deprecated Deprecated
layout_constraintHeight Deprecated Deprecated
android:layout_marginStart start start.linkTo() Chains.kt (DSL)
test.kt (JSON)
android:layout_marginBottom bottom bottom.linkTo() Chains.kt (DSL)
test.kt (JSON)
android:layout_marginTop top top.linkTo() Chains.kt (DSL)
test.kt (JSON)
android:layout_marginEnd end end.linkTo() Chains.kt (DSL)
test.kt (JSON)
android:layout_marginLeft left left.linkTo() BarrierTest01.kt (JSON)
android:layout_marginRight right right.linkTo() BarrierTest01.kt (JSON)
layout_constraintCircle circular circular() test4.kt (DSL)
test.kt (JSON)
layout_constraintCircleRadius circular circular() test4.kt (DSL)
test.kt (JSON)
layout_constraintCircleAngle circular circular() test4.kt (DSL)
test.kt (JSON)
layout_constraintGuide_begin type: 'h/vGuideline' createGuidelineFromStart()
createGuidelineFromTop()
createGuidelineFromAbsoluteLeft()		 test.kt (DSL)
VTest.kt (JSON)
layout_constraintGuide_end type: 'h/vGuideline' createGuidelineFromEnd()
createGuidelineFromBottom()
createGuidelineFromAbsoluteRight()		 test.kt (DSL)
VTest.kt (JSON)
layout_constraintGuide_percent type: 'h/vGuideline' createGuidelineFromStart()
createGuidelineFromTop()
createGuidelineFromAbsoluteLeft()
createGuidelineFromEnd()
createGuidelineFromBottom()
createGuidelineFromAbsoluteRight()		 Guidelines.kt (DSL)
DslTest.java (JSON)
layout_constraintLeft_toLeftOf left absoluteLeft.linkTo() (?) rtl.kt (DSL)
VTest02.kt (JSON)
layout_constraintLeft_toRightOf left absoluteLeft.linkTo() (?) MISSING (DSL)
FlowDemo.kt (JSON)
layout_constraintRight_toRightOf right absoluteRight.linkTo() (?) MISSING (DSL)
VTest02.kt (JSON)
layout_constraintRight_toLeftOf right absoluteRight.linkTo() (?) MISSING (DSL)
MISSING (JSON)
layout_constraintTop_toTopOf top top.linkTo() test.kt (DSL)
test.kt (JSON)
layout_constraintTop_toBottomOf top top.linkTo() test.kt (DSL)
test.kt (JSON)
layout_constraintBottom_toTopOf bottom bottom.linkTo() test.kt (DSL)
test.kt (JSON)
layout_constraintBottom_toBottomOf bottom bottom.linkTo() test.kt (DSL)
test.kt (JSON)
layout_constraintBaseline_toBaselineOf baseline baseline.linkTo() MotionModifierListDemo.kt (DSL)
MISSING (JSON)
layout_constraintBaseline_toTopOf baseline baseline.linkTo() MISSING (DSL)
VTest02.kt (JSON)
layout_constraintBaseline_toBottomOf baseline baseline.linkTo() MISSING (DSL)
MISSING (JSON)
layout_constraintStart_toEndOf start start.linkTo() MotionModifierListDemo.kt (DSL)
MotionComposeExamples.kt (JSON)
layout_constraintStart_toStartOf start start.linkTo() MotionModifierListDemo.kt (DSL)
MotionComposeExamples.kt (JSON)
layout_constraintEnd_toStartOf end end.linkTo() MotionModifierListDemo.kt (DSL)
MotionComposeExamples.kt (JSON)
layout_constraintEnd_toEndOf end end.linkTo() MotionModifierListDemo.kt (DSL)
MotionComposeExamples.kt (JSON)
layout_goneMarginLeft left left.linkTo()* MISSING (DSL)
test.kt (JSON)
layout_goneMarginTop top top.linkTo()* Chains.kt (DSL)
DslTest.java (JSON)
layout_goneMarginRight right right.linkTo()* MISSING (DSL)
DslTest.java (JSON)
layout_goneMarginBottom bottom bottom.linkTo()* Chains.kt (DSL)
DslTest.java (JSON)
layout_goneMarginStart start start.linkTo()* Chains.kt (DSL)
DslTest.java (JSON)
layout_goneMarginEnd end end.linkTo()* Chains.kt (DSL)
test.kt (JSON)
layout_goneMarginBaseline baseline baseline.linkTo()* MISSING (DSL)
MISSING (JSON)
layout_marginBaseline baseline baseline.linkTo()* MISSING (DSL)
VTest02.kt (JSON)
layout_constrainedWidth (?) width width = test.kt (DSL)
MISSING (JSON)
layout_constrainedHeight (?) height height = preferWrap.kt (DSL)
MISSING (JSON)
layout_constraintHorizontal_bias hBias linkTo() CardSample.kt (DSL)
VTest02.kt (JSON)
layout_constraintVertical_bias vBias linkTo() PreferWrap.kt (DSL)
VTest02.kt (JSON)
layout_constraintWidth_default (?) width width = (DSL)
(JSON)
layout_constraintHeight_default (?) height height = (DSL)
(JSON)
layout_constraintWidth_min (?) width width = Dimension
.fillToConstraints.atLeast()		 MISSING (DSL)
VTest02.kt (JSON)
layout_constraintWidth_max (?) width width = Dimension
.fillToConstraints.atMost()		 Dimensions.kt (DSL)
VTest02.kt (JSON)
layout_constraintWidth_percent width width = MISSING (DSL)
MISSING (JSON)
layout_constraintHeight_min (?) height height = Dimension
.fillToConstraints.atLeast()		 MISSING (DSL)
MISSING (JSON)
layout_constraintHeight_max (?) height height = Dimension
.fillToConstraints.atMost()		 Dimensions.kt (DSL)
MISSING (JSON)
layout_constraintHeight_percent height height = Dimensions.kt (DSL)
MISSING (JSON)
layout_constraintDimensionRatio height/width width = Dimension.value(100.dp)
height = Dimension.ratio("x:y")		 Ratio.kt (DSL)
MISSING (JSON)
layout_constraintHorizontal_weight hBias horizontalChainWeight = Chains.kt (DSL)
test.kt (JSON)
layout_constraintVertical_weight vBias verticalChainWeight = Chains.kt (DSL)
test.kt (JSON)
layout_constraintHorizontal_chainStyle type: 'hChain' createHorizontalChain() Chains.kt (DSL)
DslTest.java (JSON)
layout_constraintVertical_chainStyle type: 'vChain' createVerticalChain() Chains.kt (DSL)
DslTest.java (JSON)
layout_wrapBehaviorInParent ???
barrierDirection type: 'barrier'
direction: 'start'		 createStartBarrier()
createAbsoluteLeftBarrier()
createTopBarrier()
createEndBarrier()
createAbsoluteRightBarrier()
createBottomBarrier()		 Barriers.kt (DSL)
Barriers.kt (JSON)
barrierAllowsGoneWidgets v/hBarrier* createStartBarrier* N/A(?)
flow_wrapMode wrap wrapMode = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
orientation (Flow) type flowVertically = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_horizontalStyle hStyle horizontalStyle = FlowDslDemo.kt (DSL)
FlowDemo2.k (JSON)
flow_firstHorizontalStyle hStyle MISSING first last FlowDemo2.kt (JSON)
flow_lastHorizontalStyle hStyle MISSING first last FlowDemo2.kt (JSON)
flow_verticalStyle vStyle verticalStyle = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_firstVerticalStyle vStyle MISSING first last FlowDemo2.kt (JSON)
flow_lastVerticalStyle vStyle MISSING first last FlowDemo2.kt (JSON)
flow_horizontalBias hBias/hFlowBias horizontalFlowBias = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_verticalBias vBias/vFlowBias verticalFlowBias = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_horizontalGap hGap horizontalGap = FlowDslDemo.kt (DSL)
FlowDemo.kt (JSON)
flow_verticalGap vGap verticalGap = FlowDslDemo.kt (DSL)
FlowDemo.kt (JSON)
flow_horizontalAlign hAlign horizontalAlign = FlowDemo4.kt (JSON)
flow_verticalAlign vAlign verticalAlign = FlowDemo4.kt (JSON)
flow_maxElementsWrap maxElement maxElement = FlowDslDemo.kt (DSL)
FlowDemo4.kt (JSON)
constraint_referenced_ids contains FlowDslDemo.kt (DSL)
FlowDemo.kt (JSON)
constraint_referenced_tags
android:maxHeight (DSL)
(JSON)
android:maxWidth (DSL)
(JSON)
android:minHeight (DSL)
(JSON)
android:minWidth (DSL)
(JSON)
chainUseRtl Not implemented createHorizontalChain()
animateRelativeTo. motion:{ relativeTo: 'id' } MISSING (DSL)
ConstraintMotionProps.kt (JSON)
animateCircleAngleTo MotionLayout* (DSL)
(JSON)
transitionEasing motion {
easing: 'overshoot' }		 MISSING (DSL)
ConstraintMotionProps.kt (JSON)
pathMotionArc motion {
pathMotionArc:		 LaMotion.kt (DSL)
AttributesDemo.kt (JSON)
polarRelativeTo motion:{
relativeTo: 4}		 (DSL)
(JSON)
motionPathRotate motion:{ } (DSL)
(JSON)
transitionPathRotate motion:{
????: 4}		 (DSL)
(JSON)
drawPath MotionLayout( debug =... , ) MISSING (DSL)
Demo3.kt (JSON)
motionProgress Not implemented MotionLayout( progress = 0.4f, ) test.kt (DSL)
MISSING (JSON)
layout_constraintTag code only (DSL)
(JSON)
motionStagger motion:{
stagger: 4}		 MISSING (DSL)
ConstraintMotionProps.kt (JSON)
quantizeMotionSteps (?) motion:{
quantize: [steps, easing, phase]}		 MISSING (DSL)
test.kt (JSON)
quantizeMotionPhase (?) motion:{ quantize: int } (DSL)
ConstraintMotionProps.kt (JSON)
quantizeMotionInterpolator motion:{
quantize: [steps, easing, phase]}		 (DSL)
ConstraintMotionProps.kt (JSON)		 
1* - By convention helpers will be explicitly vertical or horizontal (vChain or hChain)
2* - The id is usually the label 
MotionLayout* - These features of MotionLayout are not implemented.
Clone this wiki locally