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

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