Skip to content
This repository was archived by the owner on Dec 27, 2024. It is now read-only.

XML to JSON and DSL for ConstraintSet attributes

Shane Wong edited this page Oct 6, 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)
visibilityMode N/A
android:alpha alpha alpha = Visibility.kt (DSL)
android:elevation translationZ
android:rotation rotationZ rotationZ = Transforms.kt (DSL)
android:rotationX rotationY rotationY =
android:rotationY rotationX rotationX = Transforms.kt (DSL)
android:scaleX scaleX scaleX = CollapsibleToolbar.kt (DSL)
android:scaleY scaleY scaleY = CollapsibleToolbar.kt (DSL)
pivotAnchor TBD
android:transformPivotX pivotX pivotX = Transforms.kt (DSL)
test.kt (JSON)
android:transformPivotY pivotY pivotY = test.kt (JSON)
transformPivotTarget TBD
android:translationX translationX translationX = Transforms.kt (DSL)
android:translationY translationY translationY = Transforms.kt (DSL)
android:translationZ translationZ translationZ = Transforms.kt (DSL)
android:layout_width width height =
android:layout_height height height =
layout_constraintWidth width width =
layout_constraintHeight height height =
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 h/vGuideline createGuidelineFromStart()
createGuidelineFromTop()
createGuidelineFromAbsoluteLeft()
test.kt (DSL)
layout_constraintGuide_end h/vGuideline createGuidelineFromEnd()
createGuidelineFromBottom()
createGuidelineFromAbsoluteRight()
test.kt (DSL)
layout_constraintRight_toLeftOf right right.linkTo()
layout_constraintGuide_percent h/vGuideline createGuidelineFromStart()
createGuidelineFromTop()
createGuidelineFromAbsoluteLeft()
createGuidelineFromEnd()
createGuidelineFromBottom()
createGuidelineFromAbsoluteRight()
Guidelines.kt (DSL)
layout_constraintLeft_toLeftOf left left.linkTo()
layout_constraintLeft_toRightOf left left.linkTo()
layout_constraintRight_toRightOf left right.linkTo()
layout_constraintTop_toTopOf top top.linkTo()
layout_constraintTop_toBottomOf top top.linkTo()
layout_constraintBottom_toTopOf bottom bottom.linkTo()
layout_constraintBottom_toBottomOf bottom bottom.linkTo()
layout_constraintBaseline_toBaselineOf baseline baseline.linkTo()
layout_constraintBaseline_toTopOf baseline baseline.linkTo()
layout_constraintBaseline_toBottomOf baseline baseline.linkTo()
layout_constraintStart_toEndOf start start.linkTo()
layout_constraintStart_toStartOf start start.linkTo()
layout_constraintEnd_toStartOf end end.linkTo()
layout_constraintEnd_toEndOf end end.linkTo()
layout_goneMarginLeft left left.linkTo()*
layout_goneMarginTop top top.linkTo()*
layout_goneMarginRight right right.linkTo()*
layout_goneMarginBottom bottom bottom.linkTo()*
layout_goneMarginStart start start.linkTo()*
layout_goneMarginEnd end end.linkTo()*
layout_goneMarginBaseline baseline baseline.linkTo()*
layout_marginBaseline baseline baseline.linkTo()*
layout_constrainedWidth width width =
layout_constrainedHeight height height =
layout_constraintHorizontal_bias hBias linkTo()
layout_constraintVertical_bias vBias linkTo()
layout_constraintWidth_default width width =
layout_constraintHeight_default height height =
layout_constraintWidth_min width width =
layout_constraintWidth_max width width =
layout_constraintWidth_percent width width =
layout_constraintHeight_min height height =
layout_constraintHeight_max height height =
layout_constraintHeight_percent height height =
layout_constraintDimensionRatio height/width width = Dimension.value(100.dp)
height = Dimension.ratio("x:y")
Ratio.kt (DSL)
layout_constraintHorizontal_weight ??? horizontalChainWeight = Chains.kt (DSL)
layout_constraintVertical_weight ??? verticalChainWeight = Chains.kt (DSL)
layout_constraintHorizontal_chainStyle hChain createHorizontalChain() Chains.kt (DSL)
layout_constraintVertical_chainStyle vChain createVerticalChain() Chains.kt (DSL)
layout_wrapBehaviorInParent ???
barrierDirection v/hBarrier* createStartBarrier()
createAbsoluteLeftBarrier()
createTopBarrier()
createEndBarrier()
createAbsoluteRightBarrier()
createBottomBarrier()
Barriers.kt (DSL)
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 horizontalStyle = [first, middle, last] FlowDemo2.kt (JSON)
flow_lastHorizontalStyle hStyle horizontalStyle = [first, middle, last] FlowDemo2.kt (JSON)
flow_verticalStyle vStyle verticalStyle = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_firstVerticalStyle vStyle verticalStyle = [first, middle, last] FlowDemo2.kt (JSON)
flow_lastVerticalStyle vStyle verticalStyle = [first, middle, last] FlowDemo2.kt (JSON)
flow_horizontalBias hBias/hFlowBias horizontalFlowBias = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_firstHorizontalBias hBias horizontalFlowBias = [first, middle, last]
flow_lastHorizontalBias hBias horizontalFlowBias = [first, middle, last]
flow_verticalBias vBias/vFlowBias verticalFlowBias = FlowDslDemo.kt (DSL)
FlowDemo2.kt (JSON)
flow_firstVerticalBias vBias
flow_lastVerticalBias vBias
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 height: { max: 300 } DslTest.java (JSON)
android:maxWidth width: { max: 300 } DslTest.java (JSON)
android:minHeight height: { min: 300 }
android:minWidth width: { min: 300 } VTest02.kt (JSON)
barrierAllowsGoneWidgets v/hBarrier* createStartBarrier*
chainUseRtl Not implemented createHorizontalChain()
animateRelativeTo MotionLayout*
animateCircleAngleTo MotionLayout*
transitionEasing MotionLayout*
pathMotionArc MotionLayout*
polarRelativeTo MotionLayout*
transitionPathRotate MotionLayout*
drawPath MotionLayout*
motionProgress Not implemented
layout_constraintTag code only
motionStagger MotionLayout*
quantizeMotionSteps MotionLayout*
quantizeMotionPhase MotionLayout*
quantizeMotionInterpolator MotionLayout*
1* - By convention helpers will be explicitly vertical or horizontal (vBarrier or hBarrier)
2* - The id is usually the label 
MotionLayout* - These features of MotionLayout are not implemented.
Clone this wiki locally