Android Material Design: Grids & Keylines

Droidcon London '17
https://skillsmatter.com/skillscasts/9314-grids-and-keylines

Library Link
https://github.com/ragunathjawahar/keylines

Transcript

1. Grids & Keylines Ragunath Jawahar
2. Design •Spacing •Typography
5. Challenges •Validating the UI •QA •Time •Lack of Tools
6. Philosophy •Fail Fast •Lower the bar for Developers •Lean and less intrusive
7. Keylines
8. Dependencies allprojects {  //  build.gradle (root) repositories  { maven  {  url "https://jitpack.io" } } } dependencies  {  //  build.gradle (module) debugCompile 'com.github.ragunathjawahar.keylines:sdk:0.1-­‐preview' releaseCompile 'com.github.ragunathjawahar.keylines:sdk-­‐no-­‐op:0.1-­‐preview' testCompile 'com.github.ragunathjawahar.keylines:sdk-­‐no-­‐op:0.1-­‐preview’ }
9. Spec { "keylines":  [ {  "offset":  16,  "from":  "LEFT" }, {  "offset":  72,  "from":  "LEFT" }, {  "offset":  16,  "from":  "RIGHT" } ], "spacings":  [ {  "offset":  0,  "size":  16,  "from":  "LEFT" }, {  "offset":  56,  "size":  16,  "from":  "LEFT" }, {  "offset":  0,  "size":  16,  "from":  "RIGHT" } ] }
10. Activity @DesignSpec(R.raw.activity_emails) public  class  EmailsActivity extends  Activity  { //  ... }
11. Fragment @DesignSpec(R.raw.fragment_email_details) public  class  EmailDetailsFragment extends  Fragment  { public  void  onStart()  { super.onStart(); Keylines.getInstance().spec(this); } }
12. Demo
13. Future •Multiple Fragments •DSL with a higher-level of abstraction •Metrics •Typography •Specs to Views •Ratio keylines and other elements
14. https://github.com/ragunathjawahar/keylines
15. ragunathjawahar GitHub / Gmail / Twitter