Palestra sobre ConstraintLayout apresentada no meetup de Android do GDG Rio de Janeiro (25/05/2016). Assista a apresentação em: https://www.youtube.com/watch?v=GcOpTVdtjRU

1. ConstraintLayout
+Nelson Glauber
@nglauber
www.nglauber.com.br

2. @nglauber
+NelsonGlauber
www.nglauber.com.br

3. Android Layouts
• FrameLayout
• RelativeLayout
• LinearLayout
• TableLayout
• GridLayout
• PercentRelativeLayout
• PercentFrameLayout
• FlowBoxLayout
• entre outros…

4. 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.

5. Android Studio 3.0

6. Android Studio 3.0

7. ConstraintLayout
dependencies {
...
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

8. Convert to
ConstraintLayout

9. Constraints

10. 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

11. Resizing

12. Positioning

13. Positioning
Parent constraint
Relative position

14. Positioning
Alignment constraint
Baseline alignment constraint

15. Auto-connect

16. View size
1. View size
2. Margin
3. Bias

17. View size
wrap_content fixed size
any size (layout_weight)

18. Inference

19. Adjust Margins

20. Guidelines

21. Chains

22. 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)

23. @nglauber
+NelsonGlauber
www.nglauber.com.br
Obrigado!

24. Dúvida