Slides da minha palestra sobre Constraint Layout apresentada no Android Dev Conference 2017. Código-fonte disponível em: https://github.com/nglauber/ConstraintLayoutAndroidDevConf2017 São Paulo, 25 de Agosto de 2017.

1. Tudo que você precisa saber sobre
ConstraintLayout
+Nelson Glauber
@nglauber
www.nglauber.com.br

2. Android Layouts
• FrameLayout
• RelativeLayout
• LinearLayout
• TableLayout
• GridLayout
• e muitos outros…

3. Como você faria esse layout?

4. ConstraintLayout

5. ConstraintLayout
• Implementa o conceito de flat layout. Melhorando a
performance.
• É um mix dos demais layouts, com mais recursos.
• É muito mais fácil criar os layout utilizando visual editor.
Mas o XML continua legível.
• É uma biblioteca separada do S.O., o que facilita a
atualização
• A adoção por parte dos desenvolvedores iOS é facilitada.

6. ConstraintLayout
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta1'
}

7. Android Studio 3.0
1
2
3
4
5

8. Android Studio 3.0

9. Android Studio 3.0

10. Android Studio 3.0

11. Android Studio 3.0
Erros e melhorias
para seu layout
!

12. Convert to
ConstraintLayout

13. ConstraintLayout 1.0
• Posicionamento relativo
• Bias
• Guidelines
• Chains
• Ratio support
• ConstraintSet

14. Posicionamento
layout_constraintStart_toStartOf
layout_constraintStart_toEndOf
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
Y layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
X

15. Redimensionamento

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

17. Tamanho da View
wrap_content fixed size
match_constraint (0dp)

18. Bias

19. Gone Margin
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:text="Button 1"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_goneMarginTop="72dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button1"
app:layout_constraintTop_toTopOf="@+id/button1" />

20. Guidelines

21. Chains

22. Dimension Ratio
<android.support.constraint.ConstraintLayout ...>
<View
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CCC"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

23. ConstraintSet
val constraintLayout = ...
val set = ConstraintSet()
set.clone(constraintLayout)
set.clear(R.id.txt_title, ConstraintSet.START)
set.clear(R.id.txt_subtitle, ConstraintSet.START)
set.connect(R.id.txt_title, ConstraintSet.END,
ConstraintSet.PARENT_ID, ConstraintSet.END)
set.connect(R.id.txt_subtitle, ConstraintSet.END,
R.id.txt_title, ConstraintSet.END)
set.setHorizontalBias(R.id.btn_chain_1, 0f)
set.applyTo(constraintLayout)

24. DEMO TIME!!!

25. ConstraintLayout 1.1.0-beta1
• Barriers
• Group
• Placeholders
• Percent

26. Barriers

27. <android.support.constraint.ConstraintLayout...>
<TextView
android:id="@+id/textView1" ... />
<TextView
android:id="@+id/textView2” ... />
<android.support.constraint.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView1,textView2" />
<TextView
android:id="@+id/textView3"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/barrier1"
app:layout_constraintTop_toTopOf=“parent" .../>
</android.support.constraint.ConstraintLayout>

28. Group
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="textView2,textView1" />

29. Placeholder
<android.support.constraint.ConstraintLayout ...>
<Button
android:id="@+id/buttonA"... />
<Button
android:id="@+id/buttonB" ... />
<Button
android:id="@+id/buttonC" ... />
<android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:content="@+id/buttonC"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

30. Placeholder
class PlaceholderActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_placeholder)
buttonA.setOnClickListener(this::buttonClick)
buttonB.setOnClickListener(this::buttonClick)
buttonC.setOnClickListener(this::buttonClick)
}
private fun buttonClick(view: View) {
TransitionManager.beginDelayedTransition(constraintLayout)
placeholder.setContentId(view.id)
}
}

31. Percent (Finalmente! 😒)
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="@fraction/button_half" />
<fraction name="button_half">0.5</fraction>

32. Percent (Finalmente! 😒)
val params = buttonPercent.layoutParams as ConstraintLayout.LayoutParams
params.width = 0
params.matchConstraintDefaultWidth =
ConstraintLayout.LayoutParams.MATCH_CONSTRAINT_PERCENT
params.matchConstraintPercentWidth = 0.5f // 50%
buttonPercent.layoutParams = params

33. Referências
• https://www.youtube.com/watch?v=nYb4FUdlLZE
• https://androidstudio.googleblog.com/2017/05/
constraintlayout-110-beta-1-release.html
• http://androidkt.com/constraintlayout/
• https://constraintlayout.com/
• https://speakerdeck.com/rafaeltoledo/constraint-layout-um-
layout-para-a-todos-governar
• https://medium.com/@rafael_toledo/whats-new-in-constraint-
layout-1-1-x-f0bdd4dbdfb3

34. Dúvidas?

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