NSC AD 340 5210 - Week 6

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