$30 off During Our Annual Pro Sale. View Details »

Powerful layout previews

Powerful layout previews

Video: https://www.youtube.com/watch?v=TCKb1WfjAC8

Layout previews are extremely powerful: they make it easy to find screens, modify existing layouts and help understand screen functionality without navigating the code. Even more, thanks to the Android Navigation components, layout previews can even serve as an always up to date wireframes of your app!

In this video, you will learn how to use the tools-attribute to enable layout previews, how to add realistic previews to RecyclerViews and how to provide your own custom sample data, including images.

This video comes with a large sample application https://bit.ly/transferwise-android

Jeroen Mols

April 18, 2020
Tweet

More Decks by Jeroen Mols

Other Decks in Programming

Transcript

  1. @MOLSJEROEN
    POWERFUL LAYOUT
    PREVIEWS

    View Slide

  2. @MOLSJEROEN
    WHY
    HOW
    WRAP-UP

    View Slide

  3. WHY

    View Slide

  4. @MOLSJEROEN
    APP STRUCTURE

    View Slide

  5. @MOLSJEROEN
    APP STRUCTURE

    View Slide

  6. @MOLSJEROEN
    APP STRUCTURE

    View Slide

  7. @MOLSJEROEN
    APP WIREFRAME

    View Slide

  8. @MOLSJEROEN
    APP WIREFRAME

    View Slide

  9. @MOLSJEROEN
    UNIQUE CHALLENGES
    “I found a bug in this screen, can you fix it?”
    “How did we call the screen again that does X?”
    “Wow what does the AskConfirmationAgainFragment do?”
    “How do I navigate to screen X?”
    ….

    View Slide

  10. @MOLSJEROEN
    A PICTURE SAYS MORE THAN 1000 WORDS

    View Slide

  11. HOW

    View Slide

  12. @MOLSJEROEN
    NAVIGATION GRAPHS ARE GREAT, BUT…
    bit.ly/transferwise-android

    View Slide

  13. @MOLSJEROEN
    RECYCLERVIEW

    View Slide

  14. @MOLSJEROEN
    TOOLS ATTRIBUTE

    View Slide

  15. @MOLSJEROEN
    RECYCLERVIEW
    android:id="@+id/list"
    android:layout_width=“match_parent"
    android:layout_height=“match_parent"
    tools:listitem="@layout/item_currency"
    />

    View Slide

  16. @MOLSJEROEN
    RECYCLERVIEW
    android:id="@+id/list"
    android:layout_width=“match_parent"
    android:layout_height=“match_parent"
    tools:listitem="@layout/item_currency"
    />

    View Slide

  17. @MOLSJEROEN
    RECYCLERVIEW

    View Slide

  18. @MOLSJEROEN
    LISTITEM - CURRENCY
    android:id="@+id/currency" >
    android:id="@+id/flag"
    tools:src=“@drawable/eur" />
    android:id="@+id/name"
    tools:text="Euro" />
    android:id="@+id/code"
    tools:text="EUR" />

    View Slide

  19. @MOLSJEROEN
    LISTITEM - CURRENCY
    android:id="@+id/currency" >
    android:id="@+id/flag"
    tools:src=“@drawable/eur" />
    android:id="@+id/name"
    tools:text="Euro" />
    android:id="@+id/code"
    tools:text="EUR" />

    View Slide

  20. @MOLSJEROEN
    RECYCLERVIEW

    View Slide

  21. @MOLSJEROEN
    LISTITEM - RECIPIENT
    android:id="@+id/recipient">
    android:id="@+id/initial"
    tools:text="AB"
    tools:backgroundTint=“#ffa1ac" />
    android:id="@+id/name"
    tools:text="Adan Blair"/>
    android:id="@+id/account"
    tools:text="NL29 INGB 7673 6570 82" />

    View Slide

  22. @MOLSJEROEN
    LISTITEM - RECIPIENT
    android:id="@+id/recipient">
    android:id="@+id/initial"
    tools:text="AB"
    tools:backgroundTint=“#ffa1ac" />
    android:id="@+id/name"
    tools:text="Adan Blair"/>
    android:id="@+id/account"
    tools:text="NL29 INGB 7673 6570 82" />

    View Slide

  23. @MOLSJEROEN
    RECYCLERVIEW

    View Slide

  24. @MOLSJEROEN
    SAMPLE DATA
    App
    ├── build
    ├── sampledata
    │ ├── bankssampledata.json
    │ ├── eur
    │ │ └── eur.png
    │ └── gbp
    │ └── gbp.png
    ├── src
    │ ├── main
    │ └── test
    └── build.gradle

    View Slide

  25. @MOLSJEROEN
    SAMPLE DATA - FOLDER
    App
    ├── build
    ├── sampledata
    │ ├── bankssampledata.json
    │ ├── eur
    │ │ └── eur.png
    │ └── gbp
    │ └── gbp.png
    ├── src
    │ ├── main
    │ └── test
    └── build.gradle

    View Slide

  26. @MOLSJEROEN
    SAMPLE DATA - JSON
    {
    "comment": "Currency data",
    "currencies": [
    {
    "name": "British pound",
    "code": "GBP",
    "flag": "@sample/gbp"
    },
    ...
    ],
    "recipients": [
    {
    "name": "Adan Blair",
    "initial": "AD",
    "color": "#ffa1ac",
    "accountSummary": "NL29 INGB 7673 6570 82"
    },
    ...
    ]

    View Slide

  27. @MOLSJEROEN
    SAMPLE DATA - JSON
    {
    "comment": "Currency data",
    "currencies": [
    {
    "name": "British pound",
    "code": "GBP",
    "flag": "@sample/gbp"
    },
    ...
    ],
    "recipients": [
    {
    "name": "Adan Blair",
    "initial": "AD",
    "color": "#ffa1ac",
    "accountSummary": "NL29 INGB 7673 6570 82"
    },
    ...
    ]

    View Slide

  28. @MOLSJEROEN
    SAMPLE DATA - JSON
    {
    "comment": "Currency data",
    "currencies": [
    {
    "name": "British pound",
    "code": "GBP",
    "flag": "@sample/gbp"
    },
    ...
    ],
    "recipients": [
    {
    "name": "Adan Blair",
    "initial": "AD",
    "color": "#ffa1ac",
    "accountSummary": "NL29 INGB 7673 6570 82"
    },
    ...
    ]

    View Slide

  29. @MOLSJEROEN
    SAMPLE DATA - IMAGES
    App
    ├── build
    ├── sampledata
    │ ├── bankssampledata.json
    │ ├── eur
    │ │ └── eur.png
    │ └── gbp
    │ └── gbp.png
    ├── src
    │ ├── main
    │ └── test
    └── build.gradle

    View Slide

  30. @MOLSJEROEN
    SAMPLE DATA - IMAGES
    {
    "comment": "Currency data",
    "currencies": [
    {
    "name": "British pound",
    "code": "GBP",
    "flag": "@sample/gbp"
    },
    ...
    ],
    "recipients": [
    {
    "name": "Adan Blair",
    "initial": "AD",
    "color": "#ffa1ac",
    "accountSummary": "NL29 INGB 7673 6570 82"
    },
    ...
    ]

    View Slide

  31. @MOLSJEROEN
    SAMPLE DATA - JSON
    {
    "comment": "Currency data",
    "currencies": [
    {
    "name": "British pound",
    "code": "GBP",
    "flag": "@sample/gbp"
    },
    ...
    ],
    "recipients": [
    {
    "name": "Adan Blair",
    "initial": "AD",
    "color": "#ffa1ac",
    "accountSummary": "NL29 INGB 7673 6570 82"
    },
    ...
    ]

    View Slide

  32. @MOLSJEROEN
    LISTITEM - CURRENCY
    android:id="@+id/currency" >
    android:id="@+id/flag"
    tools:src=“@sample/bankssampledata.json/currencies/flag“ />
    android:id="@+id/name"
    tools:text=“@sample/bankssampledata.json/currencies/name" />
    android:id="@+id/code"
    tools:text=“@sample/bankssampledata.json/currencies/code” />

    View Slide

  33. @MOLSJEROEN
    LISTITEM - RECIPIENT
    android:id="@+id/currency" >
    android:id="@+id/initial"
    tools:text="@sample/bankssampledata.json/recipients/initial"
    tools:backgroundTint="@sample/bankssampledata.json/recipients/color" />
    android:id="@+id/name"
    tools:text="@sample/bankssampledata.json/recipients/name" />
    android:id="@+id/account"
    tools:text="@sample/bankssampledata.json/recipients/accountSummary" />

    View Slide

  34. @MOLSJEROEN
    RECYCLERVIEW

    View Slide

  35. @MOLSJEROEN
    RESULT
    bit.ly/transferwise-android

    View Slide

  36. WRAP UP

    View Slide

  37. @MOLSJEROEN
    PICTURE > 1000 WORDS
    TOOLS ATTRIBUTE
    CUSTOM SAMPLE DATA

    View Slide

  38. @MOLSJEROEN
    HTTPS://JEROENMOLS.COM/BLOG

    View Slide

  39. @MOLSJEROEN
    IMAGE CREDITS
    Welcome image by Steve Roberts
    https://flic.kr/p/TKriLF
    Navigation graph screenshot from official Android documentation
    Font awesome
    https://fontawesome.com/

    View Slide

  40. @MOLSJEROEN
    @MOLSJEROEN
    @MOLSJEROEN

    View Slide