There is new under Android - The newest layout techniques

My presentation about new Android layouts and Data Binding from Google I/O Extended 2017 Budapest.

I talked about Flexbox Layout, Percent Support Library, Constraint Layout, Data Binding. The slides are in English, but the talk was presented in Hungarian and contained a live coding session where I showed where these technologies come in handy via a real-world example (a simple registration form). The screen was fully implemented by the end of the talk, started from scratch.

You can watch the recording of the talk here: https://youtu.be/cRyi5crJRDU

Links from the end:
Flexbox Layout on GitHub
https://github.com/google/flexbox-layout

Android Developers – Constraint Layout
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html

AutSoft Engineering Blog
https://blog.autsoft.hu/

Keep in mind that my email address that was shown in the slides no longer works (as I no longer work at AutSoft), but you can still reach me via the twitter handle.

1. There is new under Android The newest layout techniques Balázs Gerlei @balazsgerlei gerlei.balazs@autsoft.hu
2. Let me introduce you to… • Flexbox Layout • Percent Support Library • Constraint Layout • Data Binding
3. The design to be implemented
4. Flexbox Layout • Separate library from Google • compile 'com.google.android:flexbox:0.2.6' • compile 'com.google.android:flexbox:0.3.0-alpha3' • Widely used in web development (CSS) • Very flexible, can adopt to a wide range of configuration changes • The placing of the contained Views are highly customizable
5. Flexbox Layout • Still in active development, not fully stable yet • Can be quite fiddly • ”If your only tool is a hammer, everything looks like a nail” Cons • Flexible and adapts easily to all kind of configuration changes • Familiar to web developers, and designers with experience in web design • Highly customizable distribution of contained Views • Can be very useful to adopt to windowed Android apps Pros
6. https://github.com/google/flexbox-layout
7. Percent Support Library • Part of the support library • compile 'com.android.support:percent:25.3.1' • New versions of the existing layouts (FrameLayout, RelativeLayout), which are sublcasses of the original Layout classes • Layout attributes can be specified in percent • The UI can easily adopt to configuration changes (ex. orientation change) with it
8. • Officially DEPRECATED (Google advises to use the newer ConstraintLayout instead) • Makes harder to align with a well defined grid-based UI design • Sometimes it is harder to design a layout with it Cons • Flexible, adapts naturally to configuration changes and different screen sizes • Intuitive to define a layout with percents Pros Percent Support Library
9. Constraint Layout • Part of the support library • compile 'com.android.support.constraint:constraint-layout:1.0.2' • Introduced at last year’s Google I/O • Aims to „flatten” the View hierarchy for both performance and maintainability reasons • So-called constraints define the position of Views relative to each other and the container • A new visual editor can (and should) be used to define layouts with it
10. • The visual editor is quite resource intensive and can lag • Requires different thinking • Preview is not always correct • Bugs still happen… Cons • Modern and flexible • Performant, flat View hierarchy • Finally it is viable to develop UI in a visual editor • Constraints are intuitive • Similar to iOS UI development Pros Constraint Layout
11. Data Binding • Can be enabled in the build.gradle file, no additional libraries needed • Establishes connection between the UI and the data models • One-way binding • Two-way binding • No more findViewById( ) calls! • Useful for implementing MVVM (Model-View-ViewModel) • You can even write simple expressions in the layout XML • Use this carefully though!
12. Data Binding • Have to wrap your layout and specify the data class that is bound to it • No need to specify IDs for every View that is modified in code • A Binding class is generated for every Layout tha use Data Binding • It can be used to access Views in the layout • Methods can be bound to View events
13. • Differs from the well-known way of Android programming • Not the best IDE integration (improving) • Confusing error messages • No refactoring support • UI Testing is a bit challenging (but it kinda always is) Cons • Eliminates boilerplate, minimizes UI code in Activites/Fragments • There can be one source of truth for the UI • MVVM • No need to worry about the main thread Pros Data Binding
14. Don’t forget to use every tool at your disposal. Thanks! • Flexbox Layout on GitHub • github.com/google/flexbox-layout • Android Developers – Constraint Layout • developer.android.com/reference/android/support/cons traint/ConstraintLayout.html • AutSoft Engineering Blog • blog.autsoft.hu @balazsgerlei gerlei.balazs@autsoft.hu