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

NSC AD 340 5210 - Week 6

Nate Ebel
May 17, 2020
240

NSC AD 340 5210 - Week 6

Nate Ebel

May 17, 2020
Tweet

Transcript

  1. Week 6
    Lecture
    Navigation

    View 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 Slide

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

    View Slide

  4. Project Demo
    What are we building
    this week?

    View Slide

  5. Navigation
    Move between screens
    in your app

    View Slide

  6. Navigation
    Architecture
    Component

    View Slide

  7. What is the Navigation
    component?

    View Slide

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

    View Slide

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

    View 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 Slide

  11. Navigation
    Graph

    View Slide

  12. ● Destinations
    ● Actions

    View Slide

  13. What functionality does
    Navigation provide?

    View 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 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 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 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 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 Slide

  19. Material Design
    Consistent UI styling and user
    interactions

    View Slide

  20. What is Material
    Design?

    View Slide

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

    View Slide

  22. Material.io

    View Slide

  23. Component Library

    View Slide

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

    View Slide

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

    View Slide

  26. View Slide

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

    View Slide

  28. View Slide

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

    View Slide

  30. material.io/resources/color

    View Slide

  31. DEMO

    View Slide

  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

    View Slide