Cool Constraint Layout

In this Talk I have explained the basic of ConstraintLayout and go to guide of how to use it in your app. Along with that I have covered some of the feature that are in the beta phase of the Constraint Layout

Sample project - https://github.com/PrathameshKesarkar/ConstraintLayoutMeetupExample

Transcript

1. Cool Constraint Layout Prathamesh Kesakar @rookiepatty
3. The First Rule of Constraint Layout Constraint are needed in either direction( left|right) and (top|bottom)
4. Adding Constraint using Visual Editor <ImageView android:id="@+id/image" ... app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" />
5. What Happens? When you don’t add any constraint
6. The Second Rule of Constraint Layout There is no “match_parent” spoiler alert: you do this with “0dp”
7. Change View Behaviour in Layout Editor <TextView android:id="@+id/name" android:layout_width="0dp|wrap_content |56dp" android:layout_height="wrap_content" android:text="Volcano Smoke " … />
8. Bias in Constraint Layout
9. Setting Bias in Constraint Layout <TextView ... app:layout_constraintHorizontal_bias="0.27 app:layout_constraintVertical_bias="0.398" />
10. List View design using Constraint Layout
11. <LinearLayout> <ImageView/> <LinearLayout> <TextView /> <TextView /> </LinearLayout> </LinearLayout>
12. <android.support.constraint.ConstraintLayout> <ImageView android:id="@+id/image" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/name .... app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/image" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/description ,,, app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/image" app:layout_constraintTop_toBottomOf="@+id/name" /> </android.support.constraint.ConstraintLayout>
13. XML Tag in Constraint La
14. Understanding the XML tags. <TextView android:id="@+id/description" android:layout_width="0dp" ... app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/image" app:layout_constraintTop_toBottomOf="@+id/name" />
15. Complicated Stuff. <ImageView ... /> <android.support.design.widget.FloatingActionButton ... app:layout_constraintRight_toRightOf="@+id/holder_image" app:layout_constraintBottom_toBottomOf="@id/holder_image" app:layout_constraintTop_toBottomOf="@id/holder_image"/>
16. Animation with Constraint Layout
17. Using the XML layout setContentView(R.layout.list_item_base); ConstraintLayout constraintLayout = findViewById(R.id.main); shrinkedConstraintSet.clone(constraintLayout); expandedConstraintSet.clone(this, R.layout.list_item_details); expandedConstraintSet.applyTo(constraintLayout); //for smooth transition. TransitionManager.beginDelayedTransition(constraintLayout);
18. GuideLines
19. Traditional way to create spacing <TextView ... android:layout_marginStart="16dp" android:layout_marginTop="56dp"/> <TextView ... app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toBottomOf="@id/first_name_label" /> <android.support.v7.widget.AppCompatEditText ... android:layout_marginRight="16dp" android:layout_marginStart="8dp" android:layout_marginTop="48dp"/>
20. Do you even Styles Bruh ? <style name="I.need.some.cool.name" parent="AlertDialog.AppCompat"> <item name="android:layout_marginStart">16dp</item> <item name="android:layout_marginTop">20dp</item> </style> <TextView ... style="@style/I.need.some.cool.name"/>
21. Introducing GuideLines <android.support.constraint.Guideline android:id="@+id/sixteen_dips_start_gl" ... android:orientation="vertical" app:layout_constraintGuide_begin="16dp" /> <android.support.constraint.Guideline android:id="@+id/fifty_per_gl" ... android:orientation="horizontal" app:layout_constraintGuide_percent="0.5" /> <TextView app:layout_constraintLeft_toLeftOf="@id/sixteen_dips_start_gl" app:layout_constraintTop_toBottomOf="@id/first_name_label" />
22. Chains
23. Shiny Unicorn LinearLayout <LinearLayout android:orientation="horizontal"> <Button android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" /> <Button android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp"/> <Button android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp"/> </LinearLayout>
24. Introducing Chains <android.support.constraint.ConstraintLayout> <Button … android:id="@+id/button1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/button2" app:layout_constraintHorizontal_chainStyle="spread"/> <Button … android:id="@+id/button2" app:layout_constraintLeft_toRightOf="@id/button1" app:layout_constraintRight_toLeftOf="@id/button3"/> <Button ... android:id="@+id/button3" app:layout_constraintLeft_toRightOf="@id/button2" app:layout_constraintRight_toRightOf="parent"/> </android.support.constraint.ConstraintLayout>
25. Types of Chain spread spread_inside packed <Button android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintHorizontal_weight="2"/> <Button android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintHorizontal_weight="3"/> weighted
26. PlaceHolder
27. <android.support.constraint.Placeholder android:id="@+id/template_action" android:layout_width="48dp" android:layout_height="48dp" app:content="@+id/save" .../> <ImageButton android:id="@+id/save" .../> <ImageButton android:id="@+id/delete"/> <ImageButton android:id="@+id/edit"/> @OnClick(R.id.edit) public void onEditClicked(View view){ TransitionManager.beginDelayedTransition(constraintLayout); placeholder.setContentId(view.getId()); }
28. Groups
29. <ImageButton android:id="@+id/delete" android:layout_width="56dp" android:layout_height="56dp" .../> <ImageButton android:id="@+id/save" android:layout_width="56dp" android:layout_height="56dp" .../> <android.support.constraint.Group android:id="@+id/btn_grp" app:constraint_referenced_ids="delete,save" /> @OnClick(R.id.delete) public void clickedDelete(){ group.setVisibility(View.GONE); }
30. Barriers
31. <TextView android:id="@+id/first_name" .../> <TextView android:id="@+id/last_name" .../> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" android:orientation="vertical" app:constraint_referenced_ids="first_name,last_name" /> <TextView android:text="@string/random_desc" app:layout_constraintStart_toStartOf="@id/barrier" android:layout_marginStart="8dp" ... />
32. Percentage Dimension
33. <TextView android:id="@+id/textView6" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintHeight_default="percent" app:layout_constraintHeight_percent="0.5" app:layout_constraintWidth_default="percent" app:layout_constraintWidth_percent="0.5" />
34. Thank You Prathamesh Kesarkar @rookiepatty