ConstraintLayout
+Nelson Glauber
@nglauber
www.nglauber.com.br
@nglauber
+NelsonGlauber
www.nglauber.com.br
Android Layouts
• FrameLayout
• RelativeLayout
• LinearLayout
• TableLayout
• GridLayout
• PercentRelativeLayout
• PercentFrameLayout
• FlowBoxLayout
• entre outros…
ConstraintLayout
• Implementa o conceito de flat layout, ou seja, sem uma a
profunda hierarquia de layout. Com isso, a renderização fica mais
rápida, bem como o acesso às Views em tempo de execução.
• Você pode criar quase todos os seus arquivos de layouts usando
apenas o RelativeLayout e/ou LinearLayout. E o ConstraintLayout
é um mix dos dois, com mais recursos.
• É muito mais fácil criar os layout utilizando visual editor, para
iniciantes (e até designers) isso é ótimo.
• A adoção por parte dos desenvolvedores iOS é facilitada já que
eles já usam o conceito similar, tornando a curva de aprendizado
do Android menos acentuada.
Android Studio 3.0
Android Studio 3.0
ConstraintLayout
dependencies {
...
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
Convert to 

ConstraintLayout
Constraints
Constraints
layout_constraintTop_toTopOf 

layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf  

layout_constraintBottom_toBottomOf 
layout_constraintLeft_toTopOf  

layout_constraintLeft_toBottomOf
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf 
layout_constraintRight_toTopOf  

layout_constraintRight_toBottomOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf 
Y
X
Resizing
Positioning
Positioning
Parent constraint
Relative position
Positioning
Alignment constraint
Baseline alignment constraint
Auto-connect
View size
1. View size
2. Margin
3. Bias
View size
wrap_content fixed size
any size (layout_weight)
Inference
Adjust Margins
Guidelines
Chains
E no código?
val constraintLayout = findViewById(R.id.constraint_layout) as ConstraintLayout
val set = ConstraintSet()
set.clone(constraintLayout)
set.clear(R.id.txt_title, ConstraintSet.LEFT)
set.clear(R.id.txt_subtitle, ConstraintSet.LEFT)
set.connect(R.id.txt_title, ConstraintSet.RIGHT,
ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)
set.connect(R.id.txt_subtitle, ConstraintSet.RIGHT,
R.id.txt_title, ConstraintSet.RIGHT)
set.setHorizontalBias(R.id.btn_chain_1, 0f)
set.applyTo(constraintLayout)
@nglauber
+NelsonGlauber
www.nglauber.com.br
Obrigado!
Dúvida

Android Constraint Layout