Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android Design Tools : New features and tools for rapid UI development

Android Design Tools : New features and tools for rapid UI development

Android Studio provides powerful tools to help you develop your application user interface. With many capabilities added in the past year, there's a lot to discover for developers. This talk covers how you can use those new tools and how they integrate with existing libraries. We will also cover new approaches such as ConstraintLayout to craft flexible user interfaces quickly.

Nicolas Roard

April 11, 2017
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag https://developer.android.com/studio/write/tool-attributes.html
  2. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag override attributes at design time https://developer.android.com/studio/write/tool-attributes.html
  3. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues https://developer.android.com/studio/write/tool-attributes.html
  4. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one https://developer.android.com/studio/write/tool-attributes.html
  5. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one which layout to use for a fragment https://developer.android.com/studio/write/tool-attributes.html
  6. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one which layout to use for a fragment which layout for a list item https://developer.android.com/studio/write/tool-attributes.html
  7. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout

    • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one which layout to use for a fragment which layout for a list item define which layout to use as parent for merge tag https://developer.android.com/studio/write/tool-attributes.html
  8. Useful shortcuts • <esc> to select a parent group •

    <ctrl><shift> to switch between XML and Design mode • double-click on included elements <left> <right>
  9. Why

  10. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout

    EditText TextView Horizontal LinearLayout EditText TextView TextView
  11. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout

    EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
  12. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout

    EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
  13. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout

    EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
  14. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout

    EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
  15. What • Small (130 Kb) • Unbundled Library • Flexible

    foundation • Direct Resolution • Linear System Solver
  16. What • Small (130 Kb) • Unbundled Library • Flexible

    foundation • Direct Resolution • Linear System Solver Linear System Solver
  17. What • Small (130 Kb) • Unbundled Library • Flexible

    foundation • Direct Resolution • Linear System Solver Linear System Solver Constraints System
  18. What • Small (130 Kb) • Unbundled Library • Flexible

    foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System
  19. What • Small (130 Kb) • Unbundled Library • Flexible

    foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System UI Builder
  20. What • Small (130 Kb) • Unbundled Library • Flexible

    foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System UI Builder Inference
  21. 1.0.2 • 16 updates since Google IO’16 • Faster! •

    New Features • Improved Visual Editor support • Default Layout in Android Studio
  22. Relative Positioning <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent"> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" tools:layout_editor_absoluteX="56dp" tools:layout_editor_absoluteY="73dp" /> <Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintLeft_toRightOf="@+id/button7" android:layout_marginLeft=“45dp" app:layout_constraintTop_toBottomOf="@+id/button7" android:layout_marginTop="38dp"/> </android.support.constraint.ConstraintLayout> Chains Guidelines Gone Dimension Relative Positions
  23. Relative Positioning <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent"> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" tools:layout_editor_absoluteX="56dp" tools:layout_editor_absoluteY="73dp" /> <Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintLeft_toRightOf="@+id/button7" android:layout_marginLeft=“45dp" app:layout_constraintTop_toBottomOf="@+id/button7" android:layout_marginTop="38dp"/> </android.support.constraint.ConstraintLayout> Chains Guidelines Gone Dimension Relative Positions
  24. Dimensions • wrap_content • match_constraint (0dp) • fixed size android:layout_height=“wrap_content"

    android:layout_height="0dp" android:layout_height="42dp" Chains Guidelines Gone Dimension Relative Positions
  25. Match Constraint • default behavior (spread vs wrap) • ratio

    • weights (in chains) • min & max Chains Guidelines Gone Dimension Relative Positions
  26. Different Chain Styles A B C Spread A B C

    Spread Inside A B C Weighted A B C Packed Chains Guidelines Gone Dimension Relative Positions
  27. Different Chain Styles A B C Spread A B C

    Spread Inside A B C Weighted A B C Packed + bias Chains Guidelines Gone Dimension Relative Positions
  28. Inference Automatically create constraints • Based on probability a model

    for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
  29. Inference Automatically create constraints • Based on probability a model

    for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
  30. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint

    Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
  31. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint

    Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
  32. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint

    Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet TransitionManager.beginDelayedTransition(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
  33. • Programmatically change individual parameters • Use TransitionManager to smooth

    animation Individual View Animation //Find the view you are over and set minimum height TransitionManager.beginDelayedTransition(myConstraintLayout); View child = myConstraintLayout.getChildAt(current); child.setMinimumHeight(400);
  34. Row

  35. Row

  36. How it works • Vertical Chain, packed • ImageView with

    height=0dp • ImageView with default height behavior to “wrap”
  37. How it works • Vertical Chain, packed • ImageView with

    height=0dp • ImageView with default height behavior to “wrap”
  38. How it works • Horizontal Chain, packed • Bias to

    0 • Resizable element set to default=wrap
  39. What’s next • Android Studio 2.4 • default RTL support

    in ConstraintLayout editor • Component Tree • ConstraintLayout 1.1 • Barriers • Groups
  40. Groups • Apply operations on a group of widget •

    opacity • translate • elevation • visibility
  41. Fin

  42. Contact Nicolas Roard @camaelon +NicolasRoard John Hoford @johnhoford +johnhoford Documentation

    https://developer.android.com/ reference/android/support/constraint/ package-summary.html File Bugs! http://b.android.com