XML to JSON and DSL for ConstraintSet attributes
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.