NSC AD 340 5210 - Week 6

Df78ed2e647f52dadaac996721a6bdfb?s=47 Nate Ebel
May 17, 2020
62

NSC AD 340 5210 - Week 6

Df78ed2e647f52dadaac996721a6bdfb?s=128

Nate Ebel

May 17, 2020
Tweet

Transcript

  1. Week 6 Lecture Navigation

  2. What are we building this week? Navigate between different screens

    in your app 02 Project Demo Navigation 01 Material Design Consistent UI styling and user interactions 03
  3. Week 6 Project Updates • Implementing app navigation using the

    Navigation architecture component • Adding a WeeklyForecastFragment • Adding bottom navigation to our app
  4. Project Demo What are we building this week?

  5. Navigation Move between screens in your app

  6. Navigation Architecture Component

  7. What is the Navigation component?

  8. Navigation Component • Android Jetpack Architecture Component library • Manages

    fragment transactions • Provides navigation graph • Navigation design editor • Safe-args for fragment params
  9. What problems does the Navigation component aim to solve?

  10. Navigation Component • Visual representation of app navigation • Compile-time

    validation of destination transactions • Deeplink routing • Simplified animations • Compile-time validation of fragment args
  11. Navigation Graph

  12. • Destinations • Actions

  13. What functionality does Navigation provide?

  14. Navigation Component Functionality Managed Fragment Transactions Generated Navigation Actions Deeplink

    Support Visual Navigation Graph Built-In Animation Apis Integration With Material Design UI
  15. Navigation Graph XML representation of app navigation NavHost A container

    where fragments will be displayed NavController Manages the transitions between graph destinations Key Components
  16. // root/build.gradle classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.2.2" // app/build.gradle implementation "androidx.navigation:navigation-fragment-ktx:2.2.2" implementation "androidx.navigation:navigation-ui-ktx:2.2.2"

    Dependencies
  17. Create A Nav Graph Create an XML file to define

    our app’s navigation graph Add A Start Destination Define which Fragment to show when app starts Add Nav Graph to NavHost Connect our XML nav graph to the container that will display Fragments Implementing Navigation
  18. Add More Destinations Add new Fragment destinations to the XML

    nav graph Connect Destinations With Actions Define how destinations are connected Navigate to Destinations Using NavController NavController will manage the Fragment transactions and UI updates Implementing Navigation
  19. Material Design Consistent UI styling and user interactions

  20. What is Material Design?

  21. Material Design • Design language developed by Google • Standard

    UI elements, sizing, styling, and interactions • Simplifies design for developers
  22. Material.io

  23. Component Library

  24. Info and actions related to the current screen AppBar Material

    Design Components Provides movement between top-level destinations in an app Bottom Navigation
  25. • Position top or bottom • Title • Menu items

    • Drawer button • Back button AppBar
  26. None
  27. • Bottom of screen • Label/Icon • Notification badges •

    Selection / Reselection Bottom Navigation
  28. None
  29. Guidance on Material Design navigation patterns across mobile and web

  30. material.io/resources/color

  31. DEMO

  32. RESOURCES Did you like the resources on this template? Get

    them for free at our other websites. • Pack E-learning • Designer girl concept illustration • Social media • Documents • Statistics • Blogger post • At work • Business landing page • Business landing page • Business landing page • Resume