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
2. @MOLSJEROEN WHY HOW WRAP-UP
3. WHY
4. @MOLSJEROEN APP STRUCTURE
5. @MOLSJEROEN APP STRUCTURE
6. @MOLSJEROEN APP STRUCTURE
7. @MOLSJEROEN APP WIREFRAME
8. @MOLSJEROEN APP WIREFRAME
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?” ….
10. @MOLSJEROEN A PICTURE SAYS MORE THAN 1000 WORDS
11. HOW
12. @MOLSJEROEN NAVIGATION GRAPHS ARE GREAT, BUT… bit.ly/transferwise-android
13. @MOLSJEROEN RECYCLERVIEW
14. @MOLSJEROEN TOOLS ATTRIBUTE <LinearLayout xmlns:tools="http://schemas.android.com/tools" />
15. @MOLSJEROEN RECYCLERVIEW <androidx.recyclerview.widget.RecyclerView android:id="@+id/list" android:layout_width=“match_parent" android:layout_height=“match_parent" tools:listitem="@layout/item_currency" />
16. @MOLSJEROEN RECYCLERVIEW <androidx.recyclerview.widget.RecyclerView android:id="@+id/list" android:layout_width=“match_parent" android:layout_height=“match_parent" tools:listitem="@layout/item_currency" />
17. @MOLSJEROEN RECYCLERVIEW
18. @MOLSJEROEN LISTITEM - CURRENCY <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/currency" > <ImageView android:id="@+id/flag" tools:src=“@drawable/eur" /> <TextView android:id="@+id/name" tools:text="Euro" /> <TextView android:id="@+id/code" tools:text="EUR" /> </androidx.constraintlayout.widget.ConstraintLayout>
19. @MOLSJEROEN LISTITEM - CURRENCY <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/currency" > <ImageView android:id="@+id/flag" tools:src=“@drawable/eur" /> <TextView android:id="@+id/name" tools:text="Euro" /> <TextView android:id="@+id/code" tools:text="EUR" /> </androidx.constraintlayout.widget.ConstraintLayout>
20. @MOLSJEROEN RECYCLERVIEW
21. @MOLSJEROEN LISTITEM - RECIPIENT <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/recipient"> <TextView android:id="@+id/initial" tools:text="AB" tools:backgroundTint=“#ffa1ac" /> <TextView android:id="@+id/name" tools:text="Adan Blair"/> <TextView android:id="@+id/account" tools:text="NL29 INGB 7673 6570 82" /> </androidx.constraintlayout.widget.ConstraintLayout>
22. @MOLSJEROEN LISTITEM - RECIPIENT <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/recipient"> <TextView android:id="@+id/initial" tools:text="AB" tools:backgroundTint=“#ffa1ac" /> <TextView android:id="@+id/name" tools:text="Adan Blair"/> <TextView android:id="@+id/account" tools:text="NL29 INGB 7673 6570 82" /> </androidx.constraintlayout.widget.ConstraintLayout>
23. @MOLSJEROEN RECYCLERVIEW
24. @MOLSJEROEN SAMPLE DATA App ├── build ├── sampledata │ ├── bankssampledata.json │ ├── eur │ │ └── eur.png │ └── gbp │ └── gbp.png ├── src │ ├── main │ └── test └── build.gradle
25. @MOLSJEROEN SAMPLE DATA - FOLDER App ├── build ├── sampledata │ ├── bankssampledata.json │ ├── eur │ │ └── eur.png │ └── gbp │ └── gbp.png ├── src │ ├── main │ └── test └── build.gradle
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" }, ... ]
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" }, ... ]
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" }, ... ]
29. @MOLSJEROEN SAMPLE DATA - IMAGES App ├── build ├── sampledata │ ├── bankssampledata.json │ ├── eur │ │ └── eur.png │ └── gbp │ └── gbp.png ├── src │ ├── main │ └── test └── build.gradle
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" }, ... ]
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" }, ... ]
32. @MOLSJEROEN LISTITEM - CURRENCY <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/currency" > <ImageView android:id="@+id/flag" tools:src=“@sample/bankssampledata.json/currencies/flag“ /> <TextView android:id="@+id/name" tools:text=“@sample/bankssampledata.json/currencies/name" /> <TextView android:id="@+id/code" tools:text=“@sample/bankssampledata.json/currencies/code” /> </androidx.constraintlayout.widget.ConstraintLayout>
33. @MOLSJEROEN LISTITEM - RECIPIENT <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/currency" > <TextView android:id="@+id/initial" tools:text="@sample/bankssampledata.json/recipients/initial" tools:backgroundTint="@sample/bankssampledata.json/recipients/color" /> <TextView android:id="@+id/name" tools:text="@sample/bankssampledata.json/recipients/name" /> <TextView android:id="@+id/account" tools:text="@sample/bankssampledata.json/recipients/accountSummary" /> </androidx.constraintlayout.widget.ConstraintLayout>
34. @MOLSJEROEN RECYCLERVIEW
35. @MOLSJEROEN RESULT bit.ly/transferwise-android
36. WRAP UP
37. @MOLSJEROEN PICTURE > 1000 WORDS TOOLS ATTRIBUTE CUSTOM SAMPLE DATA
38. @MOLSJEROEN HTTPS://JEROENMOLS.COM/BLOG
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/
40. @MOLSJEROEN @MOLSJEROEN @MOLSJEROEN