Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. WHY

  2. @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?” ….
  3. HOW

  4. @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>
  5. @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>
  6. @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>
  7. @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>
  8. @MOLSJEROEN SAMPLE DATA App ├── build ├── sampledata │ ├──

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

    │ ├── bankssampledata.json │ ├── eur │ │ └── eur.png │ └── gbp │ └── gbp.png ├── src │ ├── main │ └── test └── build.gradle
  10. @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" }, ... ]
  11. @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" }, ... ]
  12. @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" }, ... ]
  13. @MOLSJEROEN SAMPLE DATA - IMAGES App ├── build ├── sampledata

    │ ├── bankssampledata.json │ ├── eur │ │ └── eur.png │ └── gbp │ └── gbp.png ├── src │ ├── main │ └── test └── build.gradle
  14. @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" }, ... ]
  15. @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" }, ... ]
  16. @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>
  17. @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>
  18. @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/