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

NSC AD 340 5210 - Week 6

Nate Ebel
May 17, 2020
260

NSC AD 340 5210 - Week 6

Nate Ebel

May 17, 2020
Tweet

Transcript

  1. Week 6
    Lecture
    Navigation

    View full-size slide

  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

    View full-size slide

  3. Week 6 Project
    Updates
    ● Implementing app navigation using the Navigation architecture component
    ● Adding a WeeklyForecastFragment
    ● Adding bottom navigation to our app

    View full-size slide

  4. Project Demo
    What are we building
    this week?

    View full-size slide

  5. Navigation
    Move between screens
    in your app

    View full-size slide

  6. Navigation
    Architecture
    Component

    View full-size slide

  7. What is the Navigation
    component?

    View full-size slide

  8. Navigation
    Component
    ● Android Jetpack Architecture
    Component library
    ● Manages fragment transactions
    ● Provides navigation graph
    ● Navigation design editor
    ● Safe-args for fragment params

    View full-size slide

  9. What problems does the
    Navigation component
    aim to solve?

    View full-size slide

  10. Navigation
    Component
    ● Visual representation of app
    navigation
    ● Compile-time validation of
    destination transactions
    ● Deeplink routing
    ● Simplified animations
    ● Compile-time validation of
    fragment args

    View full-size slide

  11. Navigation
    Graph

    View full-size slide

  12. ● Destinations
    ● Actions

    View full-size slide

  13. What functionality does
    Navigation provide?

    View full-size slide

  14. Navigation Component Functionality
    Managed Fragment
    Transactions
    Generated Navigation
    Actions
    Deeplink Support
    Visual Navigation Graph
    Built-In Animation Apis
    Integration With Material
    Design UI

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  19. Material Design
    Consistent UI styling and user
    interactions

    View full-size slide

  20. What is Material
    Design?

    View full-size slide

  21. Material Design
    ● Design language developed by
    Google
    ● Standard UI elements, sizing,
    styling, and interactions
    ● Simplifies design for
    developers

    View full-size slide

  22. Component Library

    View full-size slide

  23. Info and actions related to the
    current screen
    AppBar
    Material Design Components
    Provides movement between
    top-level destinations in an
    app
    Bottom Navigation

    View full-size slide

  24. ● Position top or bottom
    ● Title
    ● Menu items
    ● Drawer button
    ● Back button
    AppBar

    View full-size slide

  25. ● Bottom of screen
    ● Label/Icon
    ● Notification badges
    ● Selection / Reselection
    Bottom Navigation

    View full-size slide

  26. Guidance on Material Design
    navigation patterns across
    mobile and web

    View full-size slide

  27. material.io/resources/color

    View full-size slide

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

    View full-size slide