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

5f57d2d205e77e185986459c1b89a874?s=128

Jeroen Mols

April 18, 2020
Tweet

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